Voorspelbaarheid

Betekenisvolle volgorde

Als je van boven naar beneden leest, kun je dan de inhoud goed begrijpen? Ook als je het scherm niet ziet?

Kopjes

Screenreadergebruiker navigeren op kopjes, staat alle inhoud die bij een kopje hoort er ook onder?

Demo: YouTube video over betekenisvolle volgorde. Bijbehorende demopagina: Betekenisvolle volgorde

Kopjes beschrijven de inhoud die eronder komt. Gebruik daarom koppen om de content te structureren. Aan de hand van de koppenstructuur geef je een goede indruk van de inhoud. Het is dan niet nodig de hele tekst te lezen om te vinden wat je zoekt.

Demo: Koppenlijst HeadingMap van verschillende websites.

Ook de focusvolgorde moet voorspelbaar zijn. Van boven naar beneden, van links naar rechts, in het (bijvoorbeeld) Arabisch van rechts naar links.

Toetsenbord focus

Als de tekst- en focusvolgorde klopt op desktop check dan ook de verschillende mobiele weergaven. Klopt de volgorde dan nog steeds?

Oefenen: In groepjes van 2:

• Controleer volgorde van de kopjes en de tekst eronder op je eigen website.
• Check de focusvolgorde op Volkskrant.nl in verschillende responsieve weergeven.
• Noteer 3 dingen op die je opvallen.

Linkdoel

De linktekst vertelt eenduidig aan de gebruiker waar de link naartoe gaat (het linkdoel). Het doel van de link kan ook door omringende content worden aangegeven.

Fout: Klik hier om in te loggen en uw gegevens in te zien.

Goed: Log in om uw gegevens in te zien.

Samen oefenen: Controleer de linkteksten op verschillende websites. Hoe ziet dat eruit op in linklijst in VoiceOver.

Wat zegt WCAG hierover?

WCAG-succescriterium 1.3.2 Betekenisvolle volgorde:
Zorg ervoor dat iedereen de tekst van een webpagina kan volgen en dat het begrip hiervan niet alleen afhankelijk is van de visuele presentatie.

WCAG-succescriterium 2.4.3 Focus volgorde:
Wanneer een toetsenbordgebruiker binnen de webpagina navigeert, bijvoorbeeld met de Tab-toets, moet de tabvolgorde logisch en voorspelbaar zijn.
Demo: Volkskrant in verschillende weergaven.

WCAG-succescriterium 1.4.10 Reflow:
De gebruiker moet de webpagina 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina. Meestal springt de website in mobiele weergave.

WCAG-succescriterium 2.4.4 Linkdoel (in context):
De linktekst vertelt eenduidig aan de gebruiker waar de link naartoe gaat (het linkdoel). Het doel van de link kan ook door omringende content worden aangegeven.

WCAG-succescriterium 2.4.9 Linkdoel (alleen link) Niveau AAA:
Maak duidelijk waar een link naartoe gaat. Zorg dat de linktekst op zichzelf het doel duidelijk beschrijft. Behalve als het doel voor iedere gebruiker niet echt duidelijk is.

Succescriterium 2.4.10 Niveau AAA:
Gebruik koppen om de content te structureren. Aan de hand van de koppenstructuur geef je een goede indruk van de inhoud. Het is dan niet nodig de hele tekst te lezen om te vinden wat je zoekt.