Tekst

De regel is kort: zet in de HTML wat eerst gelezen moet worden, en gebruik CSS om te bepalen wáár het staat.

Deze drie eigenschappen verplaatsen het beeld zonder de volgorde te veranderen. Ze zijn alle drie nuttig, en worden pas een probleem zodra ze de leesvolgorde omdraaien:

.blok  { order: -1; }
.kaart { grid-row: 1; }
.zij   { position: absolute; top: 0; }

Let ook op CSS-kolommen. Die lezen van boven naar beneden per kolom, niet van links naar rechts. Dat is precies wat je wilt bij lopende tekst, en precies wat je niet wilt bij een lijst met stappen:

.tekst { columns: 2; }

De veilige gewoonte is om eerst zonder opmaak te bouwen. Lees de pagina van boven naar beneden; klopt het verhaal, dan mag de opmaak erop.

Open dit onderwerp op een eigen pagina

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De contrastverhouding voor tekst moet voldoen aan minimaal:

• 4,5:1 voor tekst die kleiner is dan 24px of 18,5px vetgedrukt.
• 3:1 voor tekst die groter is dan 24px of 18,5px vetgedrukt.

Deze contrasteisen gelden ook voor tekst op afbeeldingen.

Open dit onderwerp op een eigen pagina

Verwijs in instructies niet alleen naar zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, locatie, oriëntatie of geluid. Gebruik daarnaast ook tekst.

Schrijf dus niet:

• Gebruik de ronde knop om je gegevens te verzenden. (vorm)
• Op de dagen met een groen bolletje zijn wij beschikbaar. (kleur)
• Klik op de knop rechts onderaan de pagina om naar de volgende pagina te gaan. (locatie)

Maar zeg wel:

• Gebruik de (ronde, groene) knop (onderaan) met tekst “Verzenden” om je gegevens te in te sturen.

Instructies waarin alleen zintuiglijke eigenschappen worden gebruikt zijn niet door alle bezoekers goed te volgen. Zo kunnen bezoekers die blind of slechtziend zijn vorm, omvang of locatie niet waarnemen. Instructies waarin alleen geluid wordt gebruikt zijn niet, of niet goed, te volgen voor bezoekers die doof of slechthorend zijn.

Open dit onderwerp op een eigen pagina

Koppen moeten het onderwerp of doel van de onderliggende tekst beschrijven. Koppen helpen mensen om snel te begrijpen waar een webpagina of document over gaat. Gebruik daarom verschillende kopniveaus om de content goed te structuren.

Zorg dat elke kop iets zegt over de tekst die eronder staat, zodat de koppen de onderliggende content goed beschrijven. Dit helpt iedereen om een tekst beter te begrijpen, en alle koppen samen horen een goed beeld te geven van de hele content. Een kop moet dus ook altijd content hebben.

Mensen die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de webpagina te navigeren.

Open dit onderwerp op een eigen pagina

Zoomen werkt in elke browser, ook als maten in pixels zijn opgeschreven. De instelling voor de standaard tekstgrootte werkt echter alleen met relatieve eenheden — en dat is de instelling die bezoekers één keer aanzetten en daarna vergeten.

/* volgt de instelling van de bezoeker niet */
body { font-size: 16px; }

/* volgt hem wel */
body { font-size: 1rem; }
h2   { font-size: 1.6rem; }

Laat ook maten meegroeien met de tekst. Gebruik een minimumhoogte in plaats van een vaste hoogte, en geef de leesbreedte op in tekens:

.knop {
  padding: 0.7em 1.4em;
  min-block-size: 2.75rem;   /* geen height */
}

p { max-inline-size: 68ch; }

em rekent met de tekstgrootte van het onderdeel zelf, rem met die van de pagina. Voor ruimte binnen een knop is em handig, voor alles daarbuiten rem.

Open dit onderwerp op een eigen pagina

