8. Begrijpelijk
Met deze richtlijn wordt vooral de gekozen taal bedoeld, zowel voor pagina's als voor tekstfragmenten. Door in de code aan te geven welke taal gebruikt wordt zijn teksten ook begrijpelijk voor zoekmachines en gebruikers van screenreaders.
8.1 Taal van de pagina
Omschrijving
De taal van de pagina moet in de HTML-code aangegeven zijn. In ons geval is dat meestal Nederlands.
Succescriterium
- 3.1.1 Taal van de pagina
Toepassen
Op een pagina die in het Nederlands is, staat dit bovenaan de pagina aangegeven met deze code:
<html lang="nl">8.2 Taal van tekstfragmenten
Omschrijving
Als er in een Nederlandse zin een aantal woorden in het Engels staan, dan moet dat ook in de HTML-code worden aangegeven. Dit is belangrijk voor gebruikers van screenreaders, want dan wordt het ook in de juiste uitspraak opgelezen. Ook voor zoekmachines is dit belangrijk, want zij weten dan hoe de tekst geïndexeerd moet worden.
Succescriterium
- 3.1.2 Taal van onderdelen
Toepassen
Heb je 2 of meer woorden in een andere taal dan de taal van de pagina, geef dit aan met het lang-attribuut. Bijvoorbeeld:
<p>Met de leuze <span lang="en">In Search of Excellence</span> probeert deze site zich te onderscheiden van haar concurrentie.</p>Deze lang-tag is vaak niet nodig. Ze is niet nodig in deze situaties:
- Er is slechts 1 woord in een andere taal, bijvoorbeeld:
Deze mogelijkheid is een nieuwe feature van het CMS.
- De tekst is een naam, bijvoorbeeld:
Het project In Search of Excellence gaat op 3 april van start.
Een moeilijke situatie is bijvoorbeeld als je een Engelstalige pagina hebt in een Nederlandse site. In veel gevallen zijn dan het menu en andere onderdelen in het Nederlands, en is de primaire content in het Engels. Zie het voorbeeld hieronder.
Dat kan je dan bijvoorbeeld als volgt oplossen:
- Kies als basistaal Nederlands.
- Plaats om de content die in het Engels is een zogenaamde div, en geef deze het lang-attribuut 'en':
<div lang="en"> <h1>English</h1> [alle Engelstalige content] </div>
8.3 Afkortingen
Er is nogal wat verwarring over hoe we nu afkortingen op een toegankelijke manier kunnen aanbieden. In het algemeen hoef je niets extra's te doen voor toegankelijkheid. Meestal kun je dit tekstueel uitstekend oplossen. Het element <abbr> is in ieder geval geen goede oplossing om afkortingen uit te leggen. Gebruik in situaties waar dat nodig is <aria-label>.
Succescriterium
Succescriterium 3.1.4 Afkortingen: Er is een mechanisme beschikbaar voor de identificatie van de voluit geschreven vorm of betekenis van afkortingen. (Niveau AAA)
Gebruik geen <abbr> en het title-attribuut
Het W3C geeft aan dat voor het uitleggen van afkortingen het element <abbr> het beste gebruikt kan worden, maar dat is niet zo.
Het abbr-element wordt standaard niet opgelezen. In JAWS is dit bijvoorbeeld een functie die aangezet moet worden. En omdat veel sites op een verkeerde manier omgaan met dit element staat de functie vaak niet aan.
Bij een abbr wordt de uitschreven tekst van de afkorting geplaatst in het title-attribuut, dus bijvoorbeeld
<p>12 <abbr title=”september”>sep</abbr> 2024
Voor mensen die de muis niet kunnen gebruiken is het title-attribuut ook niet handig, omdat deze dan niet standaard wordt getoond. Zie ook de waarschuwing van het W3C zelf.
Vaak is extra uitleg in de code niet nodig
Als vuistregel kun je aanhouden dat een afkorting die genoemd staat op de site Woordenlijst.nl ook als afkorting wordt opgelezen. Het schrijven in hoofdletters kan ook zorgen dat schermlezers beter zien dat dit een afkorting is.
Deze zin is bijvoorbeeld uitstekend zonder enige extra code:
De toetreding van Finland tot de NAVO was bijzonder.
Afkortingen die mogelijk niet bekend zijn bij de lezer kun je beter altijd uitschrijven en dan de afkorting erbij melden. Dat kan bijvoorbeeld zo:
De Militaire inlichtingen en veiligheid dienst (MIVD) was als eerste bekend met de sabotage.
Zo kan ook:
De MIVD (Militaire inlichtingen en veiligheid dienst) was als eerste bekend met de sabotage.
Dit is niet goed:
De <abbr title=”Militaire inlichtingen en veiligheid dienst”>MIVD</abbr> was als eerste bekend met de sabotage.
Gebruik aria-label als uitleg nodig is
Gebruik aria-label in situaties waarin je met tekst geen goede oplossing kunt bieden. Bijvoorbeeld
‘12 sep 2025’ zal niet opgelezen worden als ‘12 september 2025’.
Door aria-label te gebruiken gaat dit wel goed:
<p>12 <span aria-label=”september”>sep</span> 2024
Nog een voorbeeld, in dit geval een afkorting voor de dagen van de week.
De tekst:
ma t/m vr
kan gecodeerd worden als:
<span aria-label=”maandag”>ma <span aria-label=”tot en met”>t/m</span> <span aria-label=”vrijdag”>vr</span>
De schermlezer geeft dan de volgende tekst:
maandag tot en met vrijdag
Doe dit alleen als de afkorting voor ziende mensen wel duidelijk is. En zorg dat de tekst voor schermlezers niet overbodig is.
Overbodig en niet goed is bijvoorbeeld:
De <span aria-label=”Noord-Atlantische Verdragsorganisatie”>NAVO</span> is in 2023 uitgebreid met Finland en Zweden.
Hier hoef je geen uitleg te geven bij de afkorting NAVO, omdat de betekenis voor de meeste mensen duidelijk zal zijn.
8.4 Tekens die schermlezers niet oplezen
- ~ (tilde)
- ‘ (backtick)
- ! (exclamation mark)
- ¡ (inverted exclamation mark, written as ¡)
- ( (left parenthesis)
- ) (right parenthesis)
- – (dash)
- — (m dash, written as —)
- – (n dash, written as –)
- _ (underscore)
- , (comma)
- . (period)
- ... (pseudo ellipses, three periods)
- … (ellipsis, written as …)
- \ (backslash)
- | (vertical bar)
- ? (question mark)
- ¿ (inverted question mark, written as ¿)
- ; (semi-colon)
- : (colon)
- ” (quotation mark)
- " (quotation mark, written as ")
- “ (left double quotation mark, written as “)
- ” (right double quotation mark, written as ”)
- « (left double angle bracket, written as «)
- » (right double angle bracket, written as »)
- ‹ (left single angle bracket, written as ‹)
- › (right single angle bracket, written as ›)
- ‘ (single quote, or apostrophe)
- ’ (right single quote, written as ’)
- ‘ (left single quote, written as ‘)
- { (left brace)
- } (right brace)
- [ (left bracket)
- ] (right bracket)
- § (section, written as §)
- ¶ (paragraph, written as ¶)
- · (small bullet, written as ·)
- ⇔ (horizontal double arrow, written as ⇔)
- µ (microns, written as µ)