2.4.6 Koppen en labels – Richtlijnen voor toegankelijkheid van webcontent

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.

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

Hoe toets je dit?

Testprocedure

Test 1: Koppen

Inventariseer alle koppen
- 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
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 alle knoppen
- Bepaal welke knoppen er aanwezig zijn:
  - Gewone knoppen (<button>, <input type="button">)
  - Links die worden opgemaakt als knop met role="button"
- Bepaal voor elke knop:
  - Of het een zichtbaar label heeft (tekst of icoon)
  - Of dezelfde knop meerdere keren voorkomt
- Bepaal voor elke knop wat de toegankelijke naam is
  - Open Developer Tools:
    - Klik met rechtermuisknop op de knop
    - Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
    - Ga naar het Accessibility panel
  - Bepaal de toegankelijke naam in deze volgorde:
    - aria-labelledby
    - aria-label
    - De inhoud van het <button>-element
      - De zichtbare tekst
      - Het tekstalternatief van afbeeldingen of iconen in de knop
    - title
  - (Gebruik eventueel een schermlezer om de toegankelijke naam te controleren)
Controleer voor elke knop:
- Of het zichtbare label de actie beschrijft
- 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
Bekijk de context voor herhaalde knoppen en controleer:
- Of de context duidelijk is via:
  - De toegankelijke naam zelf (bijvoorbeeld: “Verwijder Jan Jansen”)
  - Een toegankelijke beschrijving (aria-describedby of title)
  - Een gekoppelde tabelkop
  - De naam van een sectie of landmark
- Of de combinatie van toegankelijke naam plus context de specifieke actie beschrijft

Test 3: Labels van formulierelementen

Inventariseer alle formulierelementen
- Bepaal welke formulierelementen er aanwezig zijn:
  - Invoervelden (<input type="text">, <textarea>)
  - Keuzerondjes (<input type="radio">)
  - Selectievakjes (<input type="checkbox">)
  - Keuzelijsten (<select>)
  - Schuifregelaar (<input type="range">)
  - Custom form controls
- Bepaal voor elk formulierelement:
  - Of het een zichtbaar label heeft (tekst of icoon)
  - Of het meerdere keren voorkomt op de pagina
- Bepaal voor elk formulierelement wat de toegankelijke naam is
  - Open Developer Tools:
    - Klik met rechtermuisknop op het element
    - Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
    - Ga naar het Accessibility panel
    - Bepaal de toegankelijke naam in deze volgorde:
      - aria-labelledby
      - aria-label
      - De gekoppelde <label>
      - De placeholder (alleen bij single select elements)
      - title
    - (Gebruik eventueel een schermlezer om de toegankelijke naam te controleren)
Controleer voor elk formulierelement:
- Of het zichtbare label beschrijft wat er moet worden ingevuld
- 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
Bekijk de context voor formulierelementen in groepen en controleer:
- Bij fieldset met legend:
  - Of de combinatie van legend en label samen het doel beschrijft

Test 4: Labels van iframes

Inventariseer alle <iframe>-elementen
- Bepaal welke iframes er aanwezig zijn:
  - Ingesloten content (media, kaarten, widgets)
  - Externe content
- Bepaal voor elke iframe wat de functie of het doel is
- Bepaal voor elke iframe:
  - Of het <iframe>-element een title– of aria-label-attribuut heeft
    - Open Developer Tools:
      - Klik met rechtermuisknop op het iframe
      - Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
Controleer voor elk iframe:
- Of het title– of aria-label-attribuut aanwezig is
- Of het title– of aria-label-attribuut het doel beschrijft
Zoek iframes met dezelfde title en controleer:
- Of ze verschillende content bevatten
- Of elk iframe een unieke title heeft

Beoordeling

Koppen moeten onderliggende content hebben
Koppen moeten beschrijven waar de onderliggende content over gaat
Labels van knoppen moeten beschrijven wat het resultaat van de actie is
Labels bij formulierelementen moeten beschrijven wat er ingevuld moet worden
Groepslabels bij gegroepeerde formulierelementen moeten beschrijven wat er ingevuld moet worden
Labels van <iframe>-elementen moeten beschrijven waar de inhoud over gaat

Bronnen

WCAG 2.2 – Succescriterium 2.4.6 Koppen en labels

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent