Succescriterium 1.3.2 Betekenisvolle volgorde
Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.
Betekenisvolle volgorde begrijpen (Engelstalig)
De volgorde van de content in de code bepaalt de leesvolgorde. Een schermlezer leest de content in die volgorde voor. Zonder opmaak verschijnt de content ook in die volgorde. Met CSS kun je de content op het scherm in een andere volgorde zetten. Wat iemand ziet, kan dus afwijken van wat een schermlezer voorleest.
Een leesvolgorde die de betekenis verandert, is verwarrend voor mensen die een schermlezer gebruiken. Zorg daarom dat de leesvolgorde de betekenis van de content niet verandert.
Niet alle volgorde is even belangrijk. Een artikel en een zijbalk kunnen prima in verschillende volgordes staan, zolang ze niet door elkaar lopen. Binnen een artikel is de volgorde meestal wel belangrijk. Er kunnen meerdere volgordes goed zijn. Je hoeft er maar één te bieden, zolang de betekenis hetzelfde blijft.
Hoe pas je dit toe?
- Zet de content in de code in dezelfde volgorde als op het scherm.
- Verander de volgorde niet alleen met CSS, zoals
order,float, flexbox of CSS Grid, als de betekenis daardoor verandert. - Gebruik geen spaties om letters uit elkaar te zetten.
- Maak geen kolommen of tabellen met spaties of tabs.
Schermlezer
Een schermlezer is software die de content op het scherm voorleest of doorgeeft aan een brailleleesregel.
Test zelf je website eens met voorleessoftware, zoals NVDA voor Windows of VoiceOver voor macOS. Lees door je website en luister naar de aankondigingen.
Lees het artikel over betekenisvolle volgorde
Voor wie is dit belangrijk?
- Mensen die een schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende schermlezers (bijvoorbeeld NVDA en VoiceOver)
Uitzonderingen
Geen uitzonderingen
Geldt alleen voor:
- content waarvan de volgorde van invloed is op de betekenis
Testprocedure
Test 1: Schermlezer
Statische content
- Inventariseer de pagina
- Bepaal welke statische content er is:
- Koppen
- Paragrafen
- Afbeeldingen
- Lijsten
- Tabellen
- Citaten
- Links
- Bepaal waar de volgorde van content de betekenis beïnvloedt:
- Stappenplannen en instructies
- Artikelen en nieuwsberichten
- Formulieren
- Content in meerdere kolommen
- Content die in een raster of in tabelvorm staat
- Bepaal welke statische content er is:
- Herlaad de pagina
- Schakel een schermlezer in
- Navigeer met de pijltoetsen door de pagina en controleer:
- Of content waarvan de volgorde invloed heeft op de betekenis, wordt voorgelezen in een volgorde die dezelfde betekenis geeft als de visuele volgorde
- Of content die voor iedereen verborgen hoort te zijn, niet wordt voorgelezen (bijvoorbeeld een dichtgeklapt menu of een gesloten dialoogvenster)
Witruimte
- Inventariseer de pagina
- Bepaal of er tekst is die visueel breed of verspreid is weergegeven (bijvoorbeeld koppen met extra ruimte tussen letters)
- Bepaal of er platte tekst is die eruitziet als kolommen of als een tabel
- Zoek in de code naar deze tekst en controleer:
- Of er geen spaties, tabs of andere witruimtekarakters worden gebruikt om de afstand tussen letters in een woord te vergroten
- Of er geen witruimtekarakters worden gebruikt om kolommen na te bootsen in platte tekst
- Of er geen witruimtekarakters worden gebruikt om tabellen na te bootsen in platte tekst
Presentatietabellen
- Zoek in de code naar
<table>-elementen die voor lay-out worden gebruikt (presentatietabellen) en controleer:- Of de content dezelfde betekenis heeft als de cellen rij voor rij van links naar rechts worden voorgelezen
Dynamische content
- Verken de pagina
- Bepaal welke dynamische content er is:
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- Content die later wordt geladen
- Bepaal welke dynamische content er is:
- Test elk element dat uitvouwt of wisselt (navigaties, subnavigaties, accordeons en tabbladen) en controleer:
- Of de uitgevouwen content van een navigatie, subnavigatie of accordeon in de leesvolgorde direct na het activerende element staat
- Of het tabpaneel in de leesvolgorde direct na de lijst met tabbladen of direct na het actieve tabblad staat
- Of de content van samengevouwen elementen en niet-actieve tabpanelen niet wordt voorgelezen
- Test de andere dynamische content (dialoogvensters, carrousels en content die later wordt geladen) en controleer:
- Of nieuwe content op een plek in de leesvolgorde verschijnt die de betekenis niet verandert
- Of de content na het wisselen in dezelfde volgorde wordt voorgelezen als deze wordt getoond
- Of gesloten of verborgen content niet meer wordt voorgelezen
Belangrijk om te weten
- De leesvolgorde hoeft niet gelijk te zijn aan de visuele volgorde. Een afwijking mag, zolang de betekenis niet verandert.
- Er kunnen meerdere correcte leesvolgordes zijn. Eén correcte volgorde is genoeg.
- Het bereiken en bedienen van een dialoogvenster in de juiste volgorde, en het verplaatsen en terugzetten van de focus, valt onder succescriterium 2.4.3 Focus volgorde.
- Content met betekenis die de schermlezer helemaal overslaat, bijvoorbeeld door
aria-hidden="true", valt onder succescriterium 1.3.1 Info en relaties. - De eis dat content die voor iedereen verborgen hoort te zijn ook verborgen is voor hulptechnologie, staat niet letterlijk in WCAG. De eis volgt uit het doel van 1.3.2: de voorgelezen volgorde moet dezelfde betekenis hebben als de getoonde content. Wordt verborgen content toch voorgelezen, dan staat er content in de leesvolgorde die visueel niet op die plek staat, zoals de tekst van een gesloten dialoogvenster midden in een artikel.
Beoordeling
- Voor content waarvan de volgorde invloed heeft op de betekenis, moet de leesvolgorde de betekenis niet veranderen
- Witruimtekarakters moeten niet worden gebruikt om de afstand tussen letters in een woord te vergroten, kolommen na te bootsen of tabellen na te bootsen
- Een presentatietabel moet dezelfde betekenis houden als de cellen per rij van links naar rechts worden voorgelezen
- Content die wordt uitgevouwen, geopend, gewisseld of geladen, moet op een plek in de leesvolgorde verschijnen die de betekenis niet verandert
- Content die voor iedereen verborgen hoort te zijn, moet ook verborgen zijn voor hulptechnologie