De technische basis van een WCAG-toegankelijke website

Een website toegankelijk maken kost tijd, geld en kennis. Maar waar moet je precies op letten als je je website toegankelijker gaat maken? En welke tools kun je gebruiken om het proces makkelijker te maken? In dit blog helpen we jou op weg met de praktische implementatie van je WCAG-plan.

Een toegankelijke website begint bij een goed design. Hierbij is kleurcontrast belangrijk voor de leesbaarheid van je tekst. Bij WCAG niveau AA moet de contrastverhouding tussen tekst en achtergrond minimaal 4.5:1 zijn (voor grote text 3:1). Bovendien mag kleur niet de enige manier zijn om informatie over te brengen, maar moet je een extra visueel element of tekst toevoegen. Denk bijvoorbeeld aan een webshop die een product in verschillende kleuren aanbiedt. Het is dan belangrijk om de kleuropties te verduidelijken door een label of tooltip met de kleurnaam toe te voegen. Zo weten ook mensen met (kleuren)blindheid welke productvariant ze bestellen.

Handige tools:

• Gebruik een contrast-checker zoals WebAIM voor het controleren van kleurcontrasten.

Daarnaast is semantische HTML belangrijk voor een gestructureerde website. Door de juiste HTML-elementen te gebruiken wordt de inhoud begrijpelijk en navigeerbaar voor gebruikers en hulp technologieën zoals screenreaders. Zorg dat je de koppen (<h1>, <h2> enz.) correct gebruikt om de pagina hiërarchisch op te bouwen. Daarnaast is het belangrijk om formulieren duidelijke labels te geven en ze te koppelen aan invoervelden. Verder moeten de verschillende secties van de website logisch gestructureerd zijn met elementen als <nav> en <header>.

Probeer waar mogelijk de standaard HTML elementen te gebruiken zoals een <dialog> element voor een pop-up notificatie en een <details> of <summary> element voor een dropdown of accordion. Dit helpt omdat screenreaders het ook fijner vinden dan verschillende <div>. Dit zorgt ervoor dat interactieve elementen standaard toegankelijk zijn voor screenreaders en toetsenbordgebruikers, zonder extra complexe code.

Handige tools:

• Gebruik bijvoorbeeld W3C HTML Validator om HTML op juistheid te controleren.
• Gebruik bijvoorbeeld NVDA Screen Reader voor Windows of de voice-over functionaliteit van je Apple product om de schermlezerfunctionaliteit te testen.

Een eenvoudige en intuïtieve navigatie is erg belangrijk voor een toegankelijke website. Dit bereik je door een logische tabvolgorde toe te passen, goed zichtbare focus-indicatoren te gebruiken en ARIA-attributen toe te voegen aan je code (let er wel op waar je ARIA-attributen toepast, omdat te veel labels overbodig of hinderlijk kan zijn). Verder maakt het toevoegen van skip-to-content-links het voor gebruikers makkelijker om direct naar de hoofdinhoud te springen. Gebruik daarnaast tab-traps om te voorkomen dat de gebruiker per ongeluk uit een pop-up navigeert. 

Handige tools:

• Gebruik WAVE Web Accessibility Evaluation Tool voor een navigatie- en ARIA-analyse.
• Gebruik axe DevTools voor toegankelijkheidstests.

Een responsive en schaalbare interface zorgt ervoor dat de website goed functioneert op verschillende schermformaten. In plaats van vaste pixelgroottes kun je beter relatieve eenheden zoals em of rem gebruiken. Daarnaast moet de website volledig bruikbaar blijven bij een zoomniveau tot 200%. Ook moet de site goed functioneren op een minimale breedte van 320px, zodat gebruikers op kleinere apparaten een goede gebruikerservaring hebben.

Handige tools:

• Gebruik Google Lighthouse voor mobiele toegankelijkheidstests.
• Gebruik de device toolbar van de inspector van je webbrowser.

Sommige gebruikers hebben een visuele of auditieve beperking, waardoor alternatieve beschrijvingen noodzakelijk zijn. Zo moeten afbeeldingen die niet decoratief zijn een duidelijke alt-tekst bevatten en moeten decoratieve afbeeldingen een lege alt-tekst bevatten. Verder moeten video's voorzien zijn van ondertiteling en audiodescriptie.

Handige tools:

• Gebruik een ondertiteling-tool zoals Amberscript en een tool voor audiodescriptie zoals Scribit.pro om je video’s toegankelijk te maken.

Een toegankelijke website moet voorspelbaar en fouttolerant zijn. Zo horen formulieren duidelijke foutmeldingen en suggesties te geven, zoals "Vul hier je e-mailadres in" als het veld leeg is, of "Vul een geldig e-mailadres in (bijv. naam@domein.nl)" bij een onjuist ingevuld adres. Duidelijke placeholders en labels boven het invoerveld helpen gebruikers met het invullen van een formulier.

Tot slot kunnen lange laadtijden en zware scripts de toegankelijkheid negatief beïnvloeden. Het minimaliseren van zware JavaScript-frameworks, het optimaliseren van multimedia en het vermijden van knipperende elementen verbeteren zowel de prestaties als de toegankelijkheid van de website.

Handige tools:

• Gebruik bijvoorbeeld PageSpeed Insights om websiteprestaties te verbeteren.

Zoek je een partner die je kan helpen met het toegankelijk maken van je platform? MaxServ volgt ontwikkelingen rondom WCAG nauwgezet en onze developers volgen jaarlijks trainingen omtrent accessibility. Wij kunnen je onder andere helpen met een quickscan en het bouwen van jouw WCAG-compliant website of webshop. Ben je benieuwd naar wat wij voor jouw organisatie kunnen betekenen? Neem dan contact met ons op!