Taal in de code vastleggen – Toegankelijkheid

Voorleessoftware kan tekst omzetten in spraak. Het gebruikt hier verschillende stemmen voor. Iedere stem is gemaakt om in een bepaalde taal te spreken. Om te bepalen in welke taal er moet worden gesproken, is voorleessoftware afhankelijk van taal die in de code is vastgelegd.

Het vastleggen van de taal in de code heeft meerdere functies:

Voorleessoftware kan woorden en zinnen in de juiste taal uitspreken.
Browsers kunnen letters en karakters op de goede manier weergeven.
Zoekmachines gebruiken de taal van een webpagina om te bepalen of een pagina wordt opgenomen in zoekresultaten.
Spellingscontroles in de browser kunnen de juiste taalregels toepassen.
Automatische vertaaltools kunnen de content correct vertalen.

In dit artikel lees je hoe je taal in de code kan vastleggen.

Wat WCAG precies eist

Er zijn twee WCAG-succescriteria voor taal:

Taal van de pagina

3.1.1 Taal van de pagina vereist dat de standaardtaal van elke webpagina door software te bepalen moet zijn. In de praktijk betekent dit: Gebruik het lang-attribuut met de juiste taalcode op het <html>-element.

Als een pagina meerdere talen bevat, kies je de taal die het meest voorkomt. Komen twee talen evenveel voor? Dan kies je de taal die het eerst verschijnt.

Taal van onderdelen

3.1.2 Taal van onderdelen verplicht dat je anderstalige passages en zinnen in de content markeert met een lang-attribuut op het betreffende element.

Je hoeft niet álles te markeren. Er zijn een aantal categorieën uitgezonderd:

Eigennamen: merknamen, plaatsnamen (“Apple”, “München”, “CoolBlue”)
Technische termen: vakjargon dat internationaal wordt gebruikt (“WCAG”, “responsive design”, “Homo Sapiens”)
Woorden met onbepaalde taal: woorden waarvan niet duidelijk is in welke taal ze zijn
Ingeburgerde woorden: woorden die deel zijn geworden van de Nederlandse taal (“software”, “website”, “e-mail”, “deadline”)

Voor woorden in een tekst geeft het W3C een praktische vuistregel: “Single words should be considered part of the language of the surrounding text unless it is clear that a change in language was intended.”

Taal instellen

Meestal kan alleen een ontwikkelaar de hoofdtaal van de website instellen. Soms kan dit ook via de instellingen van het CMS.

Voor onderdelen van een webpagina kun je in een CMS de taal vaak makkelijk toevoegen in de editor op de pagina.

Let op: WordPress ondersteunt standaard geen inline lang-attributen in de blokeditor. Je hebt dan een plugin nodig zoals “Lang Attribute for the Block Editor”.

Code van taal instellen

Taal kan worden toegevoegd met het lang-attribuut. Gebruik als waarde van dit attribuut alleen een taalcode die voorkomt in de IANA Subtag Registry.

Het lang-attribuut is een zogenaamd global attribute in HTML. Het mag op elk HTML-element staan. De waarde moet een geldige BCP 47-taaltag zijn, gebaseerd op ISO 639-taalcodes.

Het systeem werkt met overerving: elk element zonder eigen lang-attribuut erft de taalinstelling van zijn ouder-element. Door lang="nl" op het <html>-element te zetten, geldt die taal voor de hele pagina (inclusief de <head> met daarin de <title>).

Een aantal veelgebruikte taalcodes:

Taalcode	Taal
`nl`	Nederlands
`nl-NL`	Nederlands (Nederlands)
`nl-BE`	Nederlands (België/Vlaams)
`en`	Engels
`en-GB`	Engels (Brits)
`en-US`	Engels (Amerikaans)
`fr`	Frans
`de`	Duits
`pl`	Pools
`it`	Italiaans
`es`	Spaans
`pt`	Portugees

Voorbeelden van taalcodes

Houd taalcodes zo kort mogelijk. Gebruik regiosubtags (nl-NL, en-GB) alleen als het regionale verschil relevant is voor bijvoorbeeld spelling- of uitspraakverschillen. Voor de meeste situaties volstaat de tweeletterige code.

Taal van de pagina

De standaard taal van een webpagina wordt aangegeven in het <html>-element. Voeg het lang-attribuut toe aan het <html>-element en gebruik de juiste taalcode.

<html lang="nl">

Taal van onderdelen

Passages, zinnen of onderdelen van je website in een andere taal moet je apart markeren. Voeg hiervoor het lang-attribuut toe aan het HTML-element met een andere taal en gebruik de juiste taalcode.

Het lang-attribuut kan worden gebruikt op block-elementen (<div>, <p>, <ul>, enz.) maar ook op inline-elementen (<span>, <a>, <strong>, enz.).

Voorbeeld van een taalwissel met een block-element:

<p lang="en">
  The quick brown fox jumps over the lazy dog.
</p>

<ul lang="fr">
  <li>
    Langue de la page
  </li>
  <li>
    Langue d’un passage
  </li>
</ul>

Voorbeeld van een taalwissel met een inline-element:

<p>
  In het Verenigd Koninkrijk zeggen ze
  <span lang="en">
    It’s raining cats and dogs
  </span>
  en dat is mooi.
</p>

Markeer taalnamen in een taalkeuzeschakelaar met een lang-attribuut op het <a>-element.

<ul>
  <li>
    <a href="/nl" lang="nl">
      Nederlands
    </a>
  </li>
  <li>
    <a href="/en" lang="en">
      English
    </a>
  </li>
  <li>
    <a href="/fr" lang="fr">
      Français
    </a>
  </li>
</ul>

Vereisten en aanbevelingen voor toegankelijke taal in de code

Dit zijn de vereisten en aanbevelingen voor het correct vastleggen van taal in de code:

WCAG-vereisten

Voeg het lang-attribuut toe aan het <html>-element met een geldige taalcode.
Gebruik alleen taalcodes die voorkomen in de IANA Subtag Registry.
Bevat je pagina meerdere talen? Gebruik dan de taal die het meest voorkomt als waarde voor lang op het <html>-element. Komen twee talen even vaak voor? Dan kies je de taal die het eerst verschijnt.
Markeer anderstalige passages en zinnen met een lang-attribuut op het bijbehorende element.
Eigennamen, technische termen, woorden met onbepaalde taal en ingeburgerde woorden hoef je niet te markeren.

Aanbevolen

Houd taalcodes zo kort mogelijk. Gebruik nl in plaats van nl-NL, tenzij het regionale verschil echt relevant is, bijvoorbeeld voor uitspraakverschillen.
Markeer ook taalnamen in een taalkeuzeschakelaar. Een link met de tekst “Français” krijgt dan lang="fr".

Gerelateerde succescriteria

Dit artikel behandelt twee WCAG-succescriteria:

3.1.1 Taal van de pagina (niveau A)
3.1.2 Taal van onderdelen (niveau AA)