2.1.1
Använda tangentbord
Många användare använder sig enbart av tangentbordet för att navigera på en webbplats. Det är därför viktigt att webbplatsen fungerar utan att använda mus. Alla funktioner, knappar och länkar ska kunna nås och användas enbart med tangentbord.
<div> och <button>
En vanlig anledning till att en webbplats inte når upp till denna riktlinje är för att utvecklare använder HTML-elementet <div>
. En div är en behållare i HTML och har ingen egen funktionalitet. När man får en div att se ut och fungera som en knapp för mus-användare är det inte garanterat att det även fungerar med tangentbord.
Knappar ska istället ha HTML-elementet <button>
. Button-elementet har redan funktionalitet inbyggt i sig som säkerställer att det går att använda med tangentbord.
Exempel
Dessa två knappar ser identiska ut, men en är skapad med <div>
och den andra med <button>
. Testa att använda mus att klicka på knapparna med och se hur de fungerar. Testa sedan att använda tangentbordet för att navigera till knapparna och aktivera dem.
- Tab-tangenten flyttar fokus till nästa element.
- Shift + tab flyttar fokus till föregående element.
- Enter aktiverar knappen som fokus är i.
Den första knappen går inte att nå med tangentbord. Den är skapad med <div> och har inte nödvändig kod tillagd för att fungera.
Den andra knappen går att använda med tangentbord utan problem. Tangentbordet kan nå den och även aktivera den.
En användare med mus märker inte någon skillnad på dessa två knappar, men för en person som enbart använder tangentbord blir det omöjligt att använda båda knapparna.
Undantag
Om vägen en mus tar är avgörande för funktionen så är det undantaget från riktlinjen. Ett exempel på detta är ett ritprogram där en linje dras längs musens väg över skärmen. Om det däremot bara krävs start- och slutposition såsom att rita en rät linje eller vanliga geometriska former, är det inte undantaget.
Testa riktlinjen
Testa att navigera webbplatsen endast med tangentbordets tab- och piltangenter. Kontrollera att allt som går att göra med mus också går att göra med bara tangentbord.
Läs mer om riktlinje 2.1.1 på W3Cs webbplats.