Expert Talks | Het belang van accessible websites

Waarom is accessibility zo belangrijk?

Voor heel wat mensen is een toegankelijke website vanzelfsprekend. Maar wist je dat 15 tot 20% van alle website bezoekers een minder zorgeloze ervaring hebben op het web? Dit komt doordat ze een visuele, gehoor, motorische of cognitieve beperking hebben. Maar als developers vinden we dat iedereen recht heeft op een aangename ervaring online. Daarom is het van belang dat je site ook geoptimaliseerd wordt voor mensen met een eerder vernoemde beperking. Lees hier hoe je als front-end developer een optimale ervaring kunt creëren voor élke gebruiker.

Allereerst zullen we een aantal basis termen bespreken. We beginnen met A11y en WCAG. Het eerste staat voor Accessibility (ofwel toegankelijkheid) en wordt uitgesproken als “Ally”. WCAG, of in het lang Web Content Accessibility Guidelines, is een algemene verzameling van richtlijnen en criteria om websites zo inclusief mogelijk te maken.

Dan, aria-attributen. Deze attributen zullen je als developer wellicht niet onbekend zijn. Ze worden ingezet om de leesbaarheid van webpagina’s te optimaliseren voor screenreaders. En als laatste mogen we ook de POUR principes niet vergeten. Deze focussen op de inhoud van websites. POUR staat voor Perceivable, Operable, Understandable en Robust. Elk principe wordt hier in detail besproken.

Allemaal goed en wel, maar waar begin ik?

Op het internet werd al enorm veel geschreven rond richtlijnen en best practices om je website zo inclusief mogelijk te maken. De hoeveelheid informatie kan soms overweldigend zijn, maar een goede plek om te starten, zijn de A11ycasts van Google. Dit is een videoreeks waarin een aantal belangrijke basisprincipes eenvoudig en concreet worden uitgelegd. Een tweede handige bron is de checklist van The A11y Project, gebaseerd op de criteria van de WCAG Guidelines. Deze lijst komt goed van pas, om te testen hoe inclusief je eigen websites zijn. Wil je bijleren over het gebruik van aria-attributen, dan kan je terecht bij MDN voor een uitgebreide (maar duidelijke) overview.

Klinkt dit allemaal heel interessant, maar heb je geen tijd om je volledig te verdiepen in al deze principes, richtlijnen en best practices? Say no more! Hier zijn enkele key steps waar je nu al Deze attributen aan de slag kan:

• Zorg voor voldoende kleurcontrast tussen teksten en hun achtergrond.
• Let op de correcte semantiek en een logische volgorde van je HTML.
• Voorzie bij elk image element een alt-attribuut.
• Voeg een bijbehorend label toe aan alle input elementen.
• Zorg ervoor dat je website navigeerbaar is met de tab-toets én dat het steeds duidelijk is op welk element gefocust wordt.

Conclusie

We horen je al denken: “Dit lijkt allemaal best veel moeite voor iets wat de meeste bezoekers nooit nodig zullen hebben”, denk dan even aan het cijfer dat we in het begin aanhaalden. Reken dus maar op minst 15% van jouw bezoekers die maar al te graag gebruik zullen maken van jouw 'toegankelijkheidsfuncties'.

Door je toe te leggen op accessibility maak je een wereld van verschil bij een doelgroep die nog te vaak over het hoofd gezien worden. Dus, remember: als front-end developer kan jij meebouwen aan een toekomst waarin websites voor iederéén toegankelijk zijn. Geweldig, toch? Want zeg nu eerlijk: niks vervelender dan een onoverzichtelijke en complexe website!