Campus Design System

Appearance

3.1.2 Taal van de onderdelen niveau A ​

Uitleg ​

Het WCAG-criterium 3.1.2 Taal van de inhoud stelt dat de taal van alle inhoud binnen een document (behalve eventuele stukjes tekst die een andere taal vereisen) duidelijk en correct moet worden aangegeven. Dit betekent dat niet alleen de taal van de pagina als geheel (via het lang-attribuut) moet worden gespecificeerd, maar ook de taal van kleinere tekstgedeeltes die mogelijk in een andere taal zijn geschreven, zoals citaten, tekstfragmenten of termen in een andere taal.

Het correct aangeven van de taal helpt gebruikers van assistieve technologieën, zoals schermlezers, om de tekst correct uit te spreken en te interpreteren. Wanneer de taal verandert, kan een schermlezer bijvoorbeeld de uitspraak en intonatie van woorden aanpassen aan de juiste taal, wat cruciaal is voor de nauwkeurigheid en de gebruikerservaring.

Wat betekent dit in de praktijk? ​

Dit criterium vereist dat de taal van de inhoud in een HTML-pagina duidelijk wordt aangegeven, zodat gebruikers die afhankelijk zijn van assistieve technologieën, zoals schermlezers, de juiste uitspraak en grammaticaal correcte structuur kunnen ontvangen. Als je bijvoorbeeld een Engelse tekst hebt die door een Franse zin heen wordt gebroken, moet de taal van de Franse zin worden aangegeven, zodat de technologie weet dat deze tekst in het Frans moet worden uitgesproken.

Voorbeeld van het probleem ​

Stel je voor dat je een pagina hebt met een tekst die in verschillende talen is geschreven, maar zonder dat de taalverschillen goed worden aangegeven. Dit kan leiden tot een verkeerde uitspraak van de tekst door een schermlezer of vertaalhulpmiddelen.

html
<!-- Onjuiste implementatie -->
<p>De technologie is indrukwekkend, and le français is a beautiful language.</p>

In dit voorbeeld wordt de Franse tekst ("le français") niet gemarkeerd, en een schermlezer kan mogelijk de uitspraak van "le français" verkeerd maken omdat het niet weet dat de taal verandert.

Oplossing voor dit probleem ​

Je kunt de taal van specifieke tekstgedeelten aangeven door het lang-attribuut toe te voegen aan de relevante HTML-elementen, bijvoorbeeld als je een Engelse tekst hebt die door een Franse zin heen wordt gebroken. De taal van de Franse zin wordt dan aangegeven met lang="fr".

html
<!-- Correcte implementatie -->
<p>De technologie is indrukwekkend, <span lang="fr">le français</span> is a beautiful language.</p>

In dit geval weet een assistieve technologie zoals een schermlezer dat "le français" in het Frans is en kan het de tekst correct uitspreken.

Belangrijke overwegingen ​

  • Verkeerde taalherkenning: Het is belangrijk om ervoor te zorgen dat de taal van alle tekst correct wordt gemarkeerd. Het niet markeren van de taal kan verwarring veroorzaken en de leeservaring verstoren, vooral voor gebruikers van schermlezers.
  • Korte tekstfragmenten: Als slechts een klein gedeelte van de tekst in een andere taal is geschreven (bijvoorbeeld een citaat of een kort woord), moet je nog steeds het lang-attribuut gebruiken om de taal aan te geven.

Voorbeeld van toepassing ​

Wanneer je een lange tekst hebt waarin meerdere talen worden gebruikt, kun je de verschillende taalcodes in de relevante secties toepassen:

html
<p>
  In dit artikel gaan we in op de volgende onderwerpen: <span lang="en">accessibility</span> en
  <span lang="fr">accessibilité</span>.
</p>

In dit voorbeeld is "accessibility" in het Engels en "accessibilité" in het Frans, en de taal van de specifieke termen wordt correct aangegeven.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: WAVE kan helpen controleren of je de taalinstellingen correct hebt toegepast. Het biedt visuele feedback en toont de taalinstellingen die mogelijk ontbreekt. WAVE Tool.
  • aXe Accessibility Tool: aXe biedt hulpmiddelen om te testen of de taal correct is ingesteld voor de inhoud van de pagina. aXe Tool.
  • Chrome DevTools: Met Chrome DevTools kun je controleren of het lang-attribuut correct is ingesteld en de taal van specifieke tekst correct is aangegeven.

Referenties ​