Website toegankelijkheid verbeteren met accessibility features

Rondklikken met je muis, velden invoeren met je toetsenbord, filmpjes kijken, podcasts luisteren: dit online kunnen doen is niet vanzelfsprekend voor iedereen. Door beperkingen hebben sommige mensen hulpmiddelen nodig om een website te gebruiken. Met behulp van accessibility features zorg je ervoor dat je site toegankelijk is voor iedereen.

Laat ik maar meteen beginnen met een bekentenis: als softwareontwikkelaar heb ik niet altijd gedacht aan de toegankelijkheid van mijn websites. Er is dan ook een en ander te verbeteren aan mijn sites en webapplicaties.

In deze blogpost geef ik een introductie over dit onderwerp voor (web-) developers. Ik zal niet alle ins en outs benoemen en toelichten, slechts onderdelen waarvan ik heb ervaren dat ze het belangrijkste zijn en het meeste winst opleveren. Voor gedetailleerdere informatie zijn MDN, W3C en A11Y goede bronnen om mee te starten.

Waarom website optimaliseren

Zoals ik al noemde in de intro, is het niet voor iedereen even makkelijk om een website te gebruiken. Website-toegankelijkheidsoptimalisaties zijn met name bedoeld voor mensen met een:

• Lichamelijke beperking: Hierdoor kun je bijvoorbeeld een toetsenbord of computermuis niet (optimaal) gebruiken
• Verstandelijke of cognitieve beperking: Hierdoor kan het bijvoorbeeld moeilijk zijn om informatie te verwerken.
• Zintuiglijke beperking: Bijvoorbeeld blind- of doofheid.

Iemand die zo'n beperking heeft, kan gebruik maken van een hulpmiddel om website te gebruiken. Zo kan iemand met blindheid kan een screen reader gebruiken om tekst te laten voorlezen. Of iemand die om wat voor reden dan ook, geen muis kan gebruiken, kan je website met het toetsenbord gebruiken.

Het optimaliseren doe je dan ook (deels) voor zulke hulpmiddelen — zodat die tools je website begrijpen. Het uiteindelijke doel is dat iedereen je website op dezelfde manier moet kunnen gebruiken. Ongeacht de beperking waar een persoon mee te maken heeft.

Hoe website toegankelijker maken

En dan nu het technische gedeelte: hoe optimaliseer je je website voor toegankelijkheidstools. In de volgende secties licht ik de belangrijkste manieren toe.

Semantische HTML

De meest basale techniek die je moet toepassen is om semantische HTML te gebruiken. Wat betekent dat? Simpelweg het meest geschikte HTML-element te gebruiken. Dus, een <button> voor knoppen, een <nav> voor navigatie, een <footer> voor je footer-sectie, enz. En dus niet een <div> voor je navigatie, enz.

1<!-- Non-semantic button: -->
2<span className="..." onClick="...">
3    Non-semantic button
4</span>
5
6<!-- Semantic button: -->
7<button className="..." onClick="...">
8    Semantic button
9</button>

Bij knoppen en invoervelden levert dat een extra voordeel op, namelijk dat er ingebouwde toegankelijkheidsfeatures zijn. Zoals het gebruiken van je tab-toets om een veld of knop in focus te brengen, of de enter-toets te gebruiken om een knop te klikken.

CSS-code

Aanvullend op semantische HTML, moet je site een logische visuele indeling hebben. Denk daarbij ook aan interactieve elementen met algemene stijl-conventies. Zoals een achtergrondkleur van een knop die verandert zodra je eroverheen gaat met de muis (:hover), of focusbare elementen (:focus).

Een ander belangrijk aspect is je kleurgebruik (zoals voldoende contrast), tekstgroottes en het gebruik van lege ruimtes.

JavaScript

Over het algemeen raden bronnen zoals MDN het aan om spaarzaam te zijn met JavaScript, en zoveel mogelijk semantische HTML te gebruiken. Maar soms kun je niet anders, bijvoorbeeld als je een React SPA (single-page application) hebt, of client-side formulier validatie. Dat laatste wordt unobtrusive JavaScript genoemd.

Het zorgt er wel voor dat je website dynamisch is, zonder opnieuw de hele pagina te herladen. Tools zoals screen readers kunnen dat niet altijd herkennen. Om dat soort tools op de hoogte te stellen van dynamische updates, kun je WAI-ARIA -attributen toepassen.

WAI-ARIA

Door complexe webpagina's met dynamische content, zoals bij SPA's, is het niet altijd mogelijk puur semantische HTML te gebruiken. Het probleem dat daardoor ontstaat, is dat hulpmiddelen voor mensen met een beperking, zoals screen readers, niet altijd je webpagina begrijpen, qua structuur.

WAI-ARIA biedt daar een oplossing voor. Het Web Accessibility Initiative Accessible Rich Internet Applications specificeert hoe dat moet, namelijk door bepaalde attributen aan je HTML-element toe te voegen. Er zijn drie categorieën:

1. Roles: Specificeert wat een HTML-element is of doet.
2. Properties: Diverse (voornamelijk statische) eigenschappen over je HTML-element.
3. States: Zegt iets over de huidige staat van een HTML-element. De waarde hiervan is doorgaans dynamisch.

