Wat is webtoegankelijkheid?

Webtoegankelijkheid is belangrijk. Het zorgt er namelijk voor dat jouw website bruikbaar wordt voor iedereen. Ook voor bezoekers die bijvoorbeeld dyslexie of (kleuren)blindheid hebben. Hoe je dit doet? Door bepaalde keuzes te maken in het design, maar ook door andere technieken toe te passen. In dit blog vertellen wij je graag meer over webtoegankelijkheid en hoe je dit toepast op jouw website.

Waarom is webtoegankelijkheid belangrijk?

Webtoegankelijkheid is belangrijk, omdat je er met een toegankelijke website voor zorgt dat iedereen jouw website kan bezoeken. Denk dan vooral aan mensen met slecht of geen zicht of kleurenblinden, doofheid of gehoorverlies, cognitieve handicaps en lichamelijke handicaps. Wanneer jouw website niet is gebouwd met deze groep bezoekers in gedachten is de kans groot dat zij problemen zullen ervaren tijdens het navigeren. In sommige gevallen is het zelfs mogelijk dat zij helemaal geen gebruik kunnen maken van jouw website.

Wanneer een groep bezoekers geen gebruik kan maken van jouw website, omdat deze niet toegankelijk genoeg is, is dit niet alleen jammer. Het zorgt namelijk ook voor een minder groot bereik. Naast de hierboven benoemde doelgroep hebben ook senioren, mensen met dyslexie en mensen die Nederlands als tweede taal spreken baat bij een toegankelijke website.

De richtlijnen voor webtoegankelijkheid

Om het mogelijk te maken dat iedereen zijn of haar website zo toegankelijk mogelijk kan maken, heeft World Wide Web Consortium (W3C) richtlijnen ontwikkeld voor de toegankelijkheid van webcontent. Deze richtlijnen staan beschreven in de Web Content Accessability Guidelines (WCAG). De eerste versie hiervan werd in 2008 gepubliceerd. Tien jaar later, in 2018, is versie 2.1 uitgekomen. Deze versie is op dit moment de leidende variant.

De richtlijnen uit de WCAG zijn opgedeeld in drie verschillende niveaus, namelijk:

• A (beginner)
• AA (gemiddeld)
• AAA (geavanceerd)

De richtlijnen uit niveau A vormen de basis voor webtoegankelijkheid en bevatten 30 criteria. Deze zijn over het algemeen redelijk eenvoudig te behalen. Voor niveau AA komen hier nog 20 criteria bij, waardoor webcontent dus in totaal aan 50 criteria moet voldoen. Deze zijn iets minder eenvoudig. Het laatste niveau, AAA, bestaat uit nog meer richtlijnen. In totaal kent dit niveau 73 richtlijnen. Dit niveau is best lastig te behalen en het merendeel van alle websites voldoen ook niet aan dit niveau.

Websites van overheidsinstanties zijn verplicht om te voldoen aan zowel niveau A als aan AA. Niveau AAA is niet verplicht.

Wanneer is mijn website of app toegankelijk?

Voldoet jouw website aan niveau A of AA van de WCAG? Dan kun je via Stichting Drempelvrij.nl in aanmerking komen voor een waarmerk. Een van de aangesloten inspectie-instellingen gaat jouw website inspecteren. Kom je door de inspectie heen en kun je aantonen dat je jouw website blijft door ontwikkelen zodat jouw website blijft voldoen aan het gekozen niveau? Dan mag je het logo van Stichting drempelvrij.nl op je website plaatsen. Daarnaast kom je ook in het register van Waarmerkdragers te staan. Het waarmerklogo is drie jaar geldig.

Welke punten worden behandeld in de WCAG?

De richtlijnen van de WCAG zijn opgedeeld in vier hoofdcategorieën: waarneembaar, bedienbaar, begrijpelijk en robuust. Iedere categorie heeft een lijst met criteria waarbij per criterium wordt aangegeven om welk niveau het gaat: A, AA of AAA.

Voorbeelden van criteria voor niveau A zijn:

• Criteria 1.2.3.: video’s met audio die vooraf zijn opgenomen, zijn voorzien van een tekstueel alternatief of van een audiodescriptie. Hierin wordt belangrijke visuele informatie toegelicht.
• Criteria 2.1.1.: de website is toegankelijk voor gebruikers die alleen hun toetsenbord kunnen gebruiken.

Voorbeelden van criteria voor niveau AA zijn:

• Criteria 1.2.4.: video’s met audio die vooraf zijn opgenomen, zijn voorzien van een audiodescriptie.
• Criteria 2.4.7.: toetsenbordbegeleiding is zichtbaar en helder.
• Criteria 1.4.3.: de contrastverhouding tussen de tekst en de achtergrond is minimaal 4,5;1.

Voorbeelden van criteria voor niveau AAA zijn:

• Criteria 1.2.7.: video’s hebben een uitgebreide audiodescriptie. Gebruikers met een functiebeperking moeten dezelfde informatie ontvangen uit de video als andere gebruikers.
• Criteria 2.1.3.: de website is volledig bruikbaar wanneer gebruikers alleen een toetsenbord gebruiken.
• Criteria 1.4.6.: de contrastverhouding tussen de tekst en de achtergrond is minimaal 7:1.

De volledige lijst met richtlijnen voor toegankelijkheid van webcontent vind je op de website van de WCAG.

Welke zaken kan ik zelf doorvoeren om toegankelijker te zijn?

Er zijn een hoop punten die je zelf kunt doorvoeren om jouw website toegankelijker te maken. Wij geven je graag een aantal tips die een positieve invloed hebben op de toegankelijkheid van jouw website.

Tip 1: voeg alt-tags toe aan afbeeldingen.
Een alt-tag wordt gebruikt om een afbeelding te beschrijven. Door een duidelijke beschrijving toe te voegen aan de alt-tag kan iedere lezer zien waar de afbeelding over gaat.
De alt-tag voeg je toe aan het afbeeldingselement in jouw HTML-code. Het ziet er zo uit:

Tip 2: voeg labels toe aan formuliervelden.
Door labels toe te voegen aan formuliervelden, maak je duidelijk wat de doelen van de invoervelden zijn. Hierdoor worden formulieren makkelijker te begrijpen voor schermlezers.

Labels kun je dus het beste voor ieder veld in jouw formulier toevoegen. Het ziet er zo uit:

Tip 3: zorg voor voldoende contrast tussen de elementen.
Door te zorgen voor voldoende contrast tussen verschillende elementen, maak je teksten beter leesbaar.

Tip 4: geef hyperlinks een beschrijvende naam.
Gebruik geen ‘klik hier’ in jouw teksten, maar geef hyperlinks een beschrijvende naam. Is dit lastig of niet mogelijk? Zorg er dan voor dat je jouw hyperlink een label meegeeft met een beschrijving van de actie van de link.

De actie van de hyperlink is in dit geval eenvoudig uit de context op te halen.

Bij deze knop is het niet direct duidelijk wat er gedownload kan worden.

Door een ‘aria-label’ toe te voegen kun je beschrijven wat de knop doet.

Meer weten over webtoegankelijkheid?

Wil je meer weten over webtoegankelijkheid, omdat je dit wil toepassen op jouw website? Of heb je hulp nodig bij het toegankelijk maken van jouw website? Neem gerust contact met ons op. Wij helpen je graag!