Campus Design System

Appearance

3.1.1 Taal van de pagina niveau A ​

Uitleg ​

Het WCAG-criterium 3.1.1 Taal van de pagina stelt dat de hoofdtaal van de inhoud van een webpagina moet worden aangegeven. Dit is een essentieel criterium voor gebruikers die afhankelijk zijn van screenreaders of andere assistieve technologieën, omdat deze systemen het mogelijk maken om de inhoud correct uit te spreken of te interpreteren. Het correct aangeven van de taal is cruciaal voor de toegankelijkheid, aangezien het zorgt voor een correcte uitspraak, betekenis en interpretatie van tekst.

Wat betekent dit in de praktijk? ​

Het betekent dat bij het creëren van een webpagina, het documenttype moet worden gespecificeerd en de hoofdtaal van de pagina moet worden ingesteld. Dit wordt meestal gedaan via de HTML lang-attribuut.

Voor websites die meertalige inhoud aanbieden, is het belangrijk dat de taal van de pagina wordt aangegeven, zodat assistieve technologieën zoals schermlezers de inhoud in de juiste taal kunnen voorlezen. Dit zorgt ervoor dat de uitspraak en grammaticale structuren correct worden verwerkt.

Voorbeeld van het probleem ​

Een veelvoorkomend probleem is dat websites geen taal attribuut instellen voor de pagina's, waardoor assistieve technologieën niet weten welke taal ze moeten gebruiken voor het lezen van de inhoud. Dit kan leiden tot miscommunicatie of verkeerde uitspraak door screenreaders.

html
<!-- Onjuiste implementatie -->
<html>
  <head>
    <title>Mijn website</title>
  </head>
  <body>
    <h1>Welkom op mijn website</h1>
    <p>Hier is wat tekst.</p>
  </body>
</html>

In dit geval is de taal van de pagina niet aangegeven, wat verwarrend kan zijn voor gebruikers van assistieve technologieën.

Oplossing voor dit probleem ​

De oplossing is eenvoudig: voeg het lang-attribuut toe aan het <html>-element, en specificeer de taal van de pagina. Als de pagina in het Nederlands is geschreven, gebruik dan lang="nl" voor Nederlands, of lang="en" voor Engels.

html
<!-- Correcte implementatie -->
<html lang="nl">
  <head>
    <title>Mijn website</title>
  </head>
  <body>
    <h1>Welkom op mijn website</h1>
    <p>Hier is wat tekst.</p>
  </body>
</html>

Als de pagina in een andere taal is geschreven, vervang je "nl" door de juiste taalcodering volgens de ISO 639-1-norm.

Belangrijke overwegingen ​

  • Meertalige websites: Als je website inhoud in meerdere talen bevat, is het belangrijk om de taal van de verschillende secties van de pagina ook aan te geven. Dit kan worden gedaan door een specifiek lang-attribuut te gebruiken op de relevante HTML-elementen. Bijvoorbeeld, als een deel van de pagina in het Engels is en een ander in het Nederlands, kan dit als volgt worden aangegeven:
html
<p lang="en">This is some English text.</p>
<p lang="nl">Dit is wat tekst in het Nederlands.</p>
  • Correcte taalkeuze: Zorg ervoor dat je de juiste taalcodes gebruikt. De juiste taalcode helpt gebruikers met assistieve technologieën de inhoud correct uit te spreken. Dit kan ook helpen bij vertaaltools en zoekmachines.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: WAVE kan je helpen te controleren of je taalinstellingen correct zijn. WAVE Tool.
  • aXe Accessibility Tool: aXe biedt hulpmiddelen om de toegankelijkheid van je website te testen, inclusief het controleren van de juiste taalinstellingen. aXe Tool.
  • Chrome DevTools: In Chrome kun je de taalinstelling van de pagina inspecteren via de elementen van de pagina in de DevTools.

Voorbeeld van toepassing in een meertalige website ​

Bij een meertalige website kun je de taal per sectie instellen, zodat assistieve technologieën de inhoud correct kunnen verwerken.

html
<html lang="nl">
  <body>
    <h1>Welkom op onze website</h1>
    <p lang="en">Welcome to our website</p>
    <p lang="fr">Bienvenue sur notre site web</p>
  </body>
</html>

Referenties ​