Omgå blokke

Hvad kriteriet kræver

Hvis den samme indholdsblok forekommer på flere sider — masthoved, primær navigation, megamenu, brødkrumme-bjælke, hjælpelinks — springer seende musebrugere forbi den øjeblikkeligt. Tastaturbrugere skal tabbe igennem den hver eneste gang. Skærmlæserbrugere skal lytte til den. Kriteriet kræver mindst én mekanisme, der lader folk hoppe direkte til hovedindholdet.

WCAG accepterer flere mekanismer: et „spring til hovedindhold“-link, korrekte landmarkregioner (<header>, <nav>, <main>, <footer>), eller et reelt overskriftshierarki, som skærmlæserbrugere kan navigere med H-tasten. I praksis er et spring-link kombineret med landmarks den sikre baseline.

Sådan opfylder du det

• Tilføj et „Spring til hovedindhold“-link som det første fokuserbare element på siden. Gør det synligt ved fokus — ikke permanent skjult.
• Peg spring-linkets href på id’et for dit <main>-element, og tilføj tabindex="-1" til <main>, så fokusringen lander der i Safari.
• Brug rigtige landmarkelementer: ét <header>, én <nav> (eller flere med aria-label), ét <main>, én <footer> pr. side.
• Brug et rent overskriftsoutline, så JAWS- og NVDA-brugere kan trykke H, 1, 2, 3 for at hoppe.
• Har du flere gentagne blokke (hjælpenavigation + primær navigation + brødkrummer), overvej et andet spring-link til den mest besværlige.

Typiske fejl

• Spring-link skjult med display: none i stedet for at blive flyttet uden for skærmen og vist ved fokus — hjælpeteknologi kan ikke finde det.
• Spring-linkmålet mangler tabindex="-1", så Safari/WebKit ignorerer springet og holder fokus på spring-linket.
• <main> indpakket inden i <nav> eller duplikeret flere gange på siden.
• Overskriftshierarki, der springer niveauer over (h1 → h4), eller overskrifter brugt udelukkende til visuel størrelse, der ødelægger H-tasts-navigationsstrategien.
• Sticky headers, der overlapper det fokuserede element efter spring-linket aktiveres — se 2.4.11.

Hvorfor det er vigtigt

Omgå blokke er den billigste tilgængeligheds-gevinst på listen — et spring-link er ca. 10 linjer HTML og CSS — men fejlraten på produktionssider er stadig ca. 60 % ifølge WebAIMs årlige Million-scanning. For en tastatur-enhedsbruger, der navigerer et websted med en 40-element megamenu, er det udmattende at tabbe igennem det på hver sidevending, og på lange browsersessioner kan det føles invaliderende.