Webdeveloper

Taalswitch met alleen 'EN' en 'NL': hoe maak je die toegankelijk?

Taalswitch met alleen 'EN' en 'NL'? Leer waarom aria-hidden op zichtbare tekst problemen geeft en hoe je het wél toegankelijk maakt.

Julia Tol 3 min leestijd

Je hebt vast wel eens zo’n strakke taalswitch gezien: twee letters, een sliding indicator, mooi geanimeerd. EN | NL. Simpel. Elegant. En meestal compleet ontoegankelijk.

Ik kwam laatst deze uitdaging tegen:

<a data-lang="en-NL" href="#" aria-label="Switch language">
  <span aria-hidden="" class="...">EN</span>
  <span aria-hidden="true" class="...">NL</span>
</a>

Op het eerste gezicht niks mis mee. Visueel werkt het perfect. Maar voor iemand met een schermlezer? Die hoort “Switch language” met de Nederlandse uitspraakregels. En voor iemand die met spraaksturing werkt? Die kan het niet eens activeren.

Laten we uitzoeken wat hier fout gaat en hoe je het wél goed doet.

Probleem 1: Spraakgestuurde gebruikers kunnen het niet activeren

Dit is waar SC 2.5.3 Label in Name (niveau A) om de hoek komt kijken. Die regel zegt: als er zichtbare tekst op een knop of link staat, moet die tekst onderdeel zijn van de toegankelijke naam.

Waarom? Mensen die spraaksturing gebruiken (zoals Dragon NaturallySpeaking) navigeren door te zeggen wat ze zien. Als ze “EN” zien staan, zeggen ze “klik EN”. De software zoekt dan naar een element met “EN” in de toegankelijke naam.

Maar omdat aria-label de tekst van beide span-elementen overschrijft, is er geen match. De gebruiker kan het element niet activeren door de zichtbare tekst te zeggen.

✅ Wel toegankelijk: zichtbare tekst = “EN”, toegankelijke naam = “English (EN)”
⚠️ Niet toegankelijk: zichtbare tekst = “EN” of “NL”, toegankelijke naam = “Switch language”

Probleem 2: Geen indicatie van de huidige taal

Stel, je bent op de Nederlandse versie van de site. Visueel zie je misschien een sliding indicator bij “NL”. Maar een schermlezer-gebruiker weet niet welke taal momenteel actief is. De link heeft geen state die dat aangeeft.

Dit raakt aan SC 4.1.2: de “Value”, de huidige staat, moet programmatisch bepaalbaar zijn.

De snelste fix? Gebruik een aria-label dat de zichtbare tekst bevat en geef context:

<a href="#" aria-label="Engels (EN) is geselecteerd">
  <span>EN</span>
  <span>NL</span>
</a>

Het aria-label moet dynamisch veranderen wanneer een andere taal is geselecteerd!

Let op:

  • De spans hebben geen aria-hidden meer. Aria-label overschrijft deze span-elementen anyway.
  • Het aria-label bevat “EN” (de zichtbare tekst)

Dit is lang niet de enige oplossing!

Voordeel

  • Eenvoudig door te voeren
  • De visuele opmaak kan hetzelfde blijven
  • Voldoet aan SC 2.5.3 en SC 4.1.2

Veelgemaakte fouten (en hoe je ze voorkomt)

❌ Fout: aria-hidden op zichtbare tekst

<a href="/en/">
  <span aria-hidden="true">EN</span>
</a>

Waarom fout? Spraakgestuurde gebruikers kunnen “klik EN” niet gebruiken.

Oplossing: Verwijder aria-hidden of zorg dat “EN” in de linktekst of het aria-label staat.

Samenvatting: checklist voor toegankelijke taalwisselaars

  • Geen aria-hidden op zichtbare tekst: de zichtbare tekst moet onderdeel zijn van de toegankelijke naam (SC 2.5.3)
  • Elke link heeft een toegankelijke naam: geen lege aria-labels (SC 4.1.2)
  • Gebruik links, geen knoppen: taalwisselen is navigatie wanneer je naar een andere pagina wordt gestuurd
  • Test met spraaksturing: kan je “klik EN” zeggen en wordt de link geactiveerd?
  • Test met een schermlezer: wordt de huidige taal aangekondigd?

Tot slot

Een taalswitch lijkt een simpel component, maar er komt meer bij kijken dan je denkt. De combinatie van visueel ontwerp, semantische HTML en toegankelijkheid vraagt om doordacht afwegen.

De belangrijkste les? Als een interactief element zichtbare tekst bevat, moet deze tekst in de toegankelijke naam van het element staan.

2 5 3 4 1 2

Related Posts

Hoe geef ik een applicatie een accessible name?

Soms kom je in een audit een element tegen met role="application" dat geen toegankelijkheidsnaam (accessible name) heeft. Dat is een probleem, want een schermlezer weet dan niet wat dit onderdeel van de pagina doet. In dit artikel leg ik uit wat role="application" is, wanneer je het gebruikt en hoe je het een correcte naam geeft.

Julia Tol 3 min leestijd

Een toegankelijk iframe

Waar moet je opletten als je een iframe digitaal toegankelijk wil toevoegen aan een webpagina? De WCAG stelt een aantal eisen aan de implementatie van een iframe. Dit zijn de kritieke punten.

Julia Tol 3 min leestijd

Hoe test je elementen die op hover, focus of klik verschijnen (en meteen weer verdwijnen)?

Sommige UI-elementen verschijnen alleen kort, bijvoorbeeld vensters, dropdowns of menus die op hover of focus zichtbaar worden. Die kunnen interactieve onderdelen bevatten die je moet testen op toegankelijkheid. Bijvoorbeeld:

Julia Tol 3 min leestijd