Tangentbordstillgänglighet

Tangentbordstillgänglighet innebär att varje åtgärd en användare kan utföra på en sida också kan utföras med enbart tangentbordet. Det är det mest grundläggande tillgänglighetskravet: utan det fungerar ingen annan hjälpmedelsteknik.

Tangentbordsgränssnittet är det universella gränssnittet

Skärmläsare, switch-enheter, röstkontroll, ögonstyrning — all hjälpmedelsteknik på webben passerar i slutändan genom tangentbordslagret. En användare utan motorisk funktionsnedsättning kanske aldrig trycker Tab, men samma webbplats måste vara fullt hanterbar på det sättet för att användare med funktionsnedsättning ska kunna använda den.

Det är därför 2.1.1 Tangentbord är ett framgångskriterium på nivå A: att inte uppfylla det gör inte webbplatsen svårare att använda — det gör den oanvändbar för hela användargrupper.

Vad “tangentbordshanterbart” faktiskt kräver

• Tab och Shift+Tab förflyttar fokus framåt och bakåt mellan interaktiva element.
• Enter aktiverar länkar och de flesta knappar.
• Space aktiverar knappar och växlar kryssrutor/radioknappar.
• Piltangenter navigerar inom sammansatta widgetar (flikpaneler, menyer, radiogrupper, listboxar, reglage).
• Escape stänger modala dialoger, popovers och rullgardinsmenyer.
• Page Up/Down, Home/End navigerar långt innehåll där plattformskonventionen gäller.

En widget som inte implementerar det tangentbordskontrakt som skärmläsaranvändare förväntar sig av sin roll — till exempel en ARIA-combobox som svarar på klick men inte på piltangenter — är tekniskt fokusbar men funktionellt trasig.

Den snabbaste manuella granskningen

Tabba igenom en sida från allra överst (adressfältsfokus, sedan Tab) hela vägen till sidfoten. Fokusordningen bör matcha den visuella ordningen. Varje klickbart element bör ta emot fokus exakt en gång. Att trycka Enter eller Space på ett fokuserat element bör ge samma resultat som att klicka på det. Att trycka Escape inuti en modal bör stänga den. Om något är onåbart, något nås i fel ordning, eller något fångar fokus — har du hittat buggar.

Fem minuter av disciplinerad Tab-navigering hittar fler tillgänglighetsproblem än femton minuter av axe-core-skanning.

Vanliga felmönster

• <div onclick> för klickbara kort. Inte fokusbart, inte aktiverbart med tangentbordet, helt osynligt för skärmläsare som ett interaktivt element. Använd <button> (för åtgärder) eller <a href> (för navigering).
• Egna rullgardinsmenyer som inte öppnas med Enter/Space. Byggda med enbart klick-hanterare; tangentbordsanvändare kan fokusera utlösaren men inte öppna listan.
• Modala dialoger som inte fångar fokus. Tab förflyttar fokus ur modalen och in på den (visuellt dolda) sidan bakom. Användare kan inte se var de befinner sig.
• Modala dialoger som överfångar fokus. Escape stänger inte. Användaren fastnar.
• Skip-link-mål som inte är fokusbara. Skip-länken hoppar till #main men <main id="main"> saknar tabindex="-1", så fokus förflyttas inte egentligen och nästa Tab startar om från sidans topp.

Två bibliotek är värda att känna till: focus-trap för att hantera fokus inuti modaler, och tabbable för att hitta de fokusbara elementen inuti en behållare. Båda är lättviktiga och utan åsikter.