Inhoudsopgave

Een bezoeker die een screenreader gebruikt, hoort de content van een pagina in de volgorde waarin die in de HTML staat. Die volgorde komt overeen met wat een ziende bezoeker op het scherm ziet. Zo begrijpt iedereen welke informatie bij welk onderdeel hoort, ongeacht hoe iemand de pagina gebruikt.

CSS kan elementen visueel verplaatsen zonder de HTML-volgorde te veranderen. Een datum die visueel bij een evenement hoort maar in de code erboven staat, wordt voorgelezen als onderdeel van het vorige evenement. Een navigatieknop die visueel na de content staat, maar in de code ervoor, wordt voorgelezen voordat de bezoeker weet wat de content is. De leesvolgorde mag afwijken van de visuele volgorde, maar de betekenis moet hetzelfde blijven.

Veelgemaakte fouten

Metadata staat boven de kop van een artikel

Alle inhoud die onder een kop staat, hoort bij die kop. Bezoekers die een screenreader gebruiken, navigeren van kop naar kop om de structuur van een pagina te begrijpen. Staat informatie zoals een datum of categorie boven de kop in de HTML, dan lijkt die informatie bij het vorige artikel te horen.

Hoe te testen: inspecteer de HTML-volgorde in de DevTools. Staat de kop bovenaan in elk artikel, gevolgd door metadata en inhoud?

<article>
  <span class="datum">15 maart 2026</span>
  <span class="categorie">Workshops</span>
  <h3>Toegankelijkheid voor developers</h3>
  <p>Leer hoe je toegankelijke componenten bouwt.</p>
</article>

<article>
  <h3>Toegankelijkheid voor developers</h3>
  <span class="datum">15 maart 2026</span>
  <span class="categorie">Workshops</span>
  <p>Leer hoe je toegankelijke componenten bouwt.</p>
</article>

Wie kan dit oplossen: een developer past de HTML-volgorde aan.

Kolommen waarvan de inhoud door elkaar loopt

Een pagina met twee kolommen groepeert de afbeelding en de beschrijving per kolom. De HTML bevat niet de afbeelding en de beschrijving, maar eerst alle afbeeldingen en daarna alle beschrijvingen. Dan begrijpt een screenreadergebruiker niet welke beschrijving bij welke afbeelding hoort.

Hoe te testen: schakel CSS uit in de browser (Firefox: View > Page Style > No Style). Staat de informatie die bij elkaar hoort ook bij elkaar in de HTML?

<div class="kolommen">
  <img src="project-a.jpg" alt="Screenshot van Project A" />
  <img src="project-b.jpg" alt="Screenshot van Project B" />
  <p>Project A is een webapplicatie voor gemeenten.</p>
  <p>Project B is een designsysteem voor de overheid.</p>
</div>

<div class="kolommen">
  <div class="kolom">
    <img src="project-a.jpg" alt="Screenshot van Project A" />
    <p>Project A is een webapplicatie voor gemeenten.</p>
  </div>
  <div class="kolom">
    <img src="project-b.jpg" alt="Screenshot van Project B" />
    <p>Project B is een designsysteem voor de overheid.</p>
  </div>
</div>

Wie kan dit oplossen: een developer groepeert de content per kolom in de HTML.

Visuele volgorde wijkt af van de code door CSS

Met CSS Grid en Flexbox kun je elementen visueel herschikken zonder de HTML aan te passen. Een screenreader volgt de HTML-volgorde, niet de visuele volgorde. Als de volgorde betekenis heeft, pas je de HTML aan in plaats van CSS order te gebruiken.

Hoe te testen: zoek in de CSS naar order, flex-direction: row-reverse, flex-direction: column-reverse en grid-row/grid-column. Controleer of de HTML-volgorde logisch blijft.

<div class="stappen">
  <div style="order: 2;">Stap 2: Kies een template</div>
  <div style="order: 3;">Stap 3: Publiceer</div>
  <div style="order: 1;">Stap 1: Maak een account</div>
</div>

Een screenreader leest hier: “Stap 2”, “Stap 3”, “Stap 1”.

<div class="stappen">
  <div>Stap 1: Maak een account</div>
  <div>Stap 2: Kies een template</div>
  <div>Stap 3: Publiceer</div>
</div>

Wie kan dit oplossen: een developer past de HTML-volgorde aan zodat die overeenkomt met de betekenisvolle volgorde.

Tabelgegevens die los van elkaar worden voorgelezen

