Accessibility report
Built to be used by everyone
I build portals that councils are legally required to make accessible, so I hold my own site to the same standard: WCAG 2.2 at level AA. This page is the audit, including the parts that are not finished.
- Target
- WCAG 2.2 AA
- Status
- Partially conformant
- Last reviewed
- October 2026
How it was checked
- Every template, stylesheet and script on the site was reviewed line by line against the WCAG 2.2 success criteria.
- Colour contrast was calculated from the design tokens with the WCAG relative luminance formula, not judged by eye.
- Keyboard paths were traced through each interactive control: navigation and the CV project toggles.
- Motion was checked against the
prefers-reduced-motionsetting in both the CSS and the JavaScript.
Not done yet: full sessions with NVDA and VoiceOver, and an automated axe scan in the build. Until those are done, "partially conformant" is the honest label.
What the audit found and fixed
| Problem | WCAG criterion | Fix |
|---|---|---|
| Small grey labels were too faint to read comfortably | 1.4.3 Contrast (Minimum) | Label colour raised from 3.89:1 to 5.53:1 across the whole site by changing one design token |
| Keyboard users had to tab through the navigation on every page | 2.4.1 Bypass Blocks | A "Skip to content" link is the first stop on every page |
| The home page name was split across two headings, and the job title was exposed through an attribute screen readers ignore | 1.3.1 Info and Relationships | One heading with plain text for assistive technology; the animated letters are hidden from it |
| CV project toggles were styled blocks pretending to be buttons, which hid their headings and never said whether they were open | 4.1.2 Name, Role, Value | Real buttons inside real headings, announcing expanded or collapsed and pointing at the panel they control |
| Form field borders were nearly invisible | 1.4.11 Non-text Contrast | Border raised from roughly 1.6:1 to at least 3.34:1 |
| Scripts forced animations and smooth scrolling on visitors who had asked for less motion | 2.3.3 Animation from Interactions | Both the CSS and the JavaScript now check the reduced motion setting |
| Two pages had near-identical titles | 2.4.2 Page Titled | Every page has a unique title |
| The waiting room had no heading and its status was plain text | 4.1.3 Status Messages | Added a heading and marked the message as a status region |
Colour contrast, measured
Each pair is the worst case found for that colour on the site. Normal text needs 4.5:1; large text, borders and focus indicators need 3:1.
| Pairing | Ratio | Required | Result |
|---|---|---|---|
| Body text on the page background | 16.79:1 | 4.5:1 | Pass |
| Secondary text on raised panels | 7.13:1 | 4.5:1 | Pass |
| Small labels on raised panels | 5.20:1 | 4.5:1 | Pass |
| Accent text on raised panels | 5.03:1 | 4.5:1 | Pass |
| Button text on the accent colour | 5.37:1 | 4.5:1 | Pass |
| Focus outline on the page background | 5.35:1 | 3:1 | Pass |
| Form field borders on raised panels | 3.34:1 | 3:1 | Pass |
Built in from the start
- Semantic landmarks, one
h1per page and headings that never skip a level - The current page is marked in the navigation for screen readers, not only by colour
- Every screenshot has descriptive alt text, and purely decorative graphics are hidden from assistive technology
- Every form field has a visible, programmatically linked label
- Sizes are in relative units and zoom is never blocked, and every layout collapses to a single column on narrow screens
- A visible focus outline on every interactive element
- Nothing is conveyed by colour alone: status badges carry text
- The CV has a print stylesheet that switches to dark text on white and expands every collapsed section
- This page practises it too: both tables have row and column headers and can be scrolled by keyboard on small screens
Known limitations
- Home page subtitle without JavaScript. The animated job title stays invisible if the script fails to load. Screen readers still receive it as plain text.
- CV sidebar on short screens. On a short desktop window the sidebar scrolls without a visible scrollbar, so there is no visual hint that more sits below.
- Assistive technology testing. The audit so far is a code review. Screen reader and voice control sessions are still to come.