Voorleessoftware kan tekst omzetten in spraak. Als de taal niet, of op een verkeerde manier, is aangegeven in de code, dan kan de voorleessoftware de tekst niet duidelijk voorlezen.

Als een zin of paragraaf in de content in een andere taal dan de standaard taal is geschreven, dan moet dit worden aangegeven in de code. Zo kan software de taal van de webpagina bepalen. Deze verplichting geldt alleen voor zinnen en paragrafen, dus niet voor losse woorden.

Een taalwissel voor onderdelen van een webpagina wordt ingesteld met het lang-attribuut in het element die een andere taal heeft dan de hoofdtaal van de website. Het lang-attribuut kan worden gebruikt op blok-elementen (<​​div​>, <​​p​>, <​​table​>, enz.) maar ook op inline-elementen (<​​span​>, <​​a​>, <​​strong​>, enz.).

In de code ziet dat er zo uit:

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

<p lang="en">In Dutch we say <span lang="nl">Pa's wijze lynx bezag vroom het fikse aquaduct</span>.</p>

Elke taal heeft zijn eigen code. Voor Nederlands is dat ‘nl‘ (lang="nl"), voor Engels ‘en‘ (lang="en"), en voor Duits ‘de‘ (lang="de").

Open dit onderwerp op een eigen pagina

Voorleessoftware kan tekst omzetten in spraak. Als de taal niet, of op een verkeerde manier, is aangegeven in de code, dan kan de voorleessoftware de tekst niet duidelijk voorlezen.

Stel de standaardtaal van een website in. Dit helpt software om de taal van de content te bepalen.

De taal van een website wordt ingesteld met het lang-attribuut in het <​​html​>-element.

In de code ziet dat er zo uit:

<html lang="nl">
...
</html>

Elke taal heeft zijn eigen code. Voor Nederlands is dat ‘nl‘ (lang="nl"), voor Engels ‘en‘ (lang="en"), en voor Duits ‘de‘ (lang="de").

Open dit onderwerp op een eigen pagina

Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. Dit kan bijvoorbeeld door het verbergen van een deel van de linktekst met CSS.

In de code zit dat er zo uit:

<a href="info.html">Lees meer <span class="sr-only"> over digitale toegankelijkheid</span></a>

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

De linktekst kan eventueel in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

In de code ziet dat er zo uit:

<a href="info.html" aria-label="Lees meer over digitale toegankelijkheid">Lees meer</a>

<a href="info.html" title="Lees meer over digitale toegankelijkheid">Lees meer</a>

Open dit onderwerp op een eigen pagina

Onderdelen die hetzelfde doen horen overal dezelfde naam te krijgen. Dat geldt voor de zichtbare tekst en voor het alternatief van een pictogram. Heet dezelfde knop op de ene pagina “Zoeken”, op de andere “Zoek”, en staat er elders alleen een vergrootglas zonder tekst, dan is dat voor wie kijkt één ding en voor wie luistert drie.

Waar het vaak misgaat:

• Een pictogram zonder tekst, met per pagina een ander alternatief: “zoeken”, “zoek”, “vergrootglas”.
• Downloadlinks: “Download pdf”, “Pdf downloaden”, “Bekijk het rapport” — voor hetzelfde bestand.
• De knop die een formulier verstuurt: “Versturen”, “Verzenden”, “Aanvragen”, “Ok”.
• Een sluitkruisje dat de ene keer “Sluiten” heet en de andere keer “Annuleren”.

Dit telt het zwaarst bij spraakbediening. Wie zijn computer met zijn stem bedient zegt “klik Zoeken”. Heet de knop op die pagina “Zoek”, dan gebeurt er niets.

Open dit onderwerp op een eigen pagina

Webpagina’s moeten een titel hebben die het onderwerp of doel van de pagina beschrijft. Met een goede paginatitel kunnen gebruikers een pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

De paginatitel wordt ook gebruikt door mensen die een schermlezer gebruiken om snel een idee van de inhoud van de pagina te krijgen.

