Jag byggde en webbsida med länkar, rubriker, en bild och en modal. Koden var giltig html utan anmärkningar. Med flit byggde jag dock in följande fel.
- Länkarna är trasiga (saknar url). Länkarna är väldigt små och har en minimal klickyta om 15x9 px. De heter samma sak allihop. Det finns ingen understrykning och de har samma färg som övrig text.
- Hoppa till innehållet-länk saknas, och fokusmarkeringen är avstängd, vilket gör tangentbordsnavigering i det närmaste omöjlig.
- H-rubrikerna har fel struktur. Det finns dessutom flera H1-rubriker (rekommendationen är en). Text är oläslig på grund av ett absurt snålt radavstånd. Och text ligger ovanpå annan text.
- Det finns en bild som föreställer en svart katt. Ovanpå bilden ligger en svart text.
- Det finns en knapp som inte syns för att den är utanför webbläsarens fönster (viewport). Men det är teoretiskt möjligt att nå knappen med tangentbord.
- Och till sist en modal. Modalen kan inte stängas och den täcker över allting. Man kommer inte åt att klicka på något alls, och sidan är därför omöjlig att använda för alla som använder mus.
Är sidan tillgänglig?
Nu vill jag veta om sidan är tillgänglig. Jag använde några kända testverktyg:
- Axe (Deque)
- Wave (Webaim)
- Accessibility Insights for Web (Microsoft)
- Lighthouse (Google)
- Siteimprove
Resultat från testverktyg
| Testverktyg | Resultat |
|---|---|
| Axe | 1 fel: färgkontrast texten ovanpå bilden. |
| Wave | 0 fel. Varning för formulering av länktext och för liten storlek på H6-rubrik (den storleken har jag inte rört). |
| Accessibility Insights for Web | 0 fel. Varning för färgkontrast texten ovanpå bilden. |
| Lighthouse | Högsta betyg: 100. |
| Siteimprove | Högsta betyg: 100. |
Resultatet i tabellen visar att en webbplats kan få höga eller perfekta poäng i maskinella tillgänglighetstester, samtidigt som den är fullproppad med allvarliga fel och helt omöjlig att använda.
Maskinella tester kan vara missvisande åt andra hållet också. Ett testresultat från ett verktyg listade närmare 200 anmärkningar, och det skapade naturligtvis oro hos ägaren av webbplatsen. Vid genomläsning av rapporten visade det sig att det var samma fel hela tiden, fast på olika sidor på webbplatsen. Och dessa sidor skapades upp dynamiskt från en och samma sidmall, så åtgärden var mycket enkel.
Ska jag använda a11y-testverktyg?
Absolut. Verktygen är bra på att fånga vissa typer av brister. Var medveten om verktygens olika begränsningar! En människa skulle med lätthet fånga felen på sidan jag byggde. Komplettera med manuella tester. Kontakta oss om du behöver hjälp eller råd.
W3.org:s lista med verktyg
W3.org har sammanställt en lista med olika testverktyg för att testa tillgänglighet.
