Tijd om webtoegankelijkheid serieus te nemen! 8 tips voor je website

Ongeveer 80 miljoen mensen in de EU en maar liefst 4 miljoen Nederlandse internetgebruikers geven aan een beperking te hebben. Omdat de bevolking in rap tempo vergrijst, zal dit getal alleen maar groter worden. Het aantal mensen met een beperking of een leeftijdsgerelateerd probleem bij internetgebruik, zal in 2020 volgens schattingen gestegen zijn tot maar liefst 120 miljoen mensen in de EU. Het toegankelijk maken van websites zou daarom een wezenlijk onderdeel moeten zijn van iedere digitale strategie. Maar waar begin je?

Als een website op de juiste manier ontworpen én onderhouden wordt, hebben alle potentiële bezoekers toegang tot dezelfde functionaliteit en inhoud. Met een toegankelijke website neem je niet alleen maatschappelijke verantwoordelijkheid voor mensen met een beperking, alle bezoekers zijn erbij gebaat. Denk bijvoorbeeld aan mensen die een andere taal spreken, of mensen die je site bekijken op een klein mobiel schermpje. Daarbij scoort een website die toegankelijk gestructureerd is, hoger in de zoekmachines. Genoeg reden om webtoegankelijkheid serieus te nemen, maar voor een succesvolle uitvoering moet je wel flink aan de slag.

Met een toegankelijke website neem je niet alleen maatschappelijke verantwoordelijkheid voor mensen met een beperking, alle bezoekers zijn erbij gebaat.

Wat houdt webtoegankelijkheid in?

Mensen met een beperking maken vaak gebruik van hulpapparatuur om de computer te bedienen. Het eerste apparaat waar de meeste mensen aan denken is waarschijnlijk de screenreader (een softwaretool die de tekst op pagina’s hardop voorleest aan mensen met gezichtsproblemen of dyslexie), maar een website kan nog meer obstakels opwerpen.

Denk bijvoorbeeld aan ouderen die niet meer zo’n vaste hand hebben. Voor hen moet een website ook zonder muis navigeerbaar zijn, bijvoorbeeld door zogenaamde skip-links in de html-code te plaatsen. Met deze (voor de gemiddelde bezoeker onzichtbare) hyperlinks, kunnen gebruikers van een screenreader delen van de pagina overslaan en direct navigeren naar de onderdelen die zij belangrijk vinden.

Tools

Informatieve video’s met gesproken tekst zijn problematisch voor doven en slechthorenden. Zij zijn dan ook erg gebaat bij alternatieve manieren waarmee zij deze content tot zich kunnen nemen, zoals transcripts of ondertiteling (closed captions). Daarnaast zijn er nog vele andere technologieën die mensen assisteren bij het navigeren van het web. Denk aan kleurcontrast-analysatoren, de ingebouwde toegankelijkheidsfuncties in Windows en Mac en verschillende browser-plugins en -extenties. Bij het laatste kan het gaan om zoom-tools, voice command-browsers en tools die de ‘ruis’ op een pagina verbergen om de tekst leesbaarder te maken.

Dankzij deze technologieën kunnen mensen met een beperking vaak uitstekend internetten, maar dan moeten websites wel op de juiste manier zijn gebouwd. Er is bijvoorbeeld nog geen screenreader ontwikkeld die zelfstandig de inhoud van een afbeelding kan verwoorden.

Een geoptimaliseerde website scoort beter

Allereerst neem je met een toegankelijk website natuurlijk sociale en maatschappelijke verantwoordelijkheid om alle mensen dezelfde toegang tot de informatie op je website te bieden, ongeacht of ze een beperking hebben of niet. Maar als je verder kijkt dan alleen de doelgroep die je buitensluit, dan blijken er nog veel meer voordelen aan een geoptimaliseerde website verbonden te zijn.