Een paginatitel voor een webpagina wordt gegeven met het <​​title>-element in het <​​head>-element. In het <​​title>-element moet altijd tekst staan.

In de code ziet dat er zo uit:

<html lang="nl">
  <head>
    <title>WCAG.nl - Digitale toegankelijkheid voor iedereen</title>
    ...

Open dit onderwerp op een eigen pagina

Voor deze test is geen schermlezer nodig. Zet de opmaak uit en lees wat er staat.

Plak dit in de console van de browser. Alle stijlen gaan uit en de pagina komt in de volgorde van de code te staan:

document.querySelectorAll('style, link[rel=stylesheet]')
  .forEach(function (el) { el.disabled = true; });

Waar je op let:

• Lees van boven naar beneden. Klopt de volgorde met wat je gewend bent?
• Staan koppen boven de tekst waar ze bij horen?
• Komt bij een kaart eerst de naam en dan de prijs, of andersom?
• Staat een bijschrift onder de juiste afbeelding?
• Komt het menu vóór de inhoud, en de voettekst erna?

De tweede test is het venster versmallen tot 320 pixels. Alles komt dan onder elkaar te staan, in de volgorde van de code. Springt er iets naar een onverwachte plek, dan is de fout gevonden — en meteen ook een afwijking op 1.4.10.

Ververs de pagina om de stijlen terug te krijgen.

Open dit onderwerp op een eigen pagina

Dit is geen technisch probleem. Het ontstaat doordat verschillende mensen op verschillende momenten een knop een naam geven. De oplossing is een afspraak.

Maak een lijst met de tien tot twintig onderdelen die overal terugkomen, en spreek per stuk één naam af:

Zoeken            (niet: Zoek, Vind, Search)
Versturen         (niet: Verzenden, Ok, Aanvragen)
Sluiten           (niet: Annuleren, Terug, X)
Download pdf      (niet: Pdf downloaden, Bekijk pdf)
Neem contact op   (niet: Contact, Mail ons)

Een pictogram zonder tekst heeft een naam nodig die niet zichtbaar is. Gebruik overal dezelfde:

<button aria-label="Zoeken">
  <svg aria-hidden="true">…</svg>
</button>

Staat er wel tekst naast het pictogram, dan is die tekst de naam. Zet het pictogram dan op aria-hidden, anders wordt de naam twee keer voorgelezen.

Open dit onderwerp op een eigen pagina

Er zijn drie regels CSS die dit criterium breken. Wie die opzoekt is er bijna.

Een vaste hoogte knipt de tekst af zodra hij meer ruimte nodig heeft:

/* knipt af */
.knop { height: 40px; }

/* groeit mee */
.knop { min-block-size: 40px; }

Een vaste hoogte met een verborgen overloop is de gevaarlijkste combinatie, want er is niet te zien dát er iets weg is:

.kaart { height: 220px; overflow: hidden; }

Haal de vaste hoogte weg, dan mag de verborgen overloop blijven staan.

Een afgeknipt aantal regels mag, zolang de hele tekst ergens anders wel te lezen is:

.samenvatting { -webkit-line-clamp: 3; }

De veilige basis is dat tekstdragende onderdelen hun hoogte zelf bepalen:

.wp-block-group, .wp-block-column,
p, li, h1, h2, h3, h4, button, a {
  block-size: auto;
  overflow-wrap: break-word;
}

Open dit onderwerp op een eigen pagina

Je zoekt onderdelen die hetzelfde doen maar anders heten. Die vind je door de namen naast elkaar te leggen.

Haal de namen op met dit script in de console:

[...document.querySelectorAll('button, a, [role=button]')]
  .map(function (el) {
    return (el.getAttribute('aria-label') || el.textContent).trim();
  })
  .filter(Boolean)
  .forEach(function (n) { console.log(n); });

