Je spreekt moeilijk

De oplossing is een afspraak en geen techniek. Kies één plek voor de hulp en wijk daar niet van af.

Bouw het als één sjabloononderdeel en zet dat op elke pagina neer. Dan kán het niet verspringen, want er is maar één plek waar het vandaan komt:

<!-- in de voettekst, op elke pagina, in deze volgorde -->
<h2>Contact</h2>
<dl>
  <dt>E-mail</dt><dd><a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></dd>
  <dt>Telefoon</dt><dd><a href="tel:+31000000000">000 – 00 00 000</a></dd>
</dl>
<p><a href="/contact/">Bezoek de contactpagina</a></p>

Een chatknop rechtsonder mag, zolang hij op elke pagina rechtsonder staat. Verspringt hij naar linksonder op de bestelpagina omdat daar een knop in de weg zat, dan voldoet de site niet meer.

Open dit onderwerp op een eigen pagina

Onderdelen die hetzelfde doen horen overal dezelfde naam te krijgen. Dat geldt voor de zichtbare tekst en voor het alternatief van een pictogram. Heet dezelfde knop op de ene pagina “Zoeken”, op de andere “Zoek”, en staat er elders alleen een vergrootglas zonder tekst, dan is dat voor wie kijkt één ding en voor wie luistert drie.

Waar het vaak misgaat:

• Een pictogram zonder tekst, met per pagina een ander alternatief: “zoeken”, “zoek”, “vergrootglas”.
• Downloadlinks: “Download pdf”, “Pdf downloaden”, “Bekijk het rapport” — voor hetzelfde bestand.
• De knop die een formulier verstuurt: “Versturen”, “Verzenden”, “Aanvragen”, “Ok”.
• Een sluitkruisje dat de ene keer “Sluiten” heet en de andere keer “Annuleren”.

Dit telt het zwaarst bij spraakbediening. Wie zijn computer met zijn stem bedient zegt “klik Zoeken”. Heet de knop op die pagina “Zoek”, dan gebeurt er niets.

Open dit onderwerp op een eigen pagina

Dit is geen technisch probleem. Het ontstaat doordat verschillende mensen op verschillende momenten een knop een naam geven. De oplossing is een afspraak.

Maak een lijst met de tien tot twintig onderdelen die overal terugkomen, en spreek per stuk één naam af:

Zoeken            (niet: Zoek, Vind, Search)
Versturen         (niet: Verzenden, Ok, Aanvragen)
Sluiten           (niet: Annuleren, Terug, X)
Download pdf      (niet: Pdf downloaden, Bekijk pdf)
Neem contact op   (niet: Contact, Mail ons)

Een pictogram zonder tekst heeft een naam nodig die niet zichtbaar is. Gebruik overal dezelfde:

<button aria-label="Zoeken">
  <svg aria-hidden="true">…</svg>
</button>

Staat er wel tekst naast het pictogram, dan is die tekst de naam. Zet het pictogram dan op aria-hidden, anders wordt de naam twee keer voorgelezen.

Open dit onderwerp op een eigen pagina

Deze test doe je met het oog en een handvol pagina’s.

Ga als volgt te werk:

• Kies vijf pagina’s die niet op elkaar lijken: de homepage, een dienstenpagina, een formulier, een artikel en een bevestigingspagina.
• Zoek op elke pagina alle vormen van hulp: telefoon, e-mail, contact, chat, veelgestelde vragen.
• Noteer waar ze staan en in welke volgorde.
• Leg de vijf lijstjes naast elkaar.

Waar het meestal misgaat:

• De bestelpagina zonder voettekst, bewust weggehaald om afleiding te voorkomen — precies waar een bezoeker vastloopt.
• Een chatknop die alleen op sommige pagina’s staat.
• Een telefoonnummer in de koptekst op de homepage en alleen in de voettekst op de rest.
• Een volgorde die wisselt: op de ene pagina eerst chat en dan telefoon, op de andere andersom.

Open dit onderwerp op een eigen pagina

Je zoekt onderdelen die hetzelfde doen maar anders heten. Die vind je door de namen naast elkaar te leggen.

Haal de namen op met dit script in de console:

[...document.querySelectorAll('button, a, [role=button]')]
  .map(function (el) {
    return (el.getAttribute('aria-label') || el.textContent).trim();
  })
  .filter(Boolean)
  .forEach(function (n) { console.log(n); });

Doe dit op vijf verschillende pagina’s en zet de uitkomsten onder elkaar in een tekstbestand.

Waar je op let:

• Varianten van hetzelfde woord: zoeken, zoek, search.
• Knoppen die hetzelfde doen maar anders heten.
• Pictogrammen zonder naam. Die komen als lege regel terug.
• Namen die twee keer voorkomen maar iets anders doen. Dat is de omgekeerde fout.

Open dit onderwerp op een eigen pagina

Biedt een website op meerdere pagina’s hulp aan, dan hoort die hulp op elke pagina op dezelfde plek te staan, in dezelfde volgorde. Staat het telefoonnummer op de ene pagina rechtsboven en op de volgende ergens anders, dan raakt de bezoeker het kwijt op het moment dat hij het nodig heeft.

Het gaat er niet om óf er hulp wordt aangeboden — dat is een eigen keuze. Het gaat erom dat de hulp niet per pagina verspringt. Dit criterium is nieuw in WCAG 2.2 en staat op niveau A, dus het valt onder de wettelijke eis.

Als hulp telt:

• Een telefoonnummer of e-mailadres.
• Een link naar contact of een contactformulier.
• Een chatvenster of een chatbot.
• Een link naar veelgestelde vragen of een helpdesk.
• Een link naar een zelfhulppagina bij een specifieke stap.

Open dit onderwerp op een eigen pagina