Succescriterium 2.4.6 Koppen en labels
Koppen en labels beschrijven het onderwerp of doel.
Koppen en labels begrijpen (Engelstalig)
Duidelijke koppen en labels zijn essentieel voor een toegankelijke website. Ze helpen gebruikers begrijpen hoe informatie is georganiseerd.
- Beschrijvende koppen maken duidelijk wat het onderwerp is van de onderliggende tekst. Schermlezers kunnen een overzicht van alle koppen op een webpagina presenteren. Het is dan heel handig als de koppen en tussenkoppen de structuur van de content duidelijk weergeven.
- Duidelijke labels voor knoppen maken duidelijk wat er gebeurt als de knop wordt geactiveerd. Bijvoorbeeld of het formulier wordt verzonden of wordt uitgeprint.
- Bij labels voor formulierelementen is het belangrijk dat deze duidelijk aangeven welke invoer wordt verwacht. Bijvoorbeeld wat er ingevuld moet worden in een invoerveld
Dit succescriterium heeft niks te maken met de technische opmaak van koppen of labels (dat valt onder een ander criterium). Het gaat puur om de inhoud van de koppen en labels.
Hoe pas je dit toe?
Koppen
- Gebruik koppen die het onderwerp of doel van de onderliggende content beschrijven.
Lees meer over toegankelijke koppen
Labels
- Gebruik labels op knoppen die het resultaat van de actie beschrijven.
- Gebruik labels bij formulierelementen die het onderwerp of doel van de bijbehorende formulierelementen beschrijven.
- Gebruik labels die het onderwerp of doel van
<iframe>-elementen beschrijven.
Lees meer over toegankelijke formulieren
Voor wie is dit belangrijk?
- Mensen die een schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
- Mensen die een cognitieve, taal- of leerbeperking hebben.
Wie is verantwoordelijk?
- Redacteur
- Ontwikkelaar
Hoe toets je dit?
Testprocedure
Test 1: Koppen
- Inventariseer de pagina
- Bepaal welke teksten de functie hebben van een kop
- Grotere tekst
- Vetgedrukte tekst
- Tekst in een andere kleur
- Tekst met extra witruimte er omheen
- Bepaal voor elke kop:
- Wat de onderliggende content is
- Of de kop relatie heeft met onderliggende content
- Bepaal welke teksten de functie hebben van een kop
- Controleer voor elke kop:
- Of er content onder staat
- Of de kop duidelijk maakt waar de onderliggende content over gaat
- Zoek koppen met dezelfde tekst en controleer:
- Of ze gelijkwaardige inhoud beschrijven
Test 2: Labels van knoppen
- Inventariseer de pagina
- Bepaal welke knoppen er allemaal zijn
- Gewone knoppen (
<button>,<input type="button">) - Links die worden opgemaakt als knop met
role="button"
- Gewone knoppen (
- Bepaal voor elke knop:
- Of het een zichtbaar label heeft (tekst of icoon)
- Of dezelfde knop meerdere keren voorkomt
- Bepaal welke knoppen er allemaal zijn
- Controleer voor elke knop:
- Of het zichtbare label de actie beschrijft
- Zoek in de code naar elke knop en controleer:
- Of het een toegankelijke naam heeft
- Open de Inspector (Ontwikkelaarstools):
- Klik met rechtermuisknop op de knop
- Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
- Bepaal de toegankelijke naam in deze volgorde:
aria-labelledbyaria-label- De inhoud van de knop
- De zichtbare tekst
- Het tekstalternatief van afbeeldingen of iconen in de knop
- Verborgen tekst in de knop
value(alleen voor<input type="button">)title
- (Gebruik eventueel een schermlezer om de toegankelijke naam te controleren)
- Open de Inspector (Ontwikkelaarstools):
- Of het een toegankelijke naam heeft
- Controleer voor elke knop:
- Of de toegankelijke naam de actie beschrijft
- Of de toegankelijke naam uniek is voor de actie
- Zoek knoppen met dezelfde toegankelijke naam en controleer:
- Of ze dezelfde actie uitvoeren
- Controleer voor herhaalde knoppen de context:
- Of de toegankelijke naam zelf voldoende context biedt (bijvoorbeeld: “Verwijder Jan Jansen”)
- Of
aria-describedbyoftitleextra context biedt - Of een gekoppelde tabelkop context biedt
Test 3: Labels van formulierelementen
- Inventariseer de pagina
- Bepaal welke formulierelementen er allemaal zijn
- Invoervelden (
<input type="text">,<textarea>) - Keuzerondjes (
<input type="radio">) - Selectievakjes (
<input type="checkbox">) - Keuzelijsten (
<select>) - Schuifregelaar (
<input type="range">) - Custom form controls
- Invoervelden (
- Bepaal voor elk formulierelement:
- Of het een zichtbaar label heeft (tekst of icoon)
- Of het meerdere keren voorkomt op de pagina
- Bepaal welke formulierelementen er allemaal zijn
- Controleer voor elk formulierelement:
- Of het zichtbare label beschrijft wat er moet worden ingevuld
- Zoek in de code naar elk formulierelement en controleer:
- Of het een toegankelijke naam heeft
- Open de Inspector (Ontwikkelaarstools):
- Klik met rechtermuisknop op het element
- Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
- Bepaal de toegankelijke naam in deze volgorde:
aria-labelledbyaria-label- De gekoppelde
<label> placeholdertitle
- (Gebruik eventueel een schermlezer om de toegankelijke naam te controleren)
- Open de Inspector (Ontwikkelaarstools):
- Of het een toegankelijke naam heeft
- Controleer voor elk formulierelement:
- Of de toegankelijke naam beschrijft wat er moet worden ingevuld
- Of de toegankelijke naam uniek is voor het doel van de input
- Zoek formulierelementen met dezelfde toegankelijke naam en controleer:
- Of dezelfde informatie moet worden ingevuld
- Zoek in de code naar gegroepeerde formulierelementen en controleer:
- Of
<fieldset>met<legend>is gebruikt - Of de combinatie van
<legend>en<label>samen het doel beschrijft
- Of
Test 4: Labels van iframes
- Inventariseer de pagina
- Bepaal welke iframes er allemaal zijn
- Ingesloten content (media, kaarten, widgets)
- Externe content
- Bepaal voor elke iframe wat de functie of het doel is
- Bepaal welke iframes er allemaal zijn
- Zoek in de code naar elk
<iframe>-element en controleer:- Of het een toegankelijke naam heeft
- Open de Inspector (Ontwikkelaarstools):
- Klik met rechtermuisknop op het iframe
- Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
- Bepaal de toegankelijke naam in deze volgorde:
aria-labelledbyaria-labeltitle
- Open de Inspector (Ontwikkelaarstools):
- Of het een toegankelijke naam heeft
- Controleer voor elk iframe:
- Of het de toegankelijke naam beschrijft wat de functie of het doel is
- Of het de toegankelijke naam uniek is voor de inhoud
- Zoek iframes met dezelfde toegankelijke naam en controleer:
- Of dezelfde inhoud aanwezig is
Beoordeling
Koppen
- Koppen moeten onderliggende content hebben
- Koppen moeten het onderwerp of doel van de onderliggende content beschrijven
Labels
- Labels van knoppen moeten beschrijven wat het resultaat van de actie is
- Labels van knoppen moeten uniek zijn voor de actie
- Labels bij formulierelementen moeten beschrijven wat er ingevuld moet worden
- Labels bij formulierelementen moeten uniek zijn voor het doel van de input
- Groepslabels bij gegroepeerde formulierelementen moeten beschrijven wat er ingevuld moet worden
- Labels van
<iframe>-elementen moeten het onderwerp of doel van de inhoud beschrijven - Labels van
<iframe>-elementen moeten uniek zijn