Aria
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-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 de WCAG Radar van Proper Access 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.