Al deze attributen doen niks met je webpagina zelf, behalve technische informatie bieden aan accessibility tools. Je past ze toe als je:

• De semantiek van een ander HTML-element wilt nabootsen. Bijvoorbeeld met een <div> een <nav> nabootsen d.m.v. <div role="navigation">. Naast algemene rollen kun je ook specifiekere rollen toewijzen die niet in semantische HTML bestaan (bijv. role="listbox", role="menuitem").
• Dynamische updates wilt aangeven
• Toetsenbord toegankelijkheid wilt toewijzen aan een element waarbij dat niet is ingebouwd (tabindex)
• Semantiek toevoegen aan een gebouwde component (UI-feature) om aan te geven wat het is.

1<!-- Voorbeeld tab-component met ARIA-roles: -->
2<div>
3    <div role="tablist">
4        <button role="tab">Tab 1</button>
5        <button role="tab">Tab 2</button>
6    </div>
7
8    <div role="tabpanel">
9        Inhoud van tab 1
10    </div>
11
12    <div role="tabpanel">
13        Inhoud van tab 2
14    </div>
15</div>

Ik zal niet alle ARIA-eigenschappen opsommen, check daarvoor de Mozilla-documentatie of W3C specificatie.

Audio en video

Afhankelijk van je browser is de ingebouwde video- en audiospeler niet geheel toegankelijk. Zo kun je niet altijd met je toetsenbord pauzeren, terugspoelen, enz. In dat geval kun je met behulp van JavaScript een eigen laag over de video- en audio-speler bouwen die de missende functionaliteiten wel heeft.

Tevens kun je ondertiteling aan video's toevoegen. Niet alleen voor slechthorenden, maar ook voor mensen die geen audio kunnen afspelen, of in een rumoerige omgeving zijn is het handig.

Aan audio-content kun je dan weer een transcript toevoegen.

Taalgebruik

Een niet-technisch middel voor verbeterde toegankelijkheid is om je teksten te optimaliseren, als dat van toepassing is op de doelgroep van je website.

Je teksten kun je optimaliseren met:

• Duidelijk taalgebruik
• Geen onnodige complexiteiten
• Geen afkortingen of symbolen gebruiken die screen readers niet (goed) uitspreken. Bijvoorbeeld "Pagina 1-7" vervangen door "Pagina 1 tot 7".
• Mocht je toch afkortingen gebruiken, schrijf ze dan de eerste keer voluit en gebruik daarna de HTML-element <abbr>.
• Unieke knopteksten: Als een accessibility-tool alle knoppen opsomt, is het duidelijker als ze verschillende namen hebben.

Toegankelijkheid van je site testen

Een aantal technieken om de toegankelijkheid van je site te checken zijn:

• CSS uitschakelen: Via de browser kijken of je webpagina een logische indeling heeft zonder CSS.
• Kleurcontrasten controleren: Teksten moeten duidelijk zichtbaar zijn met voldoende contrast. Via WebAIM's Color Contrast Checker kun je dat handmatig, per kleur, controleren. Via Pagespeed Insights (en dus via Chrome DevTools), kun je dat voor je hele webpagina controleren.
• Auditing tools: Naast PageSpeed Insights, kun je andere externe auditing-tools gebruiken, zoals Wave of Deque Axe.
• Zelf ervaren: Zelf de hulpmiddelen gebruiken en ervaren hoe je website te gebruiken is via zo'n tool. Denk daarbij aan veelgebruikte tools als JAWS, ChromeVox en VoiceOver.
• Testen op doelgroep: Als het mogelijk is, test dan met je doelgroep en analyseer hoe zij je site gebruiken.

Bijkomende voordelen

Naast dat het simpelweg goed is dat je website toegankelijk is voor iedereen, zijn er nog een aantal andere voordelen die het levert:

• Je voldoet aan (mogelijke) wetgeving over webtoegankelijkheid
• Beter SEO-resultaten (je site kan beter worden geanalyseerd)
• Consistent design ("Designing with cognitive accessibility will lead to good design practices", MDN)
• Betere testbaarheid (met bijv. Playwright)

Verbeteringen aan mijn site(s)

Zoals ik aan het begin vermeldde, voldoen mijn sites ook niet aan alle web accessibility guidelines. Ik ga verbeteringen doorvoeren aan mijn sites en deze toelichten in een aparte blogpost. Hierbij zal ik mijn gehele proces uiteenzetten.

Conclusie

Door accessibility features toe te passen, zorg je ervoor dat je website voor iedereen bruikbaar is. Daarnaast levert het ook voordelen op zoals betere SEO en een robuuster ontwerp.

Het doel van accessibility features is dat iedereen hetzelfde met je website moet kunnen doen, ongeacht een beperking waar iemand mee te maken heeft.

Er zijn verschillende technieken die je kunt toepassen om dit te bereiken, zoals het gebruik van semantic HTML, WAI-ARIA en juiste vormgeving.

Voor deze blogpost heb ik verschillende bronnen geraadpleegd. De belangrijkste zijn, waar je tevens diepere informatie kunt vinden:

• MDN Web Docs
• W3C
• The A11Y Project