Als je HTML-code (zoals bijvoorbeeld de headers in je teksten) op de juiste manier gebruikt, dan zorgt dat voor teksten waar zoekmachines beter mee uit de voeten kunnen. Ze kunnen dan veel makkelijker zien waar de tekst over gaat en welke stukken tekst belangrijk zijn. Eigenlijk zou je Google kunnen zien als een blinde gebruiker. Als Google je site goed kan begrijpen, dan kan iemand met gezichtsproblemen dat waarschijnlijk ook.

Neem bijvoorbeeld de afbeeldingen op je site. Google ziet dat er een afbeelding staat, maar de technologie is nog niet zo vergevorderd dat de crawl-robot van de zoekmachine begrijpt wat er precies op de afbeelding te zien is. Daarom is het van belang dat je de afbeeldingen van zogenaamde alt-teksten voorziet, die de inhoud van de afbeelding kort samenvatten. Dat is niet alleen goed voor blinden en slechtzienden die je site bekijken met een screenreader, maar ook voor je notering in de zoekmachines.

Structuur

Uiteindelijk wordt een bezoek aan je site een prettiger ervaring voor al je bezoekers als je voldoende aandacht besteed aan de leesbaarheid, de gebruiksvriendelijkheid en de toegankelijkheid van je website. Het dwingt je namelijk min of meer om de informatie op een duidelijke manier te structureren. Dat zorgt ervoor dat iedereen in één oogopslag kan begrijpen hoe de website in elkaar steekt en wat belangrijk is.

Wetgeving bij webtoegankelijkheid

Op 22 december 2016 werd een nieuwe EU-richtlijn afgegeven, die beschrijft waaraan de websites van overheidsinstellingen dienen te voldoen op het gebied van toegankelijkheid. In de richtlijn staat bijvoorbeeld dat er voor content zonder tekst, zoals video, een tekstalternatief moet worden geboden. En dat alle functionaliteit niet alleen met een muis, maar ook met een keyboard is aan te roepen.

Hoewel de richtlijn vooralsnog alleen bedoeld is voor overheidsinstanties, biedt het natuurlijk ook nuttige inzichten voor andere sectoren. Toegankelijkheid zal steeds meer de norm worden en uiteindelijk zal regelgeving ook voor andere sectoren een rol gaan spelen. Het duurt nog wel even voor het voor het bedrijfsleven verplicht wordt om toegankelijke websites te bouwen, maar dankzij de richtlijnen op dit gebied ontstaat er steeds meer bewustzijn over het onderwerp.

Vergelijk het bijvoorbeeld met duurzaamheid. Je bent niet verplicht om volledig groen te ondernemen, maar je klanten zullen het je niet in dank afnemen als blijkt dat je door je inkoopbeleid bijdraagt aan de vervuiling van onze planeet. Naarmate toegankelijkheid een zichtbaarder onderdeel van het publieke debat wordt, zullen organisaties hier ook steeds meer op beoordeeld gaan worden door hun klanten.

Naarmate toegankelijkheid een zichtbaarder onderdeel van het publieke debat wordt, zullen organisaties hier ook steeds meer op beoordeeld gaan worden door hun klanten.

Werk in uitvoering

Om te zien of je op de goede weg bent en op welke punten je voldoet aan de richtlijnen, is het nuttig om voortdurend je website te monitoren op toegankelijkheid. Dat kun je handmatig doen, maar dat kost erg veel tijd en je kunt zaken over het hoofd zien. Er zijn ook geautomatiseerde oplossingen die ontoegankelijke elementen op je website automatisch aan je rapporteren, zodat je ze dan direct kunt aanpassen.

Ook al is je website niet meteen perfect toegankelijk, als je kunt laten zien dat het je aandacht heeft en dat je eraan werkt, dan heb je al een flinke voorsprong op concurrenten die het geen onderdeel van hun digitale strategie hebben gemaakt. En dat is pure winst.

Om je alvast op weg te helpen, vind je hieronder een aantal verbeterpunten waarmee je direct aan de slag kunt.

