Terug naar de inhoudsopgave

Iedereen krijgt dezelfde informatie

What You See Is What You Get

Ziet tekst eruit als een kopje, opsomming, link, knop of paragraaf? Gebruik dan ook in de HTML de juiste elementen. Deze elementen hebben echt betekenis.

Bijvoorbeeld: een kopje vertelt welke informatie eronder komt en is niet alleen om tekst groot te maken. Kopjes kun je makkelijk testen met de Headings Map addon.

Demo: Wat is het verschil tussen de informatie in een pagina met semantische opmaak en een pagina zonder semantische opmaak?

Oefening: Hoe semantisch is je eigen website, zijn de kopjes representatief voor de inhoud? Kijk ook eens bij volkskrant.nl

Op welke pagina zit je?

Als je kunt zien weet je vaak meteen op welke pagina je bent, je hebt een volledig overzicht. Hoe krijgt een screenreader gebruiker deze informatie ook snel mee?

Screenreaders lezen de <title> in de <head> sectie van de HTML-code als eerste voor. Daarom is het belangrijk dat de title goed de inhoud van de pagina beschrijft.

Oefening: Controleer de title bij volkskrant.nl, amazon.nl en je eigen website.

Wat dit de huidige pagina?

In een menu kun je aangeven op welke pagina je nu bent. Een afwijking van kleur van de tekst of een lijntje eronder.

Voor een screenreader kun je dezelfde info doorgeven met aria-current. Demo aria-current.

Oefening: Controleer hoe het huidige menu is aangegeven bij je eigen website en op Erasmus University Rotterdam.

Is het menu open of dicht?

Als je een uitklapmenu hebt, dus een knop om het menu te openen kun je aan screenreaders meegeven of het menu open of dicht is. Dit kan met aria-expanded. Demo aria-expanded.

Oefening: Controleer of aria-expanded is toegevoegd op het mobiele menu van je eigen website of GOV.UK of trouw.nl.

Dynamische content

Verandert er tekst op de pagina, of komt er bijvoorbeeld een foutmelding of waarschuwing in beeld? Screenreaders pikken dit niet zomaar op. Je kunt dit ondervangen door de verandering te laten voorlezen.

Dit kan op twee manieren:

Demo: aria-live.

Statusberichten

Dynamische statusberichten zijn meldingen die op het scherm verschijnen zonder dat de pagina opnieuw geladen wordt. Zoals, "Uw bericht is succesvol verzonden, "Je wordt over 10 seconden uitgelogd"

Krijgt een statusbericht niet de toetsenbordfocus? Dan moet de inhoud worden voorgelezen met bijvoorbeeld role="status" of role="alert", zodat iedereen de inhoud meekrijgt.

Demo: statusberichten.

Wat zegt WCAG hierover?

WCAG-succescriterium 1.3.3 Zintuiglijke eigenschappen:
Geef instructies op een inclusieve manier. De instructies kunnen begrijpen moet niet afhankelijk zijn van eigenschappen die sommige gebruikers niet ervaren. Het gaat hierbij om eigenschappen zoals vorm, kleur, afmeting, locatie op het scherm, richting, of geluid.

WCAG-succescriterium 2.4.2 Paginatitel:
Webpagina's hebben titels die het onderwerp of doel beschrijven.

WCAG-succescriterium 2.4.6 Koppen en labels:
Koppen en labels beschrijven het onderwerp of het doel van de inhoud. Wat is de opzet van de pagina, waar gaat een tekst over, wat moet je invullen?

WCAG-succescriterium 4.1.3 Statusberichten:
Je kunt updates met belangrijke informatie met de gebruiker delen via een statusbericht. Als dit bericht bij verschijnen geen toetsenbordfocus krijgt, zorg er dan voor dat gebruikers die de melding niet zien, deze informatie toch meekrijgen.