ARIA (Accessible Rich Internet Applications) is een set van attributen die accessibility semantics — roles, states en properties — toevoegen die native HTML niet kan uitdrukken. Maar de belangrijkste ARIA-regel is: zet native HTML op de eerste plaats.
Save
Save
Natieve elementen hebben de juiste roles, toetsenbordgedrag en focus gratis. Grijp alleen naar ARIA als geen native element het werk doet.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Dit is werkelijk nuttige ARIA: schermlezer gebruikers informeren over inhoud die verandert zonder pagina hernieuwing (zoekresultaten, meldingen, validatiefouten).
Onjuiste ARIA is erger dan geen ARIA — het geeft schermlezer gebruikers valse informatie. En ARIA verandert alleen semantics, nooit gedrag: role="button" op een <div> maakt het niet focusable of clickable; je moet zelf tabindex en key handlers toevoegen.
Gebruik semantische HTML voor het 95% geval; gebruik ARIA om de gaten op te vullen voor custom widgets (tabs, comboboxes, menus) en om dynamische updates aan te kondigen via live regions.
Volg de regels — geef de voorkeur aan native, verander native semantics niet onnodig, houd states gesynchroniseerd en pas nooit een role toe die je niet volledig implementeert.