1. Zorg voor een overzichtelijke paginastructuur

Besteed voldoende aandacht aan de leesbaarheid en gebruiksvriendelijkheid van je site. Hier zijn alle bezoekers bij gebaat. Organiseer de content op je site in een semantische structuur. Dat wil onder meer zeggen dat je meta-informatie toevoegt, zoals header-tags. Zo kunnen ondersteunende technologieën, zoekmachines én je bezoekers in een oogopslag begrijpen hoe de pagina in elkaar steekt en wat belangrijk is.

2. Plaats skip-links

Plaats zogenaamde skip-links in de HTML-code. Met deze (voor de gemiddelde bezoeker onzichtbare) hyperlinks kunnen gebruikers van een screenreader delen van de pagina overslaan en direct navigeren naar de onderdelen die zij belangrijk vinden.

3. Maak relevante paginatitels

Duidelijke paginatitels die een goede indruk geven van wat er op de pagina te vinden is, zorgen niet alleen voor een betere gebruikservaring voor je bezoekers. Ze zijn ook bijzonder gunstig voor je SEO-resultaten. Zo zorg je voor een makkelijk navigeerbare website en een hogere notering in de zoekmachines.

4. Schrijf duidelijke teksten

Pas op met tekstinstructies die alleen verwijzen naar de locatie op de pagina, zoals ‘in het kader rechts’. Combineer de locatie bijvoorbeeld met de header-tekst van dat kader: ‘in het kader rechts, genaamd overige publicaties’. Geef ook met de juiste tags aan in welke taal een tekst is geschreven, vooral als de tekst intern van taal verandert.

5. Link op een slimme manier

Zorg ervoor dat tekstlinks ook betekenis hebben als je ze los van de context leest. Vermijd bijvoorbeeld links als ‘lees meer’, of ‘klik hier’, maar geef in de linktekst aan waar de link naartoe leidt: ‘klik hier voor het volledige rapport’. Zorg ervoor dat de linktekst niet langer is dan 100 karakters en vermijd het gebruik van de pagina-URL als linktekst.

6. Zorg voor begrijpelijk beeld

Informatie in afbeeldingen gaat aan blinden en slechtzienden grotendeels voorbij. Als je afbeeldingen plaatst op je website, voeg dan alternatieve (alt)tekst toe, die de bedoeling of de inhoud van de afbeelding beschrijft. Als de afbeelding een link bevat, beschrijf dan in de alt-tekst waar de link naartoe leidt. Wees voorzichtig met tekst in plaatjes, want screenreaders en zoekmachines kunnen deze tekst niet lezen.

7. Zorg voor alternatieven voor audio en video

Zorg ervoor dat je voor audiofragmenten op je website een transcript van de tekst biedt, zodat ook doven en slechthorenden de informatie tot zich kunnen nemen. Ook video’s kunnen een duidelijke omschrijving gebruiken. Bied online video daarom altijd aan met gesynchroniseerde captions en eventueel een audiodescriptie.

Zorg voor een gelaagde opzet van de webpagina waarop de video staat. Als de ene techniek dan niet werkt, neemt de volgende het automatisch over. Zorg dat gebruikers ook zelf eventueel een andere laag kunnen kiezen. Lever bijvoorbeeld een SMIL-bestand aan, met daarbij de losse bestanden ter download (video, captions, audio-descriptie).

8. Lijsten en tabellen

Begrijp het verschil tussen geordende, ongeordende en definitielijsten en gebruik ze op de juiste manier. Vermijd het gebruik van lijsten als visueel effect. Hetzelfde geldt voor tabellen: gebruik ze alleen waar ze voor bedoeld zijn, namelijk het presenteren van relationele informatie. Zet de belangrijkste informatie in de eerste kolom en een eventuele ‘call to action’, zoals een aankoopknop, in de meest rechtse kolom.

Hoe toegankelijk is jouw website? En heb je nog aanvullingen op deze verbeterpunten? Ik hoor het graag in de comments.