Tab through the page, zoom to 200 percent and to a 320-pixel width, check text contrast, read the heading outline, fill the main form using only the keyboard, and turn on reduced motion. Each step takes about two minutes and maps to a specific WCAG 2.2 criterion.
Key takeaways
- Keyboard first. If you cannot reach or see where you are with Tab, nothing else matters (WCAG 2.1.1 and 2.4.7).
- Zoom breaks layouts quickly. 200 percent text size and a 320 CSS pixel width should not require horizontal scrolling or hide content (1.4.4 and 1.4.10).
- Contrast is measurable. 4.5:1 for normal text (1.4.3); a script can check your design tokens.
- Headings are a table of contents. One H1 and no skipped levels give screen reader users a way to jump around (1.3.1 and 2.4.6).
- A sticky header can hide the focused element. WCAG 2.2 criterion 2.4.11 asks that a focused item not be fully hidden by author-created content.
1. Keyboard (2 minutes)
Put the mouse aside and press Tab repeatedly. Check that focus visibly moves in a logical order, that you can open every menu and button with Enter or Space, that you are never trapped, and that the focused item is not hidden under a sticky header or banner. Shift+Tab goes back. A skip link should appear on the first Tab. (WCAG 2.1.1, 2.1.2, 2.4.1, 2.4.3, 2.4.7, 2.4.11.)
2. Zoom and reflow (2 minutes)
Zoom the browser to 200 percent, then narrow the window to 320 CSS pixels wide. Content should reflow into one column with no horizontal scrolling and nothing cut off. (1.4.4 and 1.4.10.) If something does scroll sideways, the fix is in why a page scrolls sideways on mobile.
3. Contrast (2 minutes)
Use a colour picker on your lightest text and its background, or run the token script from light and dark themes without muddy colours. Normal text needs 4.5:1. Check both themes and check muted text, placeholders and links. (1.4.3, 1.4.11.)
4. Headings (1 minute)
Read only the headings, in order. Does the outline make sense? Is there exactly one H1? Are levels skipped? Browser extensions list them, or paste this in the console:
[...document.querySelectorAll('h1,h2,h3,h4')].map(h => h.tagName + ' ' + h.textContent.trim())This checks WCAG 1.3.1 and 2.4.6.
5. The main form (2 minutes)
Fill it in with the keyboard only, submit it empty, and then submit it wrongly. Are labels visible, are errors described in text and close to the field, and is the result announced? The full list is in why people abandon your contact form. (1.3.5, 3.3.1, 3.3.2, 4.1.3.)
6. Reduced motion (1 minute)
Turn on "reduce motion" in your operating system, or emulate prefers-reduced-motion in DevTools,
and reload. Parallax, auto-scrolling and big transitions should stop or soften. (WCAG 2.3.3 covers animation
from interactions at AAA level; the media query is the way to honour it.)
What it found here
| Check | Result | Status |
|---|---|---|
| Tab stops with no visible focus change | 0 on all six pages | Measured |
| Focused items hidden under the sticky header | Only the skip link, which is meant to overlay it | Measured |
| Targets under 24 px with no space around them | Footer links were 22 px tall on four pages; now 24 px. Two inline links on one page remain at 18 px | Fixed / exempt |
| Muted-text contrast | Failed in both themes (3.4 to 4.0:1); fixed to 4.6:1 and above | Fixed |
| Newsletter message announced | Was not in a live region; now role="status" | Fixed |
The footer links (About, Methodology, Search) were 22 px tall; a minimum height brought them to 24 px, and the audit now finds none on five of the six pages. The two that remain are links inside a sentence. WCAG 2.5.8 exempts inline links, so I left them and do not count them as failures.