Deel 2 - Toegankelijkheid in de praktijk


Wat zijn de belangrijkste pijlers van online toegankelijkheid?

Scroll down icon

Scrol naar beneden

Toegankelijkheidseisen, zoals de WCAG, kunnen op het eerste gezicht intimiderend zijn. Ze zijn technisch van aard en lijken ingewikkeld voor mensen die net aan de slag gaan met toegankelijkheid. Gelukkig kun je de belangrijkste best practices van de online toegankelijkheid eenvoudig implementeren via je CMS. Verbeter direct de gebruikersvriendelijkheid van je website en bouw een solide basis voor verdere verbeteringen door met deze onderwerpen te beginnen:

Icon with a big letter T and text lines

Paginatitels

Icon with H1 written

Koppen

Icon representing a graphic

Illustraties

Icon of a link

Links

Icon of a table

Tabellen en formulieren

Icon of a semantic markup

Semantische (gedefinieerde) opmaaktaal

Het lijkt lastig om te weten waar je moet beginnen als je nog niet eerder aan online toegankelijkheid hebt gewerkt. Wat krijgt de hoogste prioriteit? Om te beginnen raden we je aan om in ieder geval de zes onderstaande best practices voor toegankelijkheid te implementeren.

1. Geef webpagina’s een inhoudelijke titel

Het eerste wat een schermlezer op een webpagina tegenkomt is de paginatitel. Deze titel is voor schermlezergebruikers heel belangrijk, omdat ze daaraan aflezen wat voor inhoud ze op de pagina kunnen verwachten. Met inhoudelijke paginatitels voldoe je aan succescriterium 2.4.2 van de WCAG.

Als bijkomend voordeel verbeter je met beschrijvende paginatitels ook je SEO. Gebruik een geautomatiseerde tool om snel te zien op welke pagina’s de titel ontbreekt, waar de titel te lang is of waar hij te kort is.

2. Bied ondersteuning voor bezoekers die geen muis kunnen gebruiken

Zet als eerste element een link op de pagina om het bovenste blok over te slaan. Daarmee kunnen gebruikers delen overslaan die op elke pagina worden herhaald, zoals de koptekst of het menu. Met dit soort ‘skip to’-links springen keyboardgebruikers direct naar specifieke content op de pagina, zoals de navigatie, de daadwerkelijke inhoud of de footer. Anders moeten deze bezoekers steeds van links naar rechts en van boven naar beneden de hele pagina doornemen en door elk element heen gaan tijdens het navigeren. Dat is vervelend en frustrerend. Bezoekers zullen je site dan eerder verlaten, wat je bouncepercentage negatief beïnvloedt.

Als je wilt, kun je de ‘skip to’-link visueel verbergen, zolang hij maar zichtbaar is als hij de focus heeft (dat wil zeggen: als hij oplicht wanneer de gebruiker op de Tab-toets drukt). Als je bezoekers die geen muis kunnen gebruiken een handje helpt, voldoe je aan succescriterium 2.4.1 van de WCAG.

3. Voeg alt-teksten toe aan belangrijke afbeeldingen

Neem je belangrijkste pagina en je templates door en bekijk of je afbeeldingen voorzien moeten worden van een beschrijving in de vorm van ‘alternatieve tekst’ of alt-tekst. De code voor alt teksten (alt="") moet voor elke afbeelding aanwezig zijn. Voor afbeeldingen die alleen aan de lay-out bijdragen of decoratief zijn kan de beschrijving tussen de aanhalingstekens worden weggelaten. Als de afbeelding informatie bevat die je niet mee zou krijgen als je de afbeelding niet zou zien, moet deze informatie worden opgenomen in de alt-tekst. Is de afbeelding een link? Beschrijf dan de pagina waar de link naartoe wijst.

Als je alt teksten voor afbeeldingen toevoegt, voldoe je aan een essentieel onderdeel van succescriterium 1.1.1 van de WCAG.

4. Zorg voor toegankelijke multimedia op je website

Met multimedia, zoals video’s, pdf’s, audio en infographics, spreek je je bezoeker aan en maak je het delen gemakkelijk. Maar deze content is vaak een struikelblok voor mensen met een beperking als je niet zorgt dat ze even goed toegang kunnen krijgen als je andere bezoekers. Volgens de eisen van de WCAG moeten filmpjes, geluidsbestanden en animaties voorzien zijn van een toegankelijk alternatief, zoals transcripties, ondertitels of audiodescriptie. Deze alternatieven moeten makkelijk terug te vinden zijn. Het is ook belangrijk om te zorgen dat je multimediacontent geen ‘keyboard trap’ wordt. Daarbij kunnen gebruikers die met een keyboard navigeren niet meer weg van je video als ze hem eenmaal hebben geselecteerd. Met toegankelijke multimedia voldoe je aan succescriteria 1.2, 1.2.1, 1.2.2 en 1.2.4 van de WCAG.

5. Zorg voor voldoende kleurcontrast

Het lijkt misschien een uitdaging om kleuren, branding en visuals te kiezen die je online toegankelijkheid ten goede komen. Maar het is zeker mogelijk om een prachtige, kleurrijke website te maken die toegankelijk is voor mensen met een verscheidenheid aan visuele beperkingen. Het is een goed idee om te controleren of er genoeg contrast is tussen de tekstkleur en de achtergrondkleur op je website met een kleurcontrastchecker. Als je deze controles verwerkt in je merkrichtlijnen en stijlgids, voldoe je aan succescriterium 1.4.3 van de WCAG.

6. Vergeet de mobiele online ervaring niet

Een basisprincipe bij het optimaliseren voor toegankelijkheid is dat je er niet alleen voor zorgt dat je website voor bepaalde platformen geschikt is, maar dat je zorgt dat hij op uiteenlopende devices werkt en gebruikt kan worden. Je website moet bijvoorbeeld responsive zijn. Dat houdt in dat hij zich aanpast aan verschillende devices en displaygroottes, waarbij je steeds een goede gebruikerservaring biedt. Als je zorgt dat je website responsive is en dat je op mobiel dezelfde informatie en structuur biedt, voldoe je aan succescriterium 1.3 van de WCAG.

Online toegankelijkheid: de verstandelijke kant

Als je de best practices van design, content en coding volgt, kun je een betere gebruikerservaring bieden aan mensen met uiteenlopende capaciteiten of beperkingen op verstandelijk vlak. Neem bijvoorbeeld opmaakstijlen en de indeling van je content. Op dat vlak heb je verschillende kansen om de gebruikerservaring voor mensen met een verstandelijke beperking te verbeteren:

  • Lijsten en koppen op de juiste manier opmaken, bijvoorbeeld door een kop met de tag H1 op te maken in plaats van deze alleen vetgedrukt te maken
  • Meer witruimte in de lay-out verwerken
  • Content opdelen in kortere, overzichtelijke alinea’s, zodat de gebruiker snel kan lezen
  • Formulieren eenvoudiger maken door ze op te delen in afzonderlijke opeenvolgende stappen
  • Een logische leesvolgorde aanbieden voor webpagina’s en documenten
  • Consequent zijn met de plaatsing van pagina-elementen en het gebruik van fonts en kleuren
  • Keyboardnavigatie aanbieden voor mensen die webpagina’s en documenten gebruiken zonder muis
  • Content in verschillende vormen aanbieden, zoals transcripties van podcasts