Aria
ARIA-rollen en -attributen: wanneer je ze nodig hebt en wanneer niet
ARIA is de enige technologie in webtoegankelijkheid waarmee je een pagina makkelijk slechter maakt dan hij zonder was. Een verkeerde rol vertelt hulpsoftware iets dat niet klopt, en de gebruiker vertrouwt daarop.
Wat is een toegankelijke naam?
Zet een schermlezer aan en beweeg naar een knop. Je hoort twee of drie dingen: “Voeg toe aan winkelmand, knop”. Het woord “knop” is de rol. “Voeg toe aan winkelmand” is de toegankelijke naam.
aria-label op een div: wordt genegeerd
Een developer wil een sectie een naam geven voor schermlezers. Plakt aria-label="Zoekresultaten" op een <div>.
aria-hidden: wat het doet en wanneer je het wel of niet gebruikt
Je controleert een pagina met WCAG Radar en zet de optie “Verborgen elementen” aan. Er lichten een paar plekken op. Bij elk daarvan staat: aria-hidden.
aria-expandd (met twee d's)
Een menuknop. aria-expanded om aan te geven of het menu open is. Maar de developer typte aria-expandd. Met twee d’s.
Nul fouten in de scan, ruim honderd bevindingen in de audit
We onderzochten onlangs een grote Nederlandse webshop. Voordat we handmatig aan de slag gingen, lieten we er eerst Axe op los, een veelgebruikte geautomatiseerde testtool voor toegankelijkheid die veel developmentteams in hun pijplijn hebben zitten. De uitkomst: geen fouten. Een rapport zonder bevindingen, een groen vinkje.
Div als knop: naam maar geen rol
“Versturen.” Een schermlezer leest de tekst. Maar zegt niet dat het een knop is. Want het is geen knop. Het is een div.
Knop die navigeert, link die een actie uitvoert
“Contact, knop.” Je drukt op Enter. Een nieuwe pagina opent. Maar het was een knop. Knoppen voeren acties uit. Ze navigeren niet.
