Wat zijn ARIA attributen?
Accessible Rich Internet Applications (ARIA) definieert manieren om je website toegankelijker te maken voor mensen met een beperking. Deze definities zijn vastgelegd door het World Wide Web Consortium (W3C).
ARIA attributen zijn HTML attributen die aan elementen kunnen worden toegevoegd om deze betekenis of beter toegankelijk te maken.
Semantische HTML boven ARIA
Het belangrijkste om te beseffen is dat semantische HTML altijd beter is dan het gebruik van ARIA attributen. Is er geen bestaand HTML element voor je toepassing? Dan kan je deze met ARIA attributen toegankelijk of zo toegankelijk mogelijk maken.
Het beste voor een toegankelijke website is sematische HTML.
Hoe wordt ARIA ondersteund?
ARIA wordt in de meeste assistive devices goed ondersteund, maar niet volledig. Dit is nog een reden om altijd te kijken naar een oplossing in semantische HTML en ARIA als laatste alternatief te gebruiken. De huidige ondersteuning van ARIA kan worden ingezien op PowerMapper.
Drie type ARIA attributen
Er zijn drie basis type voor de ARIA attributen die hieronder verder toegelicht zullen worden.
Rollen
Rollen (roles) geven aan wat voor element het betreffende element is of doet.
Landmarks
Veel rollen zijn zogenoemde landmarks en geven semantische waarde aan een element. Voorbeelden zijn role="navigation", role="banner" of role="main".
Semantische HTML heeft altijd de voorkeur boven ARIA
Zoals eerder genoemd gaat sematische HTML altijd boven ARIA. Dus ga in dit voorbeeld altijd voor de HTML elementen <nav> boven role="navigation", <header> boven role="banner" en <main> boven role="main".
Andere rollen
Andere rollen geven weer een structurele betekenis aan user interface (UI) elementen. Zoals bijvoorbeeld role="search", role="tablist" en role="tabpanel".
Eigenschappen
Eigenschappen (properties) geven een element extra betekenis. Een bekend voorbeeld hiervan is aria-label="" of aria-labelledby="".
Statussen
Statussen (states) kunnen een status van een element weergeven. Een goed voorbeeld is aria-expanded="true" om aan te geven dat een uitklap menu daadwerkelijk uitgeklapt is. Een ander voorbeeld is aria-hidden="true" wanneer een element niet zichtbaar is.
JavaScript
Alle statussen zijn over het algemeen dynamisch en zijn dus afhankelijk van JavaScript om er goed gebruik van te kunnen maken.
Meer weten over ARIA attributen?
In de komende periode zal ik een aantal veelgebruikte ARIA attributen uitlichten met daarbij horende voorbeelden en best-practices.