Naam, rol, waarde

Wat wordt vereist

Elk interactief element op de pagina — knoppen, links, formuliervelden, tabbladen, schuifregelaars, aangepaste widgets — moet drie stukken informatie beschikbaar stellen aan hulptechnologie:

• Naam — hoe heet dit bedieningselement? („Verzenden“, „Dialoogvenster sluiten“, „Volume“)
• Rol — welk soort bedieningselement is het? (knop, link, selectievakje, tabblad, schuifregelaar)
• Waarde / status — voor componenten die een toestand hebben: is het ingedrukt, uitgevouwen, aangevinkt, geselecteerd? Wat is de huidige waarde?

De beschikbaarstelling moet programmatisch zijn — vastgelegd in de DOM, niet geschilderd met CSS. Schermlezers, brailleweergaven, spraakbedieningssoftware en schakelaarapparatuur lezen de toegankelijkheidsstructuur, niet de pixels.

Hoe te voldoen

• Gebruik het native HTML-element wanneer er een beschikbaar is. <button> bevat standaard de juiste rol, focus, toetsenbordafhandeling en een toegankelijke naam op basis van de tekstinhoud — zonder extra inspanning.
• Voeg voor knoppen met alleen een pictogram aria-label toe (of visueel verborgen tekst). <button aria-label="Sluiten">×</button>.
• Koppel voor formulierinvoervelden een <label for> aan het id van het invoerveld. Of omsluit het invoerveld met de <label>. Plaatsaanduidingstekst is geen label.
• Wanneer een aangepaste widget moet worden gebouwd van <div> en <span>, voeg dan role="…" toe, beheer tabindex, verwerk Enter en Spatie, en weerspiegelstatus met aria-pressed, aria-expanded, aria-checked, aria-selected, aria-valuenow.
• Doorloop de weergegeven pagina via de toegankelijkheidsstructuurinspecteur van de browser (Chrome DevTools → Elements → Accessibility) en lees elk bedieningselement: elk element moet worden aangekondigd als naam + rol + status.

Veelvoorkomende fouten

• <div onclick="…"> opgemaakt als knop — geen rol, geen toetsenbord, geen naam. Schermlezers slaan het over. Spraakbediening kan niet „klik op Opslaan“ uitspreken.
• <div role="button"> zonder tabindex="0", zonder Enter/Spatie-afhandeling — ziet er toegankelijk uit, maar is het niet.
• Knoppen met alleen een pictogram (<button><svg /></button>) zonder aria-label, aria-labelledby of visueel verborgen tekst. Aangekondigd als enkel „knop“.
• Aangepaste vervolgkeuzelijsten gebouwd met <div> en JavaScript, zonder role="combobox", aria-expanded, aria-controls en de listbox/option-rollen eronder.
• Schakelknoppen (dempen, favoriet, volgen) die visueel van status veranderen maar aria-pressed nooit bijwerken. Ziende gebruikers zien de wijziging; schermlezersgebruikers horen geen verschil.
• Formulierinvoervelden met een visueel label ernaast maar zonder for/id-koppeling of omsluitende <label>.
• Aangepaste selectievakjes getekend met <svg> en een verborgen native invoerveld dat :checked nooit weerspiegelt in de zichtbare interface — de toestanden van de schermlezer en de visuele interface lopen uiteen.

Waarom het belangrijk is

Dit is het meest geciteerde succescriterium in de specificatie. Vrijwel elke klacht „deze site is onbruikbaar met een schermlezer“ is terug te voeren op een 4.1.2-fout — doorgaans een <div> die als knop fungeert, of een pictogramknop zonder naam. Dit is ook waar de kosten van het bouwen van aangepaste widgets zichtbaar worden: elk native HTML-bedieningselement voldoet al aan 4.1.2; elke handgemaakte <div>-widget moet het regel voor regel verdienen. De snelste 4.1.2-audit is door de pagina te doorlopen met Tab en een schermlezer en te luisteren — alles wat wordt aangekondigd als „leeg“ of enkel „knop“ is een bevinding.