Doe dit op vijf verschillende pagina’s en zet de uitkomsten onder elkaar in een tekstbestand.

Waar je op let:

• Varianten van hetzelfde woord: zoeken, zoek, search.
• Knoppen die hetzelfde doen maar anders heten.
• Pictogrammen zonder naam. Die komen als lege regel terug.
• Namen die twee keer voorkomen maar iets anders doen. Dat is de omgekeerde fout.

Open dit onderwerp op een eigen pagina

In een pdf speelt hetzelfde als op een website, maar met een eigen oorzaak. Een tweekolomsopmaak leest voor het oog van linksboven naar linksonder. Een schermlezer volgt de tagboom. Staat daar de eerste regel links, dan de eerste regel rechts, dan hoort de lezer twee verhalen door elkaar.

Waar dat vandaan komt:

• Tekstvakken in Word. Die belanden vaak achteraan of op een willekeurige plek.
• Kolommen die met tabs zijn gemaakt in plaats van met een kolomindeling.
• Een document dat is afgedrukt naar pdf. Dan is er geen structuur, alleen plaatsing.
• Automatisch taggen in Acrobat, dat bij kolommen vaak misgokt.

In Acrobat zijn er twee panelen die over volgorde gaan. Het tagpaneel is leidend: de volgorde van de tags is de volgorde waarin wordt voorgelezen. Het leesvolgordepaneel onder Toegankelijkheid toont genummerde blokken en is handig om snel te controleren, maar bij twijfel geldt het tagpaneel.

De echte oplossing zit in het bronbestand. Gebruik in Word een echte kolomindeling in plaats van tekstvakken, en zet afbeeldingen in de tekstregel in plaats van zwevend. Dan klopt de volgorde vanzelf.

Open dit onderwerp op een eigen pagina

Er is geen extensie nodig. Plak dit in de console van de browser en de pagina staat meteen op de waarden uit de eis:

var s = document.createElement('style');
s.textContent = '* {' +
  'line-height: 1.5 !important;' +
  'letter-spacing: 0.12em !important;' +
  'word-spacing: 0.16em !important; }' +
  'p { margin-bottom: 2em !important; }';
document.head.appendChild(s);

Waar je op let:

• Tekst die uit een knop loopt of erin verdwijnt.
• Kaarten waarvan de laatste regel is afgeknipt. Vergelijk met de kaart ernaast.
• Overlappende regels, bijna altijd door een vaste hoogte op de omhullende laag.
• Een menu dat niet meer past en over de inhoud valt.
• Tabellen waarvan een cel zijn buurcel induwt.

Ververs de pagina om de eigen stijl terug te krijgen.

Open dit onderwerp op een eigen pagina

Deze test kost een minuut per pagina en vindt de meeste fouten.

Ga als volgt te werk:

• Druk vier keer op Ctrl en de plus-toets (op een Mac Command en plus). Je zit dan op 200%.
• Lees de pagina van boven naar beneden.
• Bedien alles: open het menu, vul een formulier in, druk op een knop.

Doe daarna de tweede test, die vaker wordt overgeslagen: zet in de browserinstellingen de standaard tekstgrootte op zeer groot en laat de zoom op 100%. Dat is een andere instelling en legt andere fouten bloot, vooral tekstgroottes die in pixels vastliggen.

Waar je op let:

• Tekst die uit een knop of kader loopt.
• Twee stukken tekst die over elkaar heen vallen.
• Een knop of link die buiten beeld schuift.
• Een menu dat niet meer opengaat of het hele scherm vult.
• Tekst in een afbeelding die wazig wordt in plaats van groter.

Open dit onderwerp op een eigen pagina

Een schermlezer leest een pagina voor in de volgorde van de code, van de eerste regel naar de laatste. Op het scherm staat alles tegelijk, maar wie de pagina hoort of met een vergroting strook voor strook afleest, krijgt hem als een rij. Zorg daarom dat de volgorde in de code overeenkomt met de volgorde waarin de pagina gelezen moet worden.

