WCAG: 4 tips om je website digitoegankelijker te maken

Natuurlijk wil je als organisatie en als merk inclusief zijn en niemand uitsluiten. Als je daarbij bedenkt dat 3 tot 4 miljoen Nederlanders een functionele beperking hebben dan wordt snel duidelijk dat er veel te winnen valt, ook commercieel. Sterker nog, omdat een goed toegankelijke website beter wordt geïndexeerd door Google, word je ook beter bereikbaar voor miljoenen anderen. Alle reden dus om aan de slag te gaan.

Maar dat is makkelijker gezegd dan gedaan, iets dat ik zelf heb ervaren. Het afgelopen jaar heb ik als front-end developer namelijk veel tijd besteed aan het ‘drempelvrij’ maken van de nieuwe website van HVC (meer daarover lees je hier). En aan onze eigen site is op dat vlak ook nog veel te verbeteren. Om je op weg te helpen geef ik je vier tips die vrij eenvoudig zijn te implementeren maar die gegarandeerd de toegankelijkheid van jouw website zullen verbeteren.

Vaak zie je onder onder de ‘aankeiler’ (introductie) van een nieuwsbericht een ‘Lees meer’ knop. Deze knop is heel logisch als je ziet dat het bij het desbetreffende nieuwsbericht hoort. Mensen met een visuele beperking ‘zien’ deze knop echter niet. Blinden en slechtzienden gebruiken daarom vaak een screen reader, een programma dat de website scant en daarna voorleest. Om hen te bedienen is het belangrijk om individuele links hun eigen context mee te geven. Een linktekst voor dit artikel zou bijvoorbeeld kunnen zijn: ‘Lees de tips van Boaz’’. Op deze manier geef je een link de context die mensen met een visuele beperking nodig hebben om te begrijpen waar ze heen navigeren.

Net als bij de voorgaande tip is het voor screen readers belangrijk dat alle html-elementen ‘gewrapped’ zijn in een area landmark als <nav />, <footer /> of <main />. Op deze manier kan de screen reader gemakkelijk uitlezen wat de opbouw is van de website. Het heeft de voorkeur HTML5-elementen te gebruiken (zoals de hierboven genoemde) maar je kunt eventueel ook aangeven wat voor landmark je html-element is met het ‘role-attribuut’. Zo zou je bijvoorbeeld <div role=”nav” /> kunnen gebruiken wat hetzelfde werkt als <nav />.

Mensen die snel misselijk worden of epilepsie hebben, willen graag zo min mogelijk animaties zien. Laptops en smartphones bieden daarom vaak een ‘prefers-reduced-motion’ instelling. Hierdoor worden ‘bewegingen’ als pagina-transities en andere subtiele animaties volledig uitgeschakeld. Althans, alle ‘native’ animaties. Het gaat dan om de animaties die worden getriggerd door het apparaat zelf, zoals je ziet bij het openen van een app of het afsluiten van het apparaat.

Deze instelling is ontzettend handig, ook omdat deze uitgelezen kan worden in een website. Zo kun je ervoor zorgen dat de animaties in jouw website zich aanpassen als een gebruiker deze instelling heeft geactiveerd. Dat doe je door middel van de css prefers-reduced-motion media query, die er als volgt uit ziet:

@media (prefers-reduced-motion) {
   transition: none;
 }

In het voorbeeld hierboven worden, middels deze media query, conditioneel de animaties aan- en uitgezet op basis van of de instelling van de gebruiker. Super handig en super simpel!

Heb je de smaak te pakken? Pluk dan dit laaghangend fruit om de toegankelijkheid van je website nog verder te verbeteren.

• Gebruik een default font size van minimaal 9 pt (=12px) voor een optimale leesbaarheid, ook op kleinere schermen.
• Mensen met een motorische beperking navigeren vaak met de tab-toets in plaats van met een muis. Met een attribuut kun je van iedere link aangeven of deze in de ‘tabbing sequence’ hoort. Maak het jezelf daarbij makkelijk door te zorgen dat de volgorde van de zichtbare links overeenkomen met de HTML, anders moet je hiervoor corrigeren door middel van tabindex attributen. Zorg er bovendien voor dat de allereerste tab in de tabbing sequence de skip-to-content link is zodat personen met een visuele beperking direct naar de inhoud kunnen navigeren om zich door de eerder genoemde screen reader voor te laten lezen.
• Zorg er altijd voor dat de contrastverhouding tussen tekst en achtergrond minimaal maar liever meer dan 4,5:1 is. Dit artikel (en daarmee onze eigen website) is helaas een voorbeeld van hoe het niet moet, het contrast tussen bodytekst en achtergrond is niet groot genoeg. Begin volgend jaar gaan we met deze en andere verbeterpunten aan de slag. Beloofd.

Sommige richtlijnen staan op gespannen voet met de uitgangspunten voor goed UX-design. Neem bijvoorbeeld de semantiek van je titels. Om compliant te zijn met WCAG 2.0 A + AA moeten deze de semantiek van H1, H2, H3, H4 volgen. Soms, echter, komt deze rigide benadering het ontwerp niet ten goede en ben je geneigd hier van af te wijken. Die keuze is natuurlijk aan jou en in hoeverre je wettelijk verplicht bent hieraan te voldoen. Toch is het vaak een schijntegenstelling en vraagt het vooral om creativiteit. In een ander artikel gaat mijn collega, product designer Semih Yilmaz, hier dieper op in en helpt hij je om de twee met elkaar te verenigen. Lees het artikel "Hoe ontwerp je digitoegankelijk én esthetisch?".

Kun je net als HVC wel wat hulp gebruiken bij het toegankelijk maken van je website zonder dat het ten koste gaat van de gebruikservaring?