Ga naar hoofdinhoud

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.

Wanneer een bezoeker met hulpsoftware de inhoud van begin tot eind leest, moet de informatie en de volgorde logisch en begrijpelijk zijn. Het is belangrijk dat de informatie in de juiste leesvolgorde in de HTML staat. De leesvolgorde mag afwijken van wat je ziet, maar de betekenis moet hetzelfde blijven.

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

Let bij het testen op verschillen tussen elementen in de DOM en de visuele volgorde. Is de volgorde waarin de inhoud van boven naar beneden wordt voorgelezen begrijpelijk als je de pagina niet ziet?

  • Controleer de HTML-structuur met een browser inspector.
  • Lees de Accessibility Tree
  • Zet CSS uit. Met CSS kan de leesvolgorde worden aangepast, bijvoorbeeld met CSS grid layout en Flexbox. CSS uitschakelen gaat het gemakkelijkst in Firefox. Kies in het menu 'View' > 'Page style' > 'No style'. Of gebruik Web Developer tool, tab CSS > Disable all styles.
  • Tabellen kunnen worden gelineariseerd met de Web Developer tool, tab ‘Miscellaneous’ > optie ‘Linearize Page’. Deze optie werkt niet op alle pagina’s.
  • Gebruik schermlezer om te testen of de leesvolgorde van de dynamisch geïnjecteerde content klopt.

Nuttige links voor het testen met screenreaders:

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?

Dit succescriterium gaat alleen over de leesvolgorde. De volgorde van de toetsenbordfocus valt onder het WCAG-succescriterium Focus volgorde.

Veelgemaakte fouten

Fout: het is onduidelijk bij welk artikel de gegevens horen.

Koppen geven een pagina of een document structuur aan en laten zien wat bij elkaar hoort. Alle inhoud die onder een kop staat, hoort bij die kop. Gebruikers van schermlezers kunnen een lijst met koppen openen en naar een kop navigeren. Als informatie die bij een artikel hoort boven een kop staat, mist de bezoeker die informatie of lijkt het alsof die bij het vorige artikel hoort. Dit speelt alleen op pagina's met meerdere berichten.

Fout: in een lijst met evenementen staan de categorie en de datum van het evenement boven het kopje.

Alleen een visueel kader rond de gegevens van het evenement maakt duidelijk wat bij elkaar hoort. Als een gebruiker van een schermlezer naar een kop navigeert en vanaf daar leest, mist die gebruiker de juiste categorie en datum bij dat evenement. Dit wordt gedemonstreerd met de schermlezer VoiceOver in de onderstaande video.

Fout: tekst in kolommen zorgt voor onlogische volgorde.

Als een pagina twee kolommen heeft met in elke kolom een afbeelding en een beschrijving, mag het niet zo zijn dat eerst de alt-tekst van de afbeeldingen wordt voorgelezen en daarna pas de beschrijvingen. Dan begrijpt een bezoeker die naar een schermlezer luistert niet bij welke afbeelding de beschrijving hoort.

Fout: de leesvolgorde in een tabel is niet logisch.

Stel dat een tabel op een pagina de openingstijden toont. In de eerste kolom staan de dagen van de week en in de tweede kolom de openingstijden. Een verkeerde leesvolgorde zou zijn: maandag, dinsdag, woensdag en daarna 9 - 15, 9 - 13, 9 - 20.

Fout: de leesvolgorde in een carrousel met bladerknoppen is niet logisch, omdat de knoppen boven de slides staan.

Een schermlezer leest dan: 'vorige', 'volgende', inhoud van slide 1, inhoud van slide 2. Een logische leesvolgorde is: eerst de inhoud van de slides en daarna de knoppen. Dan is pas duidelijk of verder bladeren gewenst is.

Fout: de leesvolgorde in diagrammen en grafieken kan onlogisch zijn.

Dit kan gebeuren bij svg-elementen die tekst bevatten. Dan worden bijvoorbeeld eerst de waarden van de X-as en daarna de waarden van de Y-as als losse getallen voorgelezen. De uitleg van wat deze assen betekenen kan dan op een verkeerd moment komen. Ook canvas- en object-elementen kunnen met een verkeerde leesvolgorde worden voorgelezen.

Fout: content die verschijnt door interactie met een webpagina moet op het juiste moment en in een logische volgorde worden voorgelezen.

Bijvoorbeeld: een bezoeker opent een sectie waarin gerelateerde content kan worden getoond en verborgen, de zogenoemde 'accordion'. De nieuwe content moet als eerste worden voorgelezen. Dit kan ook misgaan bij tabs. Als een dialoogvenster wordt geopend, moet de schermlezer de inhoud van bovenaf lezen. Dit punt lijkt sterk op succescriterium 2.4.3 Focusvolgorde. Het verschil is dat focusvolgorde gaat over interactieve elementen en leesvolgorde niet.

Fout: na het sluiten van een dialoogvenster keert een schermlezer niet terug naar het element dat het venster opende, maar leest de inhoud verder vanaf een onlogische plek.

Er kan een verschil zijn tussen de toetsenbordfocus (SC 2.4.3) en de volgorde waarin een schermlezer de inhoud van een pagina leest (SC 1.3.2). Daarom moet alle content die dynamisch verschijnt worden getest met een schermlezer.

Fout: een schermlezer kan de inhoud van de pagina voorlezen terwijl dat niet de bedoeling is.

Bijvoorbeeld: een mobiel menu dat niet zichtbaar is, of de inhoud van de pagina terwijl een dialoogvenster nog open is.

W3C referenties

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk 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 NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.