Datatabellen nästan alla bygger fel

Tabellen som blev en vägg

En datatabell ser harmlös ut. Rader, kolumner, kanske en sortering. Men för den som navigerar med tangentbord eller skärmläsare är en vanlig interaktiv tabell ofta en av de svåraste sakerna på hela sajten.

Problemet är tabbstoppen. Om varje länk, knapp och sorterbar rubrik i tabellen är ett eget tabbstopp, blir en tabell med hundra rader till hundratals tryck på tabb-tangenten innan du tar dig förbi den. En skärmläsaranvändare som bara vill till nästa sektion måste tabba sig igenom hela tabellen, cell för cell, kontroll för kontroll. De flesta ger upp.

Varför det är ett lagkrav, inte bara en detalj

Att allt ska gå att nå och styra med tangentbord är inte en åsikt, det är WCAG-kriterium 2.1.1. Det är ett av kraven i EN 301 549, standarden som både DOS-lagen och tillgänglighetsdirektivet (EAA) hänvisar till. En tabell som låser ute tangentbordsanvändare är alltså inte bara dålig för användaren, den är en brist som tillsynen kan peka på.

Och datatabeller är överallt: i kundportaler, i adminvyer, i bokningssystem, i prislistor. Det är ofta just där affären händer, och just där tillgängligheten brister.

Lösningen: en riktig tangentbordsgrid

Därför byggde vi om vår DataTable i komponentbiblioteket "components" till en fullständig tangentbordsgrid enligt W3C:s Authoring Practices Guide, mönstret som faktiskt är tänkt för interaktiva rutnät.

I praktiken betyder det att hela tabellen är ett enda tabbstopp. Du tabbar in i tabellen en gång, och sedan navigerar du inuti den med piltangenterna, cell för cell. Du hoppar till början och slutet av en rad, och till tabellens hörn, utan att lämna tangentbordet. Tabbar du vidare hamnar du direkt efter tabellen, inte hundra kontroller längre fram. Sorteringen följer dessutom svensk bokstavsordning, så att å, ä och ö hamnar rätt och inte sist på ett engelskt sätt.

Tabellen presenterar sig också korrekt för skärmläsaren som ett rutnät, med kolumnrubriker kopplade till rätt celler. Användaren behåller orienteringen och vet vilken kolumn ett värde tillhör, i stället för att tappa bort sig i en lång lista av celler. Det är skillnaden mellan att veta var man är och att famla i mörker.

Det här är tillgänglighet inbyggd från start. Du som använder komponenten behöver inte vara expert på fokushantering eller ARIA-rutnät, det är redan gjort och testat åt dig. Hela komponentbiblioteket ligger på 649 gröna tester.

Vinsten för dig

Du får en datatabell som klarar WCAG-kravet 2.1.1 utan att du behöver lösa det själv, varje gång, i varje projekt. Tangentbordsanvändare och skärmläsaranvändare tar sig fram, utvecklingsteamet slipper bygga om fokushanteringen från grunden, och du har en kontroll mindre att oroa dig för när tillsynen frågar.

En komponent löser förstås inte hela sajten. Tillgänglighet är summan av många delar, och resten av gränssnittet måste hålla samma mått för att helheten ska bli rätt. Men datatabellen är en av de allra svåraste delarna att få till, just den sortens kontroll där team brukar fastna eller ge upp. Den har du nu avklarad, byggd och testad, så att din tid går till resten i stället.

Vill du veta om era egna tabeller och gränssnitt klarar tangentbordskravet? Börja med en tillgänglighetsanalys, så ser du var ni står idag.

Karin Holm Grundare, Holm Digital AB