Koppen en labels
Koppen en formulierlabels moeten het onderwerp of doel beschrijven van de inhoud die ze inleiden. Ze hoeven niet uniek te zijn, maar moeten informatief zijn — een kop als 'Informatie' of een label als 'Veld' voldoet niet aan dit succescriterium.
Wat het vereist
Wanneer een sectie een kop heeft of een formulierbesturingselement een label, moet de tekst werkelijk beschrijven wat volgt. Schermlezergebruikers gebruiken koppen en labels als inhoudsopgave van de pagina — JAWS-gebruikers drukken op H om kop voor kop te springen, en in formuliermodus worden labels hardop voorgelezen wanneer een veld focus krijgt. Vage tekst breekt dit volledige navigatiemodel.
Het succescriterium vereist niet dat koppen overal aanwezig zijn, alleen dat de koppen die er zijn, beschrijvend zijn. (Wanneer koppen vereist zijn, zie 2.4.10 op AAA-niveau.)
Hoe hieraan te voldoen
- Schrijf koppen die de sectie benoemen, niet de ontwerpintentie:
"Verzendadres"niet"Sectie 2","Veelgestelde vragen"niet"Meer info". - Koppel elk formulierbesturingselement aan een zichtbaar
<label>waarvan de tekst de invoer beschrijft. Vermijd placeholder-as-label, wat verdwijnt bij het typen. - Gebruik voor visueel verborgen labels (zoekvak, icoopknoppen)
aria-labelof een.visually-hidden-klasse, maar zorg dat het label specifiek is. - Wanneer twee koppen op een pagina oprecht hetzelfde onderwerp behandelen (bijv. twee secties „Reacties“ op een forumindex), voeg onderscheidende context toe:
"Reacties op 14 juli","Reacties op 15 juli". - Controleer elke kop of elk label van drie woorden of minder — daar clustert vaagheid.
Veelvoorkomende fouten
- „Informatie“, „Details“, „Meer“, „Sectie“, „Formulier“ als koppen gebruikt zonder verdere context.
- Formulierlabels zoals „Veld 1“, „Invoer“, „Typ hier“, of helemaal geen label (alleen placeholder).
- Kaartrasterkopppen die allemaal „Meer informatie“ vermelden omdat ze door een sjabloonwijziging van call-to-actions zijn omgezet.
- Zoekresultatenpagina waarbij elke resultaatkop letterlijk het woord „Resultaat“ is.
- Tabellen waarbij kolomkoppen „Kol 1“, „Kol 2“ zijn in plaats van „Datum“, „Bedrag“, „Status“.
Waarom het ertoe doet
In de schermlezergebruikersonderzoeken van WebAIM is navigeren via koppen consequent de meest voorkomende strategie om op een nieuwe pagina te oriënteren — vaker dan van boven naar beneden lezen. Vage koppen vernietigen die kaart. Vage labels vernietigen formulieren: een gebruiker landt op een besturingselement dat slechts „invoer“ zegt en moet terugscrollen om omringende tekst te lezen, die formuliermodus vaak verbergt.