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
- Presentatietabellen
- Bepaal welke statische content er is:
- Herlaad de pagina
- Schakel een schermlezer in
- Navigeer met de pijltoetsen door de pagina en controleer:
- Of de volgorde waarin de content wordt voorgelezen dezelfde betekenis geeft als de visuele volgorde
- Of de schermlezer geen content voorleest die voor iedereen verborgen hoort te zijn (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 content is die in kolommen of tabelstructuur is opgemaakt met witruimte (spaties, tabs of regeleindes)
- 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
- Inventariseer de pagina
- Bepaal welke tabellen worden gebruikt voor lay-out (presentatietabellen)
- Zoek in de code naar
<table>-elementen die voor lay-out worden gebruikt 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 (accordeons, subnavigaties, tabbladen) en controleer:
- Of de uitgevouwen content van een accordeon of subnavigatie 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
- Controleer bij andere dynamische content (dialoogvensters, carrousels, content die later wordt geladen):
- 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.
- Informatie en relaties die door opmaak worden overgebracht maar niet in de code staan, vallen onder succescriterium 1.3.1 Info en relaties.
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