Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 1.3.2 Betekenisvolle volgorde

Niveau A

Uitleg

Zorg ervoor dat iedereen de tekst van een webpagina kan volgen en dat het begrip hiervan niet alleen afhankelijk is van de visuele presentatie.

Wanneer een gebruiker de webpagina inzoomt, of met een screenreader de inhoud van boven naar beneden leest, moet de informatie en de volgorde van de informatie logisch en begrijpelijk zijn.

Screenreadergebruikers lezen informatie op een webpagina van boven naar beneden. Dan is het belangrijk dat de informatie ook in deze leesvolgorde in de gegenereerde code, de DOM, staat.

Screenreadergebruikers kunnen een lijst met de kopjes oproepen en een kopje kiezen vanwaar te lezen op een pagina. Als er gerelateerde informatie boven een kopje staat, mist de screenreadergebruiker deze inhoud.

Bijvoorbeeld: In een lijst met evenementen staat de categorie en de datum van het evenement boven het kopje. Alleen een visueel kader rondom de gegevens van het evenement, is duidelijk wat bij elkaar hoort. De screenreadergebruiker mist dan de juiste categorie en datum bij dat evenement als deze vanaf het kopje gaat lezen. Dit wordt gedemonstreerd met de screenreader VoiceOver in de onderstaande video.

Demo betekenisvolle volgorde in de screenreader VoiceOver

Gerelateerde NL Design System-richtlijnen

Bron

Source Order Matters van Adrian Roselli.

Gebruikersonderzoek

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

Hoe te testen

De handigste manier om dit goed te testen is met een screenreader, zoals VoiceOver voor de Mac of NVDA voor Windows.

Nuttige links voor het testen met screenreaders:

Controleer ook de HTML-structuur met een browser inspector.

Je kunt ook testen door CSS uit te schakelen. Let daarbij wel op verschillen in leesvolgorde in de DOM en visuele volgorde. In CSS kan de leesvolgorde namelijk aangepast worden, bijvoorbeeld met CSS grid layout en Flexbox.

CSS uitschakelen is het makkelijkst in Firefox. Kies in het menu 'View' > 'Page style' > 'No style'.

Let op: dit succescriterium gaat alleen over de leesvolgorde. De volgorde van de toetsenbordfocus valt onder het WCAG-succescriterium Focus volgorde.

Test:

  • Is de volgorde waarin de inhoud van boven naar beneden wordt voorgelezen begrijpelijk als je het scherm niet ziet? Met andere woorden, is het begrip van de inhoud onafhankelijk van het visueel ontwerp?
  • Wordt alle inhoud die bij een kopje hoort ook ná het kopje voorgelezen?
  • Is het begrijpelijk welke metadata, zoals auteur, categorie of datum, bij welke inhoud hoort?

Test de volgorde van de inhoud ook in verschillende responsieve weergaves en oriëntaties. Zoom ook in tot 400%. Verandert de volgorde van de inhoud? Is de voorgelezen inhoud nog steeds logisch en betekenisvol?

Veelgemaakte fouten

Fout: de volgorde van de inhoud is niet meer logisch voor kleine schermgroottes

De leesvolgorde is anders voor ingezoomde weergaves dan voor de desktopweergave. Controleer de leesvolgorde voor de verschillende breedtes en oriëntaties en zoom ook in tot 400%. Overleg dit ook met de designer.

Fout: er staat content boven een gerelateerd kopje

Het is voor dit criterium van belang dat content die bij een kopje hoort zich onder dat kopje bevindt, in ieder geval in de leesvolgorde. Maar soms wordt in het ontwerp gekozen om content die bij een kopje hoort visueel boven dat kopje te plaatsen. Overleg dan met de designer of dit eventueel anders kan, of pas de volgorde aan met CSS (zie hieronder).

Het is mogelijk om de visuele volgorde met CSS-code aan te passen zodat de inhoud anders wordt voorgelezen van de visuele volgorde, maar pas hierbij op. De visuele volgorde van de toetsenbordfocus moet ook betekenisvol zijn, zie hiervoor het WCAG-succescriterium 2.4.3 Focusvolgorde.

W3C referenties

Belangrijk: De richtlijnen van NL Design System zijn niet verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

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