Campus Design System

Appearance

3.2.4 Consistente Identificatie niveau AA ​

Uitleg ​

Het WCAG-criterium 3.2.4 Consistente Identificatie vereist dat componenten van de interface, zoals formulieren, knoppen en andere interactie-elementen, consistent geïdentificeerd worden door hun naam of rol op de verschillende pagina's van een website of applicatie. Dit betekent dat als een component op de ene pagina van de website een bepaalde naam of label heeft, dezelfde naam of label moet worden gebruikt op andere pagina’s waar datzelfde component voorkomt.

Deze consistentie helpt gebruikers om het gedrag van de interface te begrijpen, omdat ze niet telkens opnieuw hoeven te leren wat een specifiek element doet of betekent. Dit is vooral belangrijk voor gebruikers van screenreaders of andere assistieve technologieën die afhankelijk zijn van consistente en voorspelbare naamgeving en identificatie van elementen.

Wat betekent dit in de praktijk? ​

Stel je voor dat je een formulier hebt op een pagina waar de knop voor "Verzenden" een label heeft met de tekst "Verzend mijn gegevens". Op een andere pagina van dezelfde website heeft de knop voor "Verzenden" een ander label zoals "Gegevens versturen". Dit kan verwarrend zijn voor de gebruiker, omdat het niet duidelijk is of deze knoppen dezelfde functie hebben of niet.

Het doel van dit criterium is ervoor te zorgen dat hetzelfde type element altijd op dezelfde manier wordt aangeduid, ongeacht waar het zich op de website bevindt.

Voorbeeld van het probleem ​

Stel je voor dat een formulier op de ene pagina een knop heeft die is gelabeld als "Verstuur" en op een andere pagina als "Indienen". Hoewel de knoppen dezelfde functie hebben (namelijk het verzenden van gegevens), kan het gebruik van verschillende labels leiden tot verwarring bij de gebruiker, vooral wanneer ze door meerdere formulieren navigeren.

html
<!-- Formulierpagina 1 -->
<button id="submit-button">Verstuur</button>

<!-- Formulierpagina 2 -->
<button id="submit-button">Indienen</button>

In dit geval is de inconsistentie in de labels van de knoppen verwarrend, zelfs als beide knoppen dezelfde actie uitvoeren.

Oplossing voor dit probleem ​

Om consistentie te waarborgen, moeten dezelfde elementen op dezelfde manier worden gelabeld en geïdentificeerd, ongeacht de pagina waar ze zich bevinden. De knoppen moeten bijvoorbeeld altijd "Verstuur" of "Indienen" heten, maar niet beide door elkaar.

html
<!-- Consistent formulier 1 -->
<button id="submit-button">Verstuur</button>

<!-- Consistent formulier 2 -->
<button id="submit-button">Verstuur</button>

In dit geval hebben beide formulieren dezelfde benaming voor de knop, wat het gemakkelijker maakt voor gebruikers om te begrijpen dat de actie in beide gevallen hetzelfde is.

Belangrijke overwegingen ​

  • Label consistentie: De tekst van knoppen, formulieren en andere interface-elementen moet altijd hetzelfde zijn als ze dezelfde actie uitvoeren.

  • ID's en naamgeving: Als je formuliervelden gebruikt, moeten ze ook consistent geïdentificeerd worden. Bijvoorbeeld, als je een veld voor "E-mail" hebt, moet dit veld op alle pagina's dezelfde naam en id hebben.

    Dit geldt zowel voor visuele weergave als voor de identificatie van de elementen door assistieve technologieën, zoals screenreaders. Het consistent gebruik van aria-label of aria-labelledby kan ook helpen om consistentie te garanderen voor gebruikers die afhankelijk zijn van deze technologieën.

Voorbeeld van toepassing ​

Laten we zeggen dat een formulier op meerdere pagina’s van een website een veld heeft voor het invoeren van de naam van de gebruiker. Om de consistentie te waarborgen, moet het veld altijd dezelfde naam en id hebben, ongeacht op welke pagina het zich bevindt.

html
<!-- Formulierpagina 1 -->
<label for="name">Naam</label>
<input type="text" id="name" name="name" />

<!-- Formulierpagina 2 -->
<label for="name">Naam</label>
<input type="text" id="name" name="name" />

Nu is de naam van het veld op alle pagina's consistent, wat het voor gebruikers gemakkelijker maakt om het formulier in te vullen, omdat ze weten dat het veld altijd dezelfde naam en functie heeft.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: Gebruik WAVE om te controleren of dezelfde elementen consistent worden geïdentificeerd op verschillende pagina's van je site. WAVE Tool.
  • Axe Accessibility Tool: Axe kan ook helpen bij het controleren van consistente identificatie van elementen, vooral wanneer het gaat om formuliervelden en knoppen. Axe Tool.

Referenties ​