3.2.4 Consistente identificatie

Succescriterium 3.2.4 Consistente identificatie

Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina’s worden consistent geïdentificeerd.

Consistente identificatie begrijpen (Engelstalig)

Zorg dat knoppen, links en andere onderdelen die op verschillende webpagina’s voorkomen steeds dezelfde naam hebben. Dus noem een zoekknop altijd “Zoeken” en niet soms “Zoeken” en dan weer “Vind” of “Doorzoek website”.

Als functionaliteit steeds anders heet, dan is dat verwarrend. Vooral mensen die een schermlezer gebruiken hebben hier last van. Zij horen wat er op een pagina staat. Ze moeten elke pagina weer opnieuw leren kennen. Ook mensen met een cognitieve beperking kunnen het moeilijk vinden als functionaliteit steeds anders wordt benoemd.

Hoe pas je dit toe?

  • Zorg dat links met hetzelfde linkdoel steeds een dezelfde linktekst hebben.
  • Zorg dat knoppen die dezelfde actie uitvoeren steeds hetzelfde label hebben.
  • Zorg dat componenten met dezelfde functionaliteit steeds hetzelfde worden benoemd.
  • Zorg dat formulierelementen met hetzelfde doel van input steeds hetzelfde label hebben.
  • Zorg dat afbeeldingen die dezelfde informatie overbrengen steeds hetzelfde tekstalternatief hebben.

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?

Testprocedures

Test 1: Herhalende elementen

  1. Verken de website
    • Bepaal welke elementen op meerdere pagina’s terugkomen:
      • Links
      • Knoppen
      • Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, schuifbalken, enz.)
      • Navigaties en subnavigaties
      • Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
      • Dialoogvensters
      • Carrousels
      • Tabbladen
      • Mediaspelers
    • Bepaal voor elk herhaald element wat de toegankelijke naam is:
      • Open de Inspector (Ontwikkelaarstools):
        • Klik met rechtermuisknop op het element
        • Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
        • Bepaal de toegankelijke naam in deze volgorde:
          • Voor afbeeldingen:
            • aria-labelledby
            • aria-label
            • alt
            • title
          • Voor links:
            • aria-labelledby
            • aria-label
            • De inhoud van de link
              • De zichtbare tekst
              • Het tekstalternatief van afbeeldingen in de link
              • Verborgen tekst in de link
            • title
          • Voor knoppen:
            • aria-labelledby
            • aria-label
            • De inhoud van de knop
              • De zichtbare tekst
              • Het tekstalternatief van afbeeldingen in de knop
              • Verborgen tekst in de knop
            • value (alleen voor <input type="button">)
            • title
          • Voor formulierelementen:
            • aria-labelledby
            • aria-label
            • De gekoppelde <label>
            • placeholder
            • title
  2. Bezoek meerdere andere pagina’s binnen dezelfde website
  3. Vergelijk de toegankelijke naam van elk herhaald element en controleer:
    • Of elementen met dezelfde functie identiek worden benoemd
    • Of labels, namen en tekstalternatieven consistent zijn over alle pagina’s
    • Of menu-items overeenkomen met de koppen of titels van de doelpagina’s
Beoordeling
  • Elementen die op meerdere pagina’s worden herhaald moeten op elke pagina in hetzelfde worden geïdentificeerd

Bronnen

Andere richtlijnen

Laatst gewijzigd op