Fyra ställen tangentbordet ofta går sönder
Fyra platser till, samma test
Vi byggde nyligen om vår datatabell till en riktig tangentbordsgrid, se Datatabellen nästan alla bygger fel. Testet var enkelt: går allt att nå och styra utan mus? En datatabell är bara ett av många ställen där svaret ofta blir nej. Dropdown, datepicker, modal och meny med undermenyer är fyra andra byggblock som ser ut att fungera med tangentbord, tills du provar.
Kravet är detsamma oavsett komponent: WCAG-kriterium 2.1.1. Det är ett av kraven i EN 301 549, standarden som både DOS-lagen (offentlig sektor) och tillgänglighetsdirektivet (EAA) (privat sektor) hänvisar till, var för sig. Här går vi rakt på de fyra ställena.
Dropdownen som ignorerar piltangenterna
En dropdown byggd som en egen komponent, inte en vanlig <select>, tappar ofta tangentbordsstödet. Piltangenterna gör ingenting, Escape stänger inte listan, och Tab hoppar vidare utan förvarning.
Så här fungerar tangentbordet i Select-komponenten i vårt components-bibliotek:
- ArrowDown och ArrowUp flyttar det markerade alternativet
- Home och End hoppar till första och sista
- Escape och Tab stänger den
Triggerknappen bär aria-haspopup="listbox" och aria-expanded, listan har role="listbox", och varje alternativ role="option" kopplat till triggerns aria-activedescendant. En skärmläsare vet alltså både att listan är öppen och vilket alternativ som är markerat, utan att fokus någonsin lämnar knappen.
Datepickern som fångar dig i fel månad
En kalender byggd i rutor är lätt att navigera med mus och nästan omöjlig med tangentbord om ingen har tänkt på pilarna. Sitter du fast utan en tydlig väg tillbaka, har komponenten byggts fel.
Vår DatePicker styrs så här:
- ArrowLeft och ArrowRight flyttar fokuserat datum en dag i taget
- ArrowUp och ArrowDown flyttar en vecka i taget
- Home och End hoppar till radens start och slut, medveten om vilken dag veckan börjar på i Sverige
- PageUp och PageDown byter månad, och med Shift nedtryckt byter samma tangenter år i stället
- Escape stänger kalendern utan att spara valet, och lämnar tillbaka fokus till knappen som öppnade den
Modalen som inte släpper ut dig
Det allvarligaste felet av de fyra. Fastnar fokus inuti en modal utan väg ut är det inte bara dålig UX. Det är en direkt tangentbordsfälla, WCAG-kriterium 2.1.2, ett av de tyngsta kraven som finns.
Vår Dialog bygger på webbläsarens eget <dialog>-element:
- Tab och Shift+Tab hålls kvar inuti dialogen så länge den är öppen
- Escape stänger den som standard, och fokus återförs till knappen som öppnade den när den stängs
role sätts till dialog eller alertdialog beroende på variant, med aria-modal="true". Modal är en tunn variant av samma komponent, ingen egen lösning att hålla koll på.
Menyn som glömmer var du kom ifrån
En meny med undermenyer har två rimliga former. Är den enkel, en knapp som fäller ut ett par länkar, räcker aria-expanded på knappen. Är den bredare, en menyrad med flera undermenyer, gäller ett striktare mönster: piltangenter i båda led, Home och End, Enter och Space för att öppna. En Escape stänger undermenyn och lägger fokus tillbaka på posten du kom ifrån, inte längst upp i menyn.
Vår NavigationMenu har båda lägena inbyggda. I det enkla läget är det bara en knapp med aria-expanded och vanliga länkar. I menyradsläget gäller hela mönstret:
- Piltangenterna flyttar horisontellt mellan huvudposter och vertikalt i undermenyer
- Home och End
- Enter och Space
- Escape stänger den öppna undermenyn och lägger fokus på föräldraposten
Är ingen undermeny öppen gör Escape ingenting, det finns inget öppet på den nivån.
Ett femte ställe vi inte har löst än
Karuseller med automatisk rotation hör hemma på samma lista. Fortsätter bilderna rulla medan du försöker tabba dig fram eller läsa texten, är det samma sorts fel som en fastlåst modal. Vi har i dag ingen egen Carousel-komponent, ett ställe vi flaggar utan att påstå att vi löst det.
Fyra komponenter, en och samma vinst
Skillnaden mellan de fyra är stor på ytan och liten under. Piltangenter, Home och End, Escape och rätt ARIA-roll löser samma sak varje gång: att ingen ska behöva mus eller synen för att komma vidare. Bygg det själv i varje projekt, eller använd Select, DatePicker, Dialog, Modal och NavigationMenu, redan byggda med de här mönstren i vårt komponentbibliotek.
Vill du veta om era egna dropdowns, datepickers, modaler och menyer klarar tangentbordstestet? Börja med en tillgänglighetsanalys.
Karin Holm Grundare, Holm Digital AB