This sandbox compares four approaches to visually hidden content:
- current Drupal core;
- The A11Y Project;
- GOV.UK Frontend;
- a proposed Drupal adaptation.
What is being investigated
The original Drupal issue concerns text boundaries between visible and visually hidden content, but changing this utility affects more than screen-reader pronunciation. The same CSS is also used for skip links and other controls that must become visible when they receive keyboard focus.
The comparison therefore separates four questions:
- Does hidden text remain available to screen readers without affecting visual layout?
- Are word boundaries preserved between visible and hidden text?
- Does focusable hidden content reliably become visible to keyboard users?
- Does revealed content behave normally at high zoom and with screen magnification?
Why :focus-within matters
:focus matches an element only when that element itself has focus. :focus-within matches an element when either the element itself or any of its descendants has focus.
This difference is important in Drupal because the current utility allows a hidden wrapper to become visible when a link, button, input, or other descendant inside that wrapper receives focus. A direct replacement using only :focus could lose that behavior.
Read the detailed :focus-within explanation.
Test design
The test page uses one HTML document. A control switches among four CSS files. This keeps the DOM, text, semantics, focus order, and test content constant so that the CSS implementation is the variable being compared.
Open the accessibility test page.