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)
Leesvolgorde is volgorde waarin teksten en elementen op een website worden gepresenteerd aan een schermlezer. Als deze volgorde belangrijk is voor het begrijpen van een tekst, zorg dan dat die volgorde ook in de code (de DOM) goed staat.
Als de leesvolgorde niet logisch is, dan kan dit verwarrend zijn voor mensen die een schermlezer gebruiken. Zorg daarom dat de leesvolgorde logisch en betekenisvol blijft.
Niet alle volgorde is even belangrijk. Een artikel en een zijbalk kunnen prima in verschillende volgordes staan zonder dat de betekenis verandert. Maar binnen een artikel is de volgorde meestal wel belangrijk.
Hoe pas je dit toe?
- Zorg dat de leesvolgorde van een schermlezer de betekenis van de content niet verandert.
- Zorg dat informatieve content niet wordt verborgen voor schermlezers.
- Zorg dat de leesvolgorde van een schermlezer correct mee gaat bij dynamische content, zoals een navigatie, dialoogvenster, enz.
Schermlezer
Een schermlezer is een hulptechnologie die tekst op alternatieve manier presenteert, zoals voorleessoftware of een brailleleesregel.
Test zelf je website eens met voorleessoftware, zoals NVDA voor Windows of VoiceOver voor macOS.
Handige tips
- Plaats gerelateerde content in een logische volgorde in de code.
- Vermijd CSS om elementen in een andere volgorde te tonen.
- Gebruik geen tabellen voor opmaak.
Voor wie is dit belangrijk?
- Mensen die een schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
Wie is verantwoordelijk?
- Redacteur
- Ontwikkelaar
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Minimaal twee verschillende schermlezers (bijvoorbeeld NVDA en VoiceOver)
Testprocedure
Test 1: Schermlezer
- Verken de pagina met toetsenbord en muis
- Bepaal welke dynamische content er allemaal is
- Probeer alle dynamische content uit
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, schuifbalken, enz.)
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- (enz.)
- Herlaad de pagina
- Schakel nu je schermlezer in, gebruik alleen het toetsenbord en controleer:
- Of de volgorde waarin de elementen worden voorgelezen logisch en intuïtief is
- Of de leesvolgorde niet door verborgen elementen gaat
- Bij ankerlinks:
- Of de leesvolgorde wordt verplaatst naar het doel van de ankerlink
- Bij dialoogvensters:
- Of bij openen de leesvolgorde wordt verplaatst naar het dialoogvenster
- Of de leesvolgode binnen het dialoogvenster blijft tot het wordt gesloten
- Of bij sluiten de leesvolgorde terug gaat naar het element dat het dialoogvenster triggerde
- Of de leesvolgorde correct mee gaat bij andere dynamische content
- Herhaal stap 3 in een andere browser
Belangrijk om te weten
- De leesvolgorde hoeft niet precies overeen te komen met de visuele volgorde
- Bewuste afwijkingen in de leesvolgorde kunnen acceptabel zijn zolang het de betekenis van de inhoud niet veranderd
Beoordeling
- De leesvolgorde moet logisch en betekenisvol zijn
- De leesvolgorde moet niet door verborgen elementen gaan