Een veelvoorkomend voorbeeld is een prijskaart met de prijs boven de naam, terwijl in de code de prijs eerst staat. Op het scherm staat er “Basispakket — 39 euro”. De schermlezer leest “39 euro. Basispakket.” Bij één kaart is dat te volgen, bij vijf kaarten naast elkaar niet meer.

Wie hier tegenaan loopt:

• Bezoekers die blind zijn en de pagina horen in plaats van zien.
• Bezoekers die een schermvergroting gebruiken en de pagina strook voor strook afleiden.
• Bezoekers die de pagina laten voorlezen omdat lezen moeite kost.
• Iedereen op een smal scherm, want dan komt alles onder elkaar te staan in de volgorde van de code.

Open dit onderwerp op een eigen pagina

Koppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een grotere lettergrootte, vetgedrukte tekst, of een andere kleur tekst. Deze betekenis moet ook in de code worden toegevoegd, zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een kop en ook de functie heeft van een kop wordt opgemaakt met een kop-element.

Zorg voor een passend kopniveau. Alle koppen samen moeten een goed beeld geven van de inhoud van de webpagina.

Bezoekers die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de pagina te navigeren. Zij kunnen eventueel ook gelijk springen naar de volgende kop.

Zorg dat koppen worden opgemaakt met een HTML kop-element (<​h1> t/m <​h6>).

Zorg ook dat de volgorde van de koppen en tussenkoppen logisch is. Een paar vuistregels zijn:

• De eerste kop op de pagina hoort een kop van het eerste niveau te zijn.
• Na een kop van het eerste niveau hoort een kop van het tweede niveau te volgen.
• Na een kop van het tweede niveau hoort opnieuw een kop van het tweede niveau volgen óf een kop van het derde niveau.
• Kopniveaus horen niet te worden overgeslagen.

<h1>Kop van het eerste niveau</h1>
<h2>Tussenkop van het tweede niveau</h2>
<p>...</p>
<h2>Tussenkop van het tweede niveau</h2>
<p>...</p>

<h2>Tussenkop van het tweede niveau</h2>
<p>...</p>
<h3>Tussenkop van het derde niveau</h3>
<p>...</p>

Open dit onderwerp op een eigen pagina

Lijsten zijn vaak te herkennen aan een opsommingsteken of een nummer voor het lijstonderdeel. Mensen die de tekst kunnen zien, herkennen hieraan meteen wat de lijsten zijn maar dit soort vormgeving moet niet de enige manier zijn waarop dit wordt overgebracht.

De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een lijst en ook de functie heeft van een lijst wordt opgemaakt met een passend lijst-element.

Er zijn verschillende soorten lijsten:

• een opsomming (<ul>)
• een genummerde lijst (<ol>)
• en een lijst met beschrijvingen (<dl>).

Opsomming

Onderdelen in een opsomming worden voorafgegaan door een opsommingsteken zoals een bolletje of een streepje. Gebruik opsommingen als de volgorde van de onderdelen in de lijst niet belangrijk is.

In de code ziet dat er zo uit:

<ul>
  <li>Eerste onderdeel van een opsomming</li>
  <li>Tweede onderdeel van een opsomming</li>
  ...
</ul>

Genummerde lijst

Onderdelen in een genummerde lijst worden voorafgegaan door een nummer. Gebruik genummerde lijsten als de volgorde van onderdelen in de lijst wél belangrijk is.

In de code ziet dat er zo uit:

<ol>
  <li>Eerste onderdeel van een genummerde lijst</li>
  <li>Tweede onderdeel van een genummerde lijst</li>
  ...
</ol>

Lijst met beschrijvingen

