Front-end ontwikkeling voor screenreaders
Screenreader toegankelijke code schrijven is niet zo moeilijk als het lijkt. Met een paar basistechnieken kun je direct aan de slag en de toegankelijkheid van je applicatie aanzienlijk verbeteren.
Oefen met luisteren
De eerste stap die je kunt nemen is het leren bedienen van een screenreader. Je bent het al gewend om je code visueel te bekijken wanneer je aan het developen bent. Om je applicatie screenreader toegankelijk te krijgen moet je je applicatie ook beluisteren. Zo kun je horen wat je doet, je code testen en verbeteren.
Op zowel macOS als Windows is standaard een goede screenreader geinstalleerd. Er zijn ook tutorials beschikbaar die je de benodigde vaardigheden leren. Je hoeft geen expert te worden, zolang je de basis kent heb je voldoende om je eigen code te testen.
macOS VoiceOver
- Open System Preferences > Accessibility
- Klik op VoiceOver
- Klik op Open VoiceOver Training
Windows Narrator
- Open Settings > Ease of Access
- Klik op Narrator
- Klik op View the complete guide to Narrator online
Goede semantiek
Wanneer je met een screenreader werkt merk je wat deze nodig heeft van jouw app, goede html semantiek. Neem het voorbeeld van een button:
<button>Play video</button>
Wanneer je via je tab- of screenreader toets op dit element valt zegt de screenreader: ‘Play video, button’ of ‘Play video, knob’. Maar wat als je in plaats van een button een div had gebruikt?
<div class=“primary-button”>Play video</div>
De screenreader weet niet dat dit element een button zou moeten zijn. Daarbij navigeert de tabtoets alleen tussen elementen die standaard klikbaar zijn, zoals buttons en links. Dus deze div is ook nog eens lastiger te bereiken.
HTML heeft een heleboel elementen beschikbaar en wanneer je de juiste gebruikt kunnen screenreaders hier automatisch goed mee overweg. Wanneer je op het punt staat om een div te gebruiken kijk dan eerst of je niet een bestaande element kunt gebruiken. Zo heb je met weinig moeite een veel toegankelijkere app.
WAI-ARIA
In sommige situaties zijn de standaard HTML elementen niet voldoende. Bijvoorbeeld wanneer je een speciale UI hebt die niet gemaakt kan worden met standaard elementen. Of de button uit het vorige voorbeeld heeft zulke speciale functionaliteit of styling dat je geen button element kunt gebruiken. In die situaties kun je gebruik maken van WAI-ARIA attributen.
Om er achter te komen welke WAI-ARIA attributen je het beste kunt gebruiken kun je kijken op de website van W3C. Zij schrijven de WAI-ARIA specificaties en hebben veel informatie en voorbeelden beschikbaar op hun website. Ze hebben een lijst van design patronen die je kunt gebruiken: https://www.w3.org/TR/wai-aria-practices-1.1/examples/.
Om onze div te verbeteren kun je beginnen met de screenreader vertellen dat hij deze moet interpreteren als een button met een role=“button”. Je kunt er ook voor zorgen dat de tab-toets de div kan bereiken door een tabindex van 0 toe te voegen. Met deze simpele aanpassingen is je div veel toegankelijker geworden en zal je screenreader hem correct voorlezen.
<div class=“primary-button” role=“button” tabindex=“0”>Play video</div>
Conclusie
Wanneer je goede semantiek toepast, aanvult met WAI-ARIA waar nodig en test met screenreaders kun je applicaties bouwen die er zowel goed uitzien als goed klinken.