Een tabel koppelt gegevens aan elkaar: een dag aan een openingstijd, een naam aan een functie. Een correcte <table> met <tr>, <th> en <td> behoudt die koppeling. Een tabel nagebouwd met <div>-elementen en CSS kan ertoe leiden dat een screenreader eerst alle dagen voorleest en daarna pas alle tijden.

Hoe te testen: gebruik de Web Developer-extensie (tab Miscellaneous > Linearize Page) om de tabel te lineariseren. Klopt de koppeling tussen de gegevens nog?

<table>
  <tr>
    <th>Dag</th>
    <th>Openingstijden</th>
  </tr>
  <tr>
    <td>Maandag</td>
    <td>09:00 - 17:00</td>
  </tr>
  <tr>
    <td>Dinsdag</td>
    <td>09:00 - 17:00</td>
  </tr>
</table>

Wie kan dit oplossen: een developer bouwt de tabel met correcte HTML-elementen.

Navigatieknoppen in een carrousel staan voor de inhoud

De inhoud van een carrousel is belangrijk voor de bezoeker. Staan de vorige- en volgende-knoppen boven de slides in de HTML, dan leest een screenreader eerst “vorige”, “volgende” en daarna pas de inhoud. De bezoeker weet dan nog niet wat de slides bevatten.

Hoe te testen: inspecteer de HTML-volgorde in de DevTools. Staat de slide-content voor de navigatieknoppen?

<div class="carrousel">
  <button>Vorige</button>
  <button>Volgende</button>
  <div class="slide">Slide 1: Onze diensten</div>
</div>

<div class="carrousel">
  <div class="slide">Slide 1: Onze diensten</div>
  <button>Vorige</button>
  <button>Volgende</button>
</div>

Wie kan dit oplossen: een developer past de HTML-volgorde aan.

Grafiek of diagram wordt in een onlogische volgorde voorgelezen

SVG-elementen die tekst bevatten, worden voorgelezen in de volgorde waarin ze in de code staan. Dat kan betekenen: eerst de waarden van de X-as, dan de Y-as als losse getallen, en pas daarna de uitleg van de assen. Bied bij complexe grafieken een tekstueel alternatief aan, zoals een tabel met dezelfde data.

Hoe te testen: navigeer met een screenreader door de grafiek. Is de volgorde begrijpelijk? Zo niet, controleer of er een alternatief zoals een tabel beschikbaar is.

Wie kan dit oplossen: een developer voegt een tekstueel alternatief toe, bijvoorbeeld een tabel.

Uitklapbare content verschijnt op de verkeerde plek

Content die verschijnt na interactie staat direct na het element dat de content opent. Bij een Accordion staat de inhoud van een paneel direct na de knop die het paneel opent. Bij Tabs staat de inhoud van het actieve tabpaneel direct na de tablijst. Staat de content ergens anders in de HTML, dan leest een screenreader die op een onverwacht moment voor.

Hoe te testen: open een accordion, tabpaneel of ander uitklapbaar element. Inspecteer de HTML-volgorde in de DevTools. Staat de content direct na de bijbehorende trigger?

<div class="accordion">
  <h3>
    <button aria-expanded="true" aria-controls="paneel-1">
      Veelgestelde vragen
    </button>
  </h3>
  <div id="paneel-1">
    <p>Hier staat het antwoord dat direct na de knop wordt voorgelezen.</p>
  </div>
</div>

Wie kan dit oplossen: een developer plaatst de content direct na de trigger in de HTML.

Dialoogvenster laat de achterliggende pagina voorlezen

Een dialoogvenster dat de pagina bedekt, beperkt de screenreader tot de inhoud van dat venster. De achterliggende pagina wordt niet voorgelezen zolang het venster open is. Bij sluiten keert de focus terug naar het element dat het venster opende.

Hoe te testen: open het dialoogvenster en navigeer met een screenreader. Kun je content achter het venster bereiken? Zo ja, dan is het venster niet goed afgeschermd.

<dialog aria-modal="true" aria-label="Bevestig verwijdering">
  <h2>Weet je het zeker?</h2>
  <p>Dit item wordt permanent verwijderd.</p>
  <button>Annuleren</button>
  <button>Verwijderen</button>
</dialog>

Gebruik het <dialog>-element met aria-modal="true", of beheer de focus handmatig en gebruik aria-hidden="true" op de achterliggende content.

Wie kan dit oplossen: een developer implementeert het dialoogvenster met het <dialog>-element of met correcte focus- en ARIA-afhandeling.

Verborgen content wordt toch voorgelezen

