Succescriterium 2.4.6 Koppen en labels
Koppen en labels beschrijven het onderwerp of doel.
Koppen en labels begrijpen (Engelstalig)
Koppen en labels beschrijven waar content over gaat of waar een bedieningselement voor is. Zo vinden gebruikers sneller wat ze zoeken.
- Een kop beschrijft het onderwerp van de content eronder. Wie de koppen scant, ziet in één oogopslag hoe de pagina is opgebouwd. Zijn de koppen ook als kop opgemaakt? Dan kan een schermlezer er een lijst van tonen.
- Een label bij een formulierelement beschrijft wat je moet invullen of kiezen.
- Een label op een knop beschrijft wat er gebeurt als je de knop gebruikt. Bijvoorbeeld of je een formulier verstuurt of afdrukt.
Het gaat om het label dat iedereen ziet: de tekst of het icoon bij een bedieningselement. Koppen en labels hoeven niet lang te zijn. Eén woord of zelfs één teken is genoeg, als het duidelijk is.
Hoe pas je dit toe?
Koppen
- Zorg dat elke kop het onderwerp van de content eronder beschrijft.
- Zorg dat elke tabelkop beschrijft wat er in de bijbehorende gegevenscellen staat.
Lees meer over toegankelijke koppen
Labels
- Zorg dat elk label bij een formulierelement beschrijft wat je moet invullen of kiezen.
- Zorg dat het label van een groep formulierelementen beschrijft waar de groep over gaat.
- Zorg dat elk label op een knop het resultaat van de actie beschrijft.
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?
Hoe toets je dit?
Testprocedure
Koppen
- Inventariseer de pagina
- Bepaal welke teksten de functie van een kop hebben:
- Grotere tekst
- Vetgedrukte tekst
- Tekst in een andere kleur
- Tekst met extra witruimte eromheen
- Bepaal voor elke kop:
- Waar de content eronder over gaat
- Bepaal welke teksten de functie van een kop hebben:
- Controleer voor elke kop:
- Of de kop het onderwerp of doel van de content eronder beschrijft
Tabelkoppen
- Inventariseer de pagina
- Bepaal welke datatabellen er zijn
- Bepaal voor elke datatabel welke cellen de functie van een tabelkop hebben:
- Kolomkoppen
- Rijkoppen
- Controleer voor elke tabelkop:
- Of de tabelkop beschrijft wat er in de bijbehorende gegevenscellen staat
Labels van formulierelementen
- Inventariseer de pagina
- Bepaal welke formulierelementen er zijn:
- Invoervelden
- Tekstgebieden
- Keuzelijsten
- Selectievakjes
- Keuzerondjes
- Schuifregelaars
- Maatwerk formulierelementen
- Bepaal voor elk formulierelement:
- Of het een zichtbaar label heeft (tekst of icoon)
- Wat er moet worden ingevuld of gekozen
- Bepaal welke formulierelementen een zichtbaar groepslabel hebben (bijvoorbeeld keuzerondjes die bij elkaar horen, adresvelden of datumvelden)
- Bepaal welke formulierelementen en groepen hetzelfde label hebben
- Bepaal welke formulierelementen er zijn:
- Controleer voor elk formulierelement met een zichtbaar label:
- Of het label beschrijft wat er moet worden ingevuld of gekozen
- Controleer voor elke groep met een groepslabel:
- Of het groepslabel beschrijft wat er in de groep moet worden ingevuld of gekozen
- Controleer voor formulierelementen en groepen met hetzelfde label of minstens één van de volgende waar is:
- Of er in elk formulierelement hetzelfde moet worden ingevuld of gekozen
- Of het groepslabel of de content eromheen het verschil duidelijk maakt
Labels van knoppen
- Verken de pagina
- Bepaal welke knoppen er zijn:
- Knoppen met tekst
- Knoppen met alleen een icoon
- Andere bedieningselementen die werken als knop (bijvoorbeeld tabbladen, schakelknoppen en knoppen die een menu openen)
- Probeer elke knop uit waarvan het resultaat niet vooraf duidelijk is
- Bepaal voor elke knop:
- Wat het resultaat van de actie is
- Bepaal welke knoppen hetzelfde label hebben
- Bepaal welke knoppen er zijn:
- Controleer voor elke knop:
- Of het label het resultaat van de actie beschrijft
- Bij een knop met alleen een icoon:
- Of het icoon een gangbaar icoon is voor deze actie (bijvoorbeeld een vergrootglas voor zoeken)
- Of de content eromheen maar één betekenis van het icoon toelaat
- Controleer voor knoppen met hetzelfde label of minstens één van de volgende waar is:
- Of de knoppen hetzelfde resultaat hebben
- Of de content eromheen duidelijk maakt waar elke knop bij hoort
Belangrijk om te weten
- Deze tests beoordelen het zichtbare label: de tekst of het icoon dat iedereen ziet. De toegankelijke naam valt onder 4.1.2 Naam, rol, waarde. Een verschil tussen het zichtbare label en de toegankelijke naam valt onder 2.5.3 Label in naam. Of koppen, tabelkoppen en groepen goed zijn opgemaakt in de code, valt onder 1.3.1 Info en relaties.
- Beoordeel een kop samen met de bovenliggende kop, en een label samen met het groepslabel. “Openingstijden” onder de kop “Vestiging Zutphen” is beschrijvend.
- Een icoon mag als label dienen. Een gangbaar icoon in een passende context is genoeg, bijvoorbeeld een papieren vliegtuig naast een berichtveld.
- Tekst die alleen bij hover verschijnt (bijvoorbeeld een
title-attribuut) telt niet als zichtbaar label.
Beoordeling
Koppen
- Koppen moeten het onderwerp of doel van de onderliggende content beschrijven
- Tabelkoppen moeten het onderwerp of doel van de bijbehorende gegevenscellen beschrijven
Labels
- Labels bij formulierelementen moeten beschrijven wat er ingevuld of gekozen moet worden
- Groepslabels bij gegroepeerde formulierelementen moeten beschrijven wat er ingevuld of gekozen moet worden
- Voor formulierelementen en groepen met hetzelfde label moet minstens één van de volgende zaken gelden:
- In elk formulierelement wordt hetzelfde ingevuld of gekozen
- Het groepslabel of de content eromheen maakt het verschil duidelijk
- Labels van knoppen moeten beschrijven wat het resultaat van de actie is
- Voor knoppen met hetzelfde label moet minstens één van de volgende zaken gelden:
- De knoppen hebben hetzelfde resultaat
- De content eromheen maakt duidelijk waar elke knop bij hoort