Gebruik een lijst met beschrijvingen bij lijsten die bestaan uit een naam, term of begrip met een beschrijving die daar bij hoort. Gebruik deze lijsten bijvoorbeeld voor een verklarende woordenlijst. Binnen een lijst met beschrijvingen wordt het <​dt​>-element gebruikt om een term aan te geven en wordt het <​dd​>-element om de beschrijving aan te geven.

In de code ziet dat er zo uit:

<dl>
  <dt>conformiteit</dt>
  <dd>voldoen aan alle eisen van een gegeven standaard, richtlijn of specificatie</dd>
  <dt>content (webcontent)</dt>
  <dd>informatie en zintuiglijke ervaring die aan de gebruiker doorgegeven wordt door middel van een user agent, met inbegrip van code of opmaak die de structuur, presentatie en interacties van de content definieert</dd>
</dl>

Open dit onderwerp op een eigen pagina

Tabellen bestaan uit rijen en kolommen. Tabelkoppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een andere achtergrond of vetgedrukte tekst. Individuele cellen worden vaak onderscheiden door een rand of een wisselende rijkleur. Mensen die de tabel kunnen zien, kunnen deze relaties vaak snel herkennen maar dit soort vormgeving moet niet de enige manier zijn waarop de structuur en relaties worden overgebracht.

De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Dit is handig voor mensen die gebruik maken van hulptechnologieën. Zorg daarom dat alle tabellen worden opgemaakt met een tabel-element en dat tabelkoppen worden opgemaakt met een tabelkop-element. Hiermee wordt dan vastgelegd welke cellen koppen zijn en in welke cellen gegevens staan en wat de onderlinge relaties tussen de cellen zijn.

In de code ziet dat er zo uit:

<table>
  <tr>
    <th>Kop van de eerste kolom</th>
    <th>Kop van de tweede kolom</th>
    <th>Kop van de derde kolom</th>
  </tr>
  <tr>
    <td>Gegevens in de eerste kolom</td>
    <td>Gegevens in de tweede kolom</td>
    <td>Gegevens in de derde kolom</td>
  </tr>
  ...
</table>

Geef de tabel ook een korte beschrijving. Deze beschrijving wordt in de code vastgelegd met een <​caption​>-element. Een goede beschrijving helpt bezoekers om een tabel te vinden en te begrijpen waar de tabel over gaat.

In de code ziet dat er zo uit:

<table>
  <caption>Beschrijving van de tabel</caption>
  <tr>
    <th>Kop van de eerste kolom</th>
    ...
</table>

Open dit onderwerp op een eigen pagina

Mensen met dyslexie lezen sneller als er meer ruimte tussen de regels en de letters staat. Er zijn browserextensies die die ruimte op elke site instellen. Zorg daarom dat je tekst leesbaar blijft als een bezoeker die ruimte ruimer zet.

De tekst moet het uithouden bij deze vier waarden:

• Regelafstand 1,5 keer de tekstgrootte.
• Ruimte tussen alinea’s 2 keer de tekstgrootte.
• Letterafstand 0,12 keer de tekstgrootte.
• Woordafstand 0,16 keer de tekstgrootte.

Je hoeft die waarden niet zelf te gebruiken. De eis is dat de pagina eraan kan als een bezoeker ze instelt.

Open dit onderwerp op een eigen pagina

Tekst moet tot 200% vergroot kunnen worden zonder dat er inhoud of functies verdwijnen. Dat moet lukken zonder hulpmiddelen: een vergrotingsprogramma telt niet mee, het moet werken met wat de browser zelf biedt. Veel mensen vergroten tekst zonder zichzelf slechtziend te noemen.

Waar het misgaat:

• Tekst in een afbeelding. Die wordt wazig in plaats van groter; dat valt ook onder 1.4.5.
• Vaste hoogtes. De tekst groeit, de knop niet, en de onderste regel verdwijnt.
• Tekstgroottes in pixels die de browserinstelling negeren.
• Een menu dat op 200% over de inhoud valt of niet meer opengaat.

Open dit onderwerp op een eigen pagina