Campus Design System

Appearance

3.2.6 Consistente Hulp niveau A ​

Uitleg ​

Het WCAG-criterium 3.2.6 Consistente Hulp vereist dat hulpbronnen die beschikbaar zijn om gebruikers te ondersteunen, consistent worden gepresenteerd op verschillende pagina's van een website of applicatie. Dit betekent dat als een website op een bepaalde pagina specifieke hulpopties biedt, zoals een help-knop, zoekfunctie of toegang tot ondersteunende documentatie, deze hulpopties ook op andere pagina’s van dezelfde website beschikbaar moeten zijn, op een consistente manier.

Gebruikers moeten altijd weten waar ze terecht kunnen voor hulp, zonder dat ze telkens opnieuw hoeven te zoeken naar waar de ondersteuning zich bevindt of hoe ze deze kunnen gebruiken. Consistente hulpopties zorgen ervoor dat gebruikers met een probleem snel toegang hebben tot de informatie die ze nodig hebben, en dat ze niet gedesoriënteerd raken door een wisselende structuur.

Wat betekent dit in de praktijk? ​

Als een website op één pagina een duidelijk gemarkeerde "Help"-knop heeft, die gebruikers toegang biedt tot een help-sectie of FAQ, moet dezelfde knop ook op andere pagina’s van de website aanwezig zijn. Als de website op een bepaalde pagina een zoekfunctie heeft voor het vinden van ondersteunende informatie, dan moet deze zoekfunctie ook op andere pagina's aanwezig zijn.

De hulpopties moeten dus consistent zijn qua locatie, uiterlijk en functionaliteit. Dit maakt het voor de gebruiker makkelijker om hulp te vinden, ongeacht welke pagina ze bezoeken.

Voorbeeld van het probleem ​

Stel je voor dat je op een e-commercewebsite een productpagina bezoekt en daar een "Help" knop vindt in de rechterbovenhoek van de pagina. Op de winkelmandpagina echter is deze knop niet aanwezig. Gebruikers die hulp nodig hebben tijdens het afrekenproces, kunnen in dit geval moeilijk toegang krijgen tot de benodigde ondersteuning, omdat de hulpoptie niet op dezelfde plek te vinden is.

html
<!-- Help-knop op productpagina -->
<button id="help-button">Help</button>

<!-- Geen help-knop op winkelmandpagina -->
<!-- De gebruiker kan geen hulp vinden tijdens het afrekenproces -->

Oplossing voor dit probleem ​

Om dit probleem op te lossen, moet de help-knop consistent aanwezig zijn op alle pagina’s van de website. Dit betekent dat dezelfde knop, met dezelfde functie en label, moet worden weergegeven op elke pagina waar gebruikers mogelijk hulp nodig hebben.

html
<!-- Help-knop op productpagina en winkelmandpagina -->
<button id="help-button">Help</button>

In dit geval wordt de help-knop op zowel de productpagina als de winkelmandpagina op dezelfde manier gepresenteerd, zodat gebruikers altijd weten waar ze terecht kunnen voor ondersteuning.

Belangrijke overwegingen ​

  • Zichtbaarheid van de hulpopties: Hulpopties moeten gemakkelijk toegankelijk zijn voor de gebruiker, bijvoorbeeld via een altijd zichtbare knop of een goed gemarkeerd menu.
  • Consistentie in de presentatie van hulpopties: De hulpopties moeten dezelfde naam en functie hebben op verschillende pagina's, zodat gebruikers weten dat ze dezelfde bron van hulp kunnen raadplegen.
  • Toegankelijkheid van hulpopties: Zorg ervoor dat hulpopties ook toegankelijk zijn voor gebruikers van assistieve technologieën, zoals screenreaders. Dit kan door het gebruik van duidelijke alt-teksten voor knoppen en andere interactieve elementen.

Voorbeeld van toepassing ​

Stel dat je een help-knop hebt op de productpagina en je wilt ervoor zorgen dat deze knop ook op de betaalpagina aanwezig is. In dit geval moet je dezelfde knop, met dezelfde functionaliteit, op elke pagina toevoegen, zodat de gebruiker altijd op dezelfde manier hulp kan krijgen.

html
<!-- Help-knop consistent op meerdere pagina's -->
<button id="help-button">Help</button>

Hierdoor kunnen gebruikers op elke pagina van de website de help-knop vinden, ongeacht of ze zich nu op de productpagina, winkelmandpagina of afrekenpagina bevinden.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: Gebruik WAVE om te controleren of de hulpopties consistent aanwezig zijn op verschillende pagina's van je site. WAVE Tool.
  • Axe Accessibility Tool: Axe kan ook helpen bij het controleren van de consistentie van hulpopties en andere toegankelijke elementen op je website. Axe Tool.

Referenties ​