1. Keyboard-only: skip link
Start here. Reload the page and press Tab once. “Skip to main content” should be the first focusable element and should become visible.
Repeat at 100%, 200%, and 400% browser zoom.
2. Visible text followed by hidden text
Place block in the Header region
Compare whether the spoken phrase preserves the boundary between “block” and “in”.
3. Hidden text followed by visible text
Compare whether the spoken phrase preserves the boundary between “Search” and “all”.
4. Heading navigation
Account settings
Navigate directly by heading. Compare word boundaries, pauses, and whether generated whitespace is announced explicitly.
5. Different HTML contexts
Paragraph additional context
More information
Details content.
| Plan | Standard subscription |
|---|
6. Direct focus versus focus-within
The wrapper below is visually hidden and carries Drupal's focusable class, but the wrapper itself is not focusable. Its child link is.
Hidden wrapper context.
Focusable descendant inside hidden wrapperCompare whether the entire wrapper becomes visible when the child link receives focus.
Expected distinction: an implementation using only :focus on the wrapper cannot react when the child is focused. An implementation using :focus-within can.
7. Long hidden text
Compare Drupal's current wrapping behavior with the explicit white-space: nowrap implementations.
8. Text selection
Copy this sentence including this hidden phrase and compare clipboard behavior. GOV.UK applies user-select: none; the other implementations in this test do not.
9. High zoom and magnification
At 400% browser zoom, reload and start again from the skip link. Confirm revealed focusable content is not constrained by one-pixel dimensions, clipping, or hidden overflow.
10. Negative margin and announcement order
GOV.UK's stylesheet keeps margin: 0 on visually hidden content with the note that a negative margin can cause text to be announced in the wrong order in VoiceOver on macOS. The link below has a visually hidden middle span; the expected spoken order is “Start here”, then the hidden “then read this hidden middle part”, then “and finish here”.
Start here then read this hidden middle part and finish here
This page uses margin: 0 (no bug expected here). The automated probe npm run test:margin-order compares this against a deliberately negative margin to check whether announcement order actually changes on this platform. Wrong order (the hidden phrase announced first or last) would reproduce the bug the margin: 0 reset guards against.