Tangentbord

Vad det kräver

All funktionalitet i innehållet måste kunna användas via ett tangentbordsgränssnitt, utan krav på specifika tidsintervall för enskilda tangenttryckningar. Användaren måste kunna nå varje interaktivt element med Tab, aktivera det med Enter eller Blanksteg och manövrera komplexa widgetar med piltangenterna och andra standardkombinationer.

Det finns två smala undantag: indata som beror på rörelsens bana (frihandsteckning, underskrift av dokument) och inte bara slutpunkterna, samt indata som speglar en analog handling i verkligheten där banan spelar roll.

Hur du uppfyller det

• Använd inbyggda interaktiva element (<button>, <a href>, <input>, <select>) — de är tangentbordsmanövrerbara som standard.
• För anpassade widgetar byggda av <div> eller <span> — lägg till role, tabindex="0" och tangenthanterare för Enter, Blanksteg, Escape och pilar i enlighet med mönstret.
• Följ ARIA Authoring Practices Guide för menyer, flikar, kombinationsrutor, dialoger och trädvyer — varje mönster har en definierad tangentbordsinteraktionsmodell.
• Tillhandahåll ett tangentbordsekvivalent för varje musbaserat geste: dra-och-släpp behöver en alternativ ordningsfunktion via knappar, hover-menyer behöver klick-för-att-öppna, svepkaruseller behöver föregående/nästa-knappar.
• Testa genom att koppla bort musen och gå igenom hela flödet.

Vanliga fel

• <div onclick> utan role="button", tabindex="0" eller tangenthanterare — osynligt för tangentbordsanvändare.
• Anpassade rullgardinsmenyer där utlösaren är nåbar men alternativen inte är navigerbara med piltangenter.
• Dra-och-släpp-kanban-tavlor, filuppladdare eller canvasverktyg utan tangentbordsalternativ.
• Modala stängningsknappar som finns men saknar Escape-tangenthanterare.
• Hover-only-verktygstips och menyer som aldrig visas under tangentbordsfokus.
• Karuseller och bildgallerier som bara kan styras med svep eller klick på indikatorer utan tabindex.

axe och Lighthouse flaggar saknat tabindex och saknade tillgängliga namn, men kan inte avgöra om din anpassade rullgardinsmeny faktiskt svarar på piltangenter — den delen är manuell.

Varför det spelar roll

Detta är det enskilt viktigaste framgångskriteriet för hanterbarhet. Skärmläsaranvändare navigerar med tangentbord. Switchanvändare emulerar ett tangentbord. Röststyrningsanvändare ger kommandon som mappas till tangentbordshändelser. Avancerade användare med belastningsskador förlitar sig på det. En webbplats som misslyckas med 2.1.1 utesluter i praktiken alla som inte kan använda en mus — och den gruppen är mycket större än den uppenbara.