Tastaturnavigation

Tastaturnavigation betyder, at enhver handling en bruger kan udføre på en side, kan udføres med tastaturet alene. Det er det mest ufravigelige tilgængelighedskrav: uden det fungerer ingen hjælpeteknologi.

Tastaturgrænsefladen er den universelle grænseflade

Skærmlæsere, kontaktknapper, stemmestyring, øjenstyring — enhver hjælpeteknologi på nettet anvender i sidste ende tastaturlaget. En bruger uden motorisk handicap trykker måske aldrig på Tab, men det samme site skal være fuldt betjenbart på den måde, for at personer med handicap kan bruge det.

Derfor er 2.1.1 Keyboard et Level A-succeskriterium: at fejle det gør ikke sitet sværere — det gør det ubrugeligt for hele brugergrupper.

Hvad “tastaturbetjenbart” faktisk kræver

• Tab og Shift+Tab flytter fokus fremad og bagud mellem interaktive elementer.
• Enter aktiverer links og de fleste knapper.
• Space aktiverer knapper og skifter checkbokse/radioknapper.
• Piletaster navigerer inden i sammensatte widgets (faneblade, menuer, radiogrupper, listboxes, sliders).
• Escape lukker modale dialoger, popovers og dropdowns.
• Page Up/Down, Home/End navigerer langt indhold, hvor platformkonventionen gælder.

En widget, der ikke implementerer den tastaturkontrakt, skærmlæserbrugere forventer ud fra dens rolle — f.eks. en ARIA-combobox, der reagerer på klik men ikke på piletaster — er teknisk set fokuserbar, men funktionelt ødelagt.

Den hurtigste manuelle audit

Tab igennem siden fra allertop (adressebjælkefokus, derefter Tab) til bunden. Tab-rækkefølgen bør følge den visuelle orden. Alt, der kan klikkes på, bør modtage fokus præcis én gang. At trykke Enter eller Space på et fokuseret element bør give samme resultat som at klikke på det. Escape inde i en modal bør lukke den. Hvis noget er utilgængeligt, nås i forkert rækkefølge, eller fastholder fokus, har du fundet fejl.

Fem minutters systematisk Tab-navigation finder flere tilgængelighedsproblemer end femten minutters scanning med axe-core.

Typiske fejlmønstre

• <div onclick> til klikbare kort. Ikke fokuserbart, ikke tastaturaktivérbart, fuldstændig usynligt for skærmlæsere som et interaktivt element. Brug <button> (til handlinger) eller <a href> (til navigation).
• Brugerdefinerede dropdowns, der ikke åbner med Enter/Space. Bygget med klik-handlere alene; tastaturbrugere kan fokusere udløseren, men ikke åbne listen.
• Modale dialoger, der ikke fanger fokus. Tab flytter fokus ud af modalen og ind på den (visuelt skjulte) side bagved. Brugeren kan ikke se, hvor de er.
• Modale dialoger, der over-fanger fokus. Escape lukker ikke. Brugeren sidder fast.
• Skip-link-mål er ikke fokuserbart. Skip-linket hopper til #main, men <main id="main"> mangler tabindex="-1", så fokus flytter sig faktisk ikke, og næste Tab starter fra toppen af siden igen.

To biblioteker er værd at kende: focus-trap til at styre fokus inde i modale dialoger og tabbable til at finde de fokuserbare elementer i en container. Begge er små og uden forudgående antagelser.