Een mobiel menu dat visueel verborgen is, is ook verborgen voor screenreaders. Verberg het met display: none of visibility: hidden. Gebruik niet alleen opacity: 0 of een negatieve positie, want dan vindt een screenreader het menu alsnog.

Hoe te testen: navigeer met een screenreader door de pagina. Hoor je content die niet op het scherm zichtbaar is?

<nav class="mobiel-menu" style="opacity: 0; position: absolute; left: -9999px;">
  <!-- screenreader vindt dit alsnog -->
</nav>

<nav class="mobiel-menu" style="display: none;">
  <!-- ... -->
</nav>

Wie kan dit oplossen: een developer past de manier van verbergen aan.

Demo lees- en focusvolgorde in de screenreader VoiceOver

Bekijk

Hoe te testen

Voor iedereen

1. Lees de pagina van boven naar beneden zonder naar de lay-out te kijken. Is de volgorde van de informatie logisch? Begrijp je bij welk onderdeel elke tekst hoort?
2. Let op pagina’s met meerdere kolommen, kaarten of lijsten. Zou de informatie nog kloppen als je alles onder elkaar zet?
3. Open een accordion, tabpaneel of dialoogvenster. Wordt de nieuwe content op een logische plek getoond?
4. Verklein het browservenster of draai je telefoon. Verandert de volgorde van de content? Is die nog steeds begrijpelijk?

Voor developers

1. Schakel CSS uit. In Firefox: kies in het menu View > Page Style > No Style. Bekijk of de content in een begrijpelijke volgorde staat.
2. Bekijk de Accessibility Tree in de DevTools. Controleer of de volgorde overeenkomt met de visuele volgorde.
3. Zoek in je CSS naar order, flex-direction: row-reverse, flex-direction: column-reverse en grid-row/grid-column die de visuele volgorde veranderen. Controleer of de HTML-volgorde logisch blijft.
4. Lineariseer tabellen met de Web Developer-extensie (tab Miscellaneous > Linearize Page). Controleer of de informatie nog klopt.
5. Test dynamische content met een screenreader. Open een accordion, tab of dialoogvenster en controleer of de content in de juiste volgorde wordt voorgelezen. Lees de handleiding Zelf testen met screenreaders - VoiceOver (macOS) of NVDA (Windows) op Toegankelijk Online als je daar nog niet mee hebt gewerkt.
6. Test in verschillende responsieve weergaves en zoom tot 400%. Controleer of de leesvolgorde intact blijft.

Gerelateerde succescriteria

• 1.3.1 Info en relaties: de structuur van de content moet programmatisch bepaalbaar zijn.
• 2.4.3 Focusvolgorde: de volgorde van interactieve elementen bij toetsenbordnavigatie.
• 4.1.2 Naam, rol, waarde: interactieve elementen moeten correct zijn geprogrammeerd.

Relevante bronnen

• WCAG 2.2: Succescriterium 1.3.2 Betekenisvolle volgorde — de officiële Nederlandstalige vertaling van het succescriterium. Gebruik dit als referentie voor de exacte eisen.
• Understanding SC 1.3.2: Meaningful Sequence — de W3C-uitleg bij het succescriterium, met technieken en voorbeelden (Engels).
• Zelf testen met screenreaders - VoiceOver (macOS) — stap-voor-stap handleiding om met VoiceOver te testen op macOS. Handig voor het controleren van de leesvolgorde.
• Zelf testen met screenreaders - NVDA (Windows) — stap-voor-stap handleiding om met NVDA te testen op Windows.
• Screen Reader Keyboard Shortcuts and Gestures — overzicht van toetsenbordsneltoetsen en gebaren per screenreader op Deque University (Engels).
• Source Order Matters — artikel van Adrian Roselli over waarom de broncodevolgorde ertoe doet (Engels).

Gerelateerde NL Design System-richtlijnen

• Formulieren: Plaats de informatie over waar de gebruiker is in de stappen boven het formulier.
• Formulieren: Zorg voor een logische volgorde van de informatie.
• Content: Tabellen.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C referenties

• Engelse tekst van het WCAG-succescriterium: 1.3.2 Meaningful Sequence.
• Nederlandse vertaling van het WCAG-succescriterium: 1.3.2 Betekenisvolle volgorde.
• Engelstalige informatie op How to Meet WCAG: Quick Reference 1.3.2 Meaningful Sequence.
• Engelstalige toelichting: Understanding SC 1.3.2 Meaningful Sequence.

Help richtlijn verbeteren

Aanvullingen of opmerkingen?

Deze pagina’s over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.