Skip-link and visually-hidden variants

Faithful variant pages

Each page is static markup faithful to one real or proposed pattern. Skip-target markup and reveal CSS vary independently so each variable can be tested on its own.

• Current Drupal — Current Drupal core: empty <a id="main-content" tabindex="-1"> inside <main>, :focus reveal.
• A11Y Project — The A11Y Project: <main id tabindex="-1">, :not(:focus):not(:active) hide rule (a11yproject.css).
• GOV.UK — GOV.UK Frontend: <main id tabindex="-1"> plus a focus-managing JS module (not reproduced here), user-select:none, govuk.css.
• Proposed Drupal — SFNSP target, :focus reveal — Proposed A: skip target modernized (no tabindex, SFNSP) but current :focus reveal CSS retained.
• Proposed Drupal — SFNSP target, :focus-within reveal — Proposed B: both changes together — SFNSP target and :focus-within reveal. The primary proposal.
• Proposed Drupal — id on <main> with tabindex, :focus reveal — Proposed C: id moved onto <main> but tabindex="-1" kept; current :focus reveal CSS.
• Proposed Drupal — id on <main> with tabindex, :focus-within reveal — Proposed D: id on <main>, tabindex kept, plus :focus-within reveal.
• Proposed Drupal — empty anchor retained, :focus-within reveal — Proposed E: current empty-anchor target held constant, only the reveal CSS changed to :focus-within.

Matrix