Schermlezers en de eerste ARIA-regel

De eerste ARIA-regel is ARIA vermijden: als een oorspronkelijk HTML-element zoals button de taak al doet, gebruik dat dan in plaats van een rol aan een div toe te voegen.

Waar een schermlezer van uitgaat

Een schermlezer leest geen pixels. De browser bouwt uit de HTML een toegankelijkheidsboom, een vereenvoudigde kopie van de pagina waarin elk relevant element een rol heeft (knop, link, kop, selectievakje), een naam (identificerende tekst) en soms een toestand (aangevinkt, uitgeklapt, uitgeschakeld). De schermlezer leest die boom voor of stuurt hem naar een brailleleesregel. WCAG 2.2-succescriterium 4.1.2 Naam, rol, waarde, niveau A, vraagt dat elk bedieningselement deze drie dingen beschikbaar stelt.

Gebruikers luisteren zelden van boven naar beneden naar een pagina. Schermlezers in grote besturingssystemen en gratis te installeren schermlezers laten mensen koppen-, link- of landmarklijsten openen, naar het volgende formulierveld springen of één regel tegelijk lezen. Daarom zijn de eerdere hoofdstukken zo belangrijk: echte koppen, gelabelde velden, echte knoppen en alt-tekst komen direct in die boom terecht. Ook het attribuut lang op het html-element telt. Criterium 3.1.1 Taal van de pagina vraagt dit en schermlezers kiezen daarmee de juiste stem en uitspraak.

Wat ARIA toevoegt

WAI-ARIA (Accessible Rich Internet Applications) is een reeks attributen die de inhoud van de toegankelijkheidsboom veranderen: role stelt de rol in, attributen zoals aria-label de naam en attributen zoals aria-checked of aria-expanded de toestand. ARIA verandert alleen wat wordt aangekondigd. Het maakt een element niet focusbaar, voegt geen toetsenbordgedrag toe en verandert het uiterlijk niet. De W3C ARIA Authoring Practices Guide zegt het in een kop: ‘Geen ARIA is beter dan slechte ARIA’. Verkeerde ARIA vertelt een schermlezergebruiker iets onwaars over de pagina.

Regels voor ARIA-gebruik

Het W3C-document Using ARIA geeft korte regels die overal worden geciteerd (het werd in februari 2026 als gestopt concept gemarkeerd, maar de regels zelf veranderden niet). Regel 1: als je een oorspronkelijk HTML-element of attribuut kunt gebruiken met de benodigde betekenis en het gedrag al ingebouwd, doe dat dan in plaats van een ander element met ARIA een nieuwe functie te geven. Regel 2: verander de oorspronkelijke semantiek niet tenzij het echt moet. Regel 3: elk interactief ARIA-element moet met het toetsenbord bruikbaar zijn. Regel 4: zet geen role="presentation" of aria-hidden="true" op een element dat focus kan krijgen, anders komen sommige gebruikers op ‘niets’ terecht.

ARIA helpt waar HTML tekortschiet. Een knop met alleen een pictogram bevat geen tekst en heeft dus geen naam; aria-label="Close" geeft die. Een SVG-pictogram naast zichtbare tekst is decoratie en aria-hidden="true" op de svg houdt het buiten de boom. Dit zijn de twee attributen die de meeste beginners nodig hebben. Volg voor complete widgets zoals tabbladen of menu's het bijbehorende patroon in de Authoring Practices Guide in plaats van zelf iets te bedenken.