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. Activate it, then press Tab again and confirm focus resumes inside the main content.
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.