Tips om tangentbordstillgänglighet med hjälp av HTML och CSS

Att göra din webbplats tillgänglig för användare av tangentbord är en viktig del av den större tillgänglighetsbilden. Här är några tips om tangentbordstillgänglighet som du snabbt kan implementera med hjälp av grundläggande HTML och CSS.

A11y från början

Dessa tips är en del av Web Accessibility: den fullständiga lärarhandboken, där vi har samlat in en rad tutorials, artiklar, kurser och e-böcker, för att hjälpa dig att förstå webbåtkomst från början.

Vad är Keyboard Accessibility?

Ett tangentbord kan vara det primära sättet för vissa användare att navigera på webbplatser. Idag, när de flesta webbgränssnitt är utformade med muspekare och berör interaktion i åtanke, ignoreras tangentbordsnavigering. Tillgång till tangentbord är praxis att se till att användarna kan navigera effektivt och obegränsat med bara deras tangentbord.

Vem kan behöva tillgång till tangentbord?

Det här är de viktigaste målgrupperna för tangentbordstillgänglighet:

Användare med funktionshinder som har svårt att använda en mus, använder en pekdon eller klickar på små saker.
Blinda eller synskadade användare föredrar ofta att navigera på webbplatser med specifika Braille-tangentbord.
Amputer eller de med medfödd amputation (födsel utan ben eller lemmar, specifikt händer i det här fallet) använder ofta speciell hårdvara som mimar tangentbordets funktionalitet.
Den som helt enkelt inte har tillgång till en fungerande mus eller pekplatta.

1. Testa din webbplats för tillgänglighet av tangentbord

Det viktigaste målet med tangentbordstillgänglighet är att göra varje interaktivt element, till exempel länkar och formulärkontroller, tillgängliga med Flik nyckel. Det här är hur användarna av tangentbord bara navigerar via en webbsida. Att testa din webbplats för tangenttillgänglighet är faktiskt ganska lätt: tryck bara på Flik nyckeln och navigera från toppen av sidan till botten, markera aktiva element när du går.

Navigera snabblänkar i Tuts + footer med Flik nyckel-

Observera hur enkelt eller svårt det är att komma till huvudinnehållet, klicka på ett menyalternativ, fyll i ett formulär, använd en reglage eller följ din nuvarande position på sidan. Du kan också testa omvänd riktning med hjälp av Shift + Tab tangentbordsgenväg.

2. Skapa märkbar `:fokus` Styles

CSS har a :fokus pseudoklass som utlöses när en användare klickar eller kranar på ett objekt, eller väljer det med Flik nyckel. De :fokus tillstånd gäller endast för fokuserbara element, nämligen ,