Naam-Rol-Waarde
De drie regels van ARIA
Er zijn drie ongeschreven regels over ARIA. Ze komen van de mensen die het hebben bedacht:
Video zonder toegankelijke naam
Een instructievideo op je pagina. Met het controls-attribuut: play, pauze, volume, fullscreen. Allemaal aanwezig.
Accordion zonder aria-expanded
Een accordion. Je klikt op “Meer informatie.” De content verschijnt. Je klikt opnieuw. De content verdwijnt.
Toggle-knop zonder status
Een knop: “Donkere modus.” Je klikt. De achtergrond wordt donker. Visueel is het duidelijk: donkere modus is aan.
Heading in een summary: zelfde probleem
Net als bij een button: een <summary> heeft de impliciete rol van een button. En een button eet de rollen van zijn kinderen op.
Heading in een button: onzichtbaar voor schermlezers
Een kaart op je website. De titel is een <h3>. De hele kaart is klikbaar. Dus de developer wikkelt de <h3> in een <button>.
Tabs zonder tablist
Twee elementen met role="tab". Een element met role="tabpanel". Maar geen role="tablist".
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-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.
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.
