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
- 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.
- Als de website meertalig is: wissel van taal en controleer of de uitspraak van de screenreader mee verandert.
Voor developers
- Inspecteer het
<html>-element in de DevTools. Controleer of eenlang-attribuut aanwezig is met een geldige BCP 47-taalcode. - Controleer of het
lang-attribuut via JavaScript wordt bijgewerkt bij meertalige websites en single-page applicaties. - Zoek in je templates naar hardcoded
lang="en"uit framework-generators. Pas deze aan naar de juiste taal. - 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
- WCAG 2.2: Succescriterium 3.1.1 Taal van de pagina — de officiële Nederlandstalige vertaling van het succescriterium.
- Understanding SC 3.1.1: Language of Page — de W3C-uitleg bij het succescriterium, met technieken en voorbeelden (Engels).
- Quick Reference 3.1.1 Language of Page — snelreferentie met technieken (Engels).
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
Aanvullingen of opmerkingen?
Deze pagina’s over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.