Ga naar hoofdinhoud

WCAG-succescriterium 3.1.1 Taal van de pagina

Niveau A

Een webpagina geeft aan in welke taal de content is geschreven. Die informatie staat in het lang-attribuut op het <html>-element. Browsers, screenreaders en andere hulpsoftware gebruiken dit om de pagina met correcte uitspraakregels voor te lezen.

Als het lang-attribuut correct is ingesteld, leest een screenreader de tekst voor met de juiste uitspraak en tonen zoekmachines de pagina in de juiste taalversie van zoekresultaten. Zonder lang="nl" op een Nederlandstalige pagina kan een screenreader de tekst met een Engelse stem voorlezen. Het resultaat is onverstaanbaar.

Veelgemaakte fouten

Pagina heeft geen lang-attribuut

Elke webpagina heeft een lang-attribuut op het <html>-element dat de hoofdtaal van de pagina aangeeft. Ontbreekt het attribuut, dan raadt de browser en screenreader de taal. Die gok is niet altijd juist: een Nederlandstalige pagina kan als Engels worden geïnterpreteerd, waardoor een screenreader de tekst met een verkeerde uitspraak voorleest.

Hoe te testen: open de DevTools en inspecteer het <html>-element. Is er een lang-attribuut aanwezig?

Niet doen

Geen lang-attribuut op het html-element.

<html>
  <head>
    <title>Over ons - Gemeente Utrecht</title>
  </head>
</html>

Doen

Lang-attribuut geeft de hoofdtaal aan.

<html lang="nl">
  <head>
    <title>Over ons - Gemeente Utrecht</title>
  </head>
</html>

Wie kan dit oplossen: een developer voegt het lang-attribuut toe aan het <html>-element in het template.

Taalcode is onjuist of ongeldig

Het lang-attribuut moet een geldige taalcode bevatten volgens de BCP 47-standaard. Voor Nederlands is dat nl, voor Engels en, voor Fries fy. Codes zoals lang="dutch" of lang="ned" worden door browsers en screenreaders niet herkend. Ze vallen dan terug op een standaardtaal, waardoor de uitspraak niet klopt.

Hoe te testen: inspecteer het <html>-element in de DevTools. Controleer of de taalcode geldig is. Voor Nederlands is dat nl, voor Engels en, voor Fries fy.

Niet doen

Ongeldige taalcodes.

<html lang="dutch">
<html lang="ned">
<html lang="nl-NLD">

Doen

Geldige BCP 47-taalcodes.

<!-- Nederlands -->
<html lang="nl">


<!-- Engels -->
<html lang="en">


<!-- Fries -->
<html lang="fy">

Wie kan dit oplossen: een developer past de taalcode aan in het template.

Taalcode komt niet overeen met de daadwerkelijke taal

Het lang-attribuut geeft een andere taal aan dan waarin de pagina geschreven is. Dit gebeurt als een website in meerdere talen beschikbaar is, maar het lang-attribuut niet mee verandert bij het wisselen van taal. Een screenreader leest dan bijvoorbeeld een Nederlandstalige pagina voor met een Engelse stem.

Hoe te testen: bekijk de taal van de content op de pagina. Open de DevTools en controleer of het lang-attribuut op <html> overeenkomt met die taal. Wissel van taal op de website en controleer of het lang-attribuut mee verandert.

Niet doen

Engelse taalcode op een Nederlandstalige pagina.

<html lang="en">
  <head>
    <title>Over ons - Gemeente Utrecht</title>
  </head>
  <body>
    <h1>Over ons</h1>
    <p>Welkom bij de gemeente Utrecht.</p>
  </body>
</html>

Doen

Taalcode komt overeen met de content.

<html lang="nl">
  <head>
    <title>Over ons - Gemeente Utrecht</title>
  </head>
  <body>
    <h1>Over ons</h1>
    <p>Welkom bij de gemeente Utrecht.</p>
  </body>
</html>

Wie kan dit oplossen: een developer laat de waarde van het lang-attribuut automatisch veranderen wanneer een andere taal is gekozen.

Taal verandert niet mee in een single-page applicatie

In een single-page applicatie verandert de content zonder dat de browser een nieuwe pagina laadt. Als de applicatie meertalig is en de bezoeker van taal wisselt, moet het lang-attribuut op <html> worden bijgewerkt. Gebeurt dat niet, dan blijft de oude taalcode staan en leest een screenreader de nieuwe taal met de verkeerde stem voor.

Hoe te testen: wissel van taal in de applicatie. Open de DevTools console en controleer de waarde van document.documentElement.lang. Komt die overeen met de geselecteerde taal?

Doen

Lang-attribuut bijwerken bij taalwissel.

function wisselTaal(taalcode) {
  document.documentElement.lang = taalcode;
  // ... content laden in de nieuwe taal ...
}

Wie kan dit oplossen: een developer voegt taallogica toe aan de taalwisselfunctie van de applicatie.

Template van een framework heeft een standaard Engelse taalcode

Frameworks zoals React, Angular en Vue genereren een standaard index.html met lang="en". Bij een Nederlandstalige website wordt die standaardwaarde niet aangepast. De pagina meldt zich als Engels terwijl de content Nederlands is.

Hoe te testen: open de DevTools en inspecteer het <html>-element. Staat er lang="en" terwijl de content in een andere taal is?

Niet doen

Standaard Engelse taalcode uit een framework-template.

<!-- Gegenereerd door create-react-app -->
<html lang="en">

Doen

Taalcode aangepast aan de daadwerkelijke taal.

<html lang="nl">

Wie kan dit oplossen: een developer past het lang-attribuut aan in het template (index.html, app.component.html of equivalent).

Hoe te testen

Voor iedereen

  1. Gebruik een screenreader om een stuk tekst te laten voorlezen. Klinkt de uitspraak correct voor de taal van de pagina? Een verkeerde taalinstelling herken je aan een onnatuurlijke, buitenlandse uitspraak.
  2. Als de website meertalig is: wissel van taal en controleer of de uitspraak van de screenreader mee verandert.

Voor developers

  1. Inspecteer het <html>-element in de DevTools. Controleer of een lang-attribuut aanwezig is met een geldige BCP 47-taalcode.
  2. Controleer of het lang-attribuut via JavaScript wordt bijgewerkt bij meertalige websites en single-page applicaties.
  3. Zoek in je templates naar hardcoded lang="en" uit framework-generators. Pas deze aan naar de juiste taal.
  4. Gebruik een geautomatiseerde tool zoals axe DevTools of Lighthouse. Een ontbrekend lang-attribuut wordt automatisch gedetecteerd. Of de taalcode overeenkomt met de daadwerkelijke content moet je handmatig controleren.

Gerelateerde succescriteria

  • 3.1.2 Taal van onderdelen: als een passage in een andere taal is geschreven dan de rest van de pagina, geeft een lang-attribuut op dat element de afwijkende taal aan. Lees hier meer als je pagina's hebt met gemengde talen.

Relevante bronnen

  • BCP 47 Language Subtag Registry — het volledige register van geldige taalcodes. Gebruik dit als je twijfelt over de juiste code voor een specifieke taal (Engels).

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C-referenties

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.