Pleidooi van een screenreadergebruiker: overdrijf niet

Update 6 januari 2023: de link naar de voorbeeldwebsite is verwijderd omdat die gewijzigd is, maar het verhaal blijft overeind.

Semantiek is belangrijk en wij hameren er nogal op dat je voor koppen, lijsten, sections enz. de HTML-elementen gebruikt die daarvoor beschikbaar zijn. Maar als je overdrijft, gaat het effect verloren. Waar semantiek een screenreadergebruiker erg kan helpen om zich te oriënteren binnen een webpagina, kan overdaad het juist onoverzichtelijk maken. Goedbedoelende ontwikkelaars kunnen het ook op andere gebieden té goed willen doen.
Wat volgt is een persoonlijke mening.

Skip links

Een link bovenaan in de broncode die zichtbaar wordt als hij focus krijgt en toelaat om naar de inhoud te springen, heeft zeker zijn nut. De voorbeeldwebsite heeft drie van zulke skip links: de eerste brengt je naar de inhoud zoals je mag verwachten, maar daarnaast kan je ook naar de navigatie en naar de footer springen. Ik betwijfel of iemand dat laatste zou willen. De navigatie is inderdaad een beetje moeilijk te vinden, maar dat komt voornamelijk door veel andere overbodige inhoud.

Als je skip links toevoegt, geef je de mogelijkheid om sneller naar een onderdeel van de site te tabben, maar denk er aan dat elke skip link zelf ook een extra tabstop toevoegt aan het begin van elke webpagina.

Verborgen tekst

De visuele positionering van elementen op een webpagina gaat voor blinden verloren. Het kan voor screenreadergebruikers soms interessant zijn om extra informatie toe te voegen. Je kan verborgen tekst toevoegen via de clipping-techniek of je kan met aria-labels aan de slag. Kies een van beide technieken en niet allebei zoals de voorbeeldwebsite doet.

<nav role="navigation" aria-labelledby="zf--side-menu--section-heading">
<h2 id="zf--side-menu--section-heading">Side menu</h2>

Hier voegt men een verborgen kop toe boven het navigatiemenu. Die tekst herhaalt men nog eens als label bij het navigatiegebied. JAWS-gebruikers krijgen die verborgen tekst drie keer te horen:

Side menu navigatiegebied
Kop2 side menu
Lijst met zes items
Link Home
...
Link Contact
Einde lijst
Side menu einde navigatiegebied

Benoem niet elk blok

De dubbele techniek om blokken te benoemen, heeft men op de voorbeeldwebsite overal doorgetrokken. Waar je op het scherm het Facebook-logo ziet, moet een screenreadergebruiker luisteren naar zes regels informatie:

<section aria-labelledby="zf--follow-us--section-heading">
<h2 id="zf--follow-us--section-heading">Follow us</h2>
<ul>
<li><a href="">
<span class="visually-hidden">KEAT - Facebook</span>
<span aria-hidden="true" class="zf--zhong-icon zf--zhong-icon-facebook"></span>
</a>
</li>
</ul>
</section>

Vertaald door JAWS geeft dit:

Follow us gebied
Kop2 Follow us
Lijst met 1 items
Link Keat - Facebook
Einde lijst
Follow us einde gebied

Hetzelfde gebeurt voor het Accessibility panel. Ook die knop zit in een lijst van 1 item, wordt voorafgegaan door een onzichtbare kop met de tekst Toolbox en die wordt herhaald bij het aan- en afkondigen van het navigatiegebied. Ik zou zeggen dat Accessibility panel helemaal duidelijk maakt waar die knop voor dient. Het voegt echt niets toe als je die knop in een lijst en in een blok met de naam Toolbox stopt.

De link English en Greek staan ook in een navigatiegebied met als label "Language options" en met dezelfde tekst als verborgen kop erboven. Als je aan de ziende bezoeker niet vertelt dat Grieks en Engels taalkeuzes zijn, waarom zou je dat dan aan blinde bezoekers uitleggen?

Waar een verborgen kop of een aria-label wel nuttig is, is rond het kruimelpad. Al is het niet eenvoudig om daarvoor een term te verzinnen die bezoekers begrijpen. Deze website kiest voor "Location path". Bij wie doet dat een belletje rinkelen?

Oh ja, onderaan de pagina staat een blok met als verborgen kop "Complementary content (lower)".
Waar het helemaal hilarisch wordt, is bij het zoekveld:

<section role="search" aria-labelledby="zf--search--section-heading">
<h2 id="zf--search--section-heading">Search</h2>

Als je role="search" gebruikt, dan maak je van het blok een Zoekgebied. Dat is prima, maar het is dan echt niet nodig om er nog een label Search aan te hangen.

Koppen

Screenreaders bieden de mogelijkheid om van kop naar kop te navigeren of een dialoogvenster te openen met alle koppen binnen de pagina. Deze homepage heeft een prima kopniveau 1 met de tekst Home. Doordat elk blok een onzichtbare kop heeft gekregen, krijgen we een outline die helemaal niet meer overzichtelijk is en is deze navigatietechniek in de praktijk bijna onbruikbaar:

Kop2 Quick access menu
Kop2 Location path
Kop2 Toolbox
Kop2 Language options
kop2 Follow us
kop2 Search
Kop1 Center for Education & Rehabilitation for the Blind
Kop2 Side menu
Kop1 Main content
Kop1 Home
Kop2 Center for Education & Rehabilitation for the Blind
Kop2 Complementary content (lower)
Kop3 Administration and Content
Kop3 Design and Development
Kop2 Footer

Of, hoe je van een eenvoudige homepage een onbegrijpelijk kluwen kunt maken.

Live region

Als je het accessibility panel opent, dan klapt een blok uit met een aantal opties. De ontwikkelaar heeft dat blok als live region gemarkeerd: een screenreader krijgt de opdracht om de gewijzigde informatie voor te lezen. Dat moet je letterlijk nemen. Jaws ratelt:

Accessibility options Font Size: Bigger. Increase font size. Smaller. Decrease font size. Theme: Low brightness Dark Font: Sans serif Serif Bold Layout: Large print. This layout is suitable for people with low vision

Dit is geen goede toepassing van een live region. Dat er nieuwe info is verschenen, is voldoende duidelijk dankzij aria-expanded dat de waarde "true" krijgt als ik de knop activeer. Laat mij vervolgens maar rustig de opties verkennen met de pijltjes, de tabtoets of andere navigatiemogelijkheden.

Conclusie

• Hou het simpel: bouw je template logisch op met een header, main en footer. Denk even na over de outline van de pagina en markeer de koppen met heading-elementen van het juiste niveau. Gebruik lijsten voor opsommingen (d.w.z. minstens 2 items).
• Reserveer nav voor het hoofdmenu en eventueel een doormat. Als je het aantal navigatiegebieden beperkt, is het ook niet nodig om allerlei labels te verzinnen om ze van elkaar te onderscheiden.
• Verborgen tekst of aria-labels toevoegen of tekst verbergen voor screenreaders, is enkel aan te raden in uitzonderlijke gevallen. Als je zelf test met een screenreader zorg dan dat je vertrouwd bent met het verwachtingspatroon van de dagelijkse gebruiker van dit hulpmiddel. Of check het even met enkele gebruikers of vraag het aan AnySurfer.
• Als de basis goed is, zijn veel specifieke toegankelijkheidsopties niet nodig en zoals we hierboven zagen: overdaad schaadt. Ik kan het niet beter samenvatten dan met de eerste zin van dit artikel van het Mozilla Developer Network: A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times