10 tips om aan de webrichtlijnen te voldoen

Sinds 1 januari 2015 moeten alle overheidswebsites in Nederland voldoen aan de webrichtlijnen, versie 2. Ze moeten toegankelijk zijn voor mensen met een beperking, zoals bezoekers die voorleessoftware (een screenreader) gebruiken of die geen muis kunnen vasthouden. Maar dat is nog lang niet altijd het geval. Stichting drempelvrij.nl deed in opdracht van het CVRM in mei 2015 een quickscan onder 393 websites van gemeenten. Wat bleek: slechts 7% voldeed aan de webrichtlijnen. Die schamele 7% leidde zelfs tot Kamervragen, waarop minister Plasterk wetgeving aankondigde als stok achter de deur om gemeentewebsites toegankelijk te maken. Feit is dat een groot aantal gemeenten en andere overheden nog veel werk heeft te verzetten.

Door: Annemieke van Ramshorst

De webrichtlijnen hebben voor een groot deel met technische specificaties te maken. Toch zijn ze ook voor webredacteuren van belang. Bij het schrijven van de content, maar voornamelijk bij het invoeren van content in het CMS. Voldoet je website bij een toetsing niet aan de richtlijnen, dan zie je dat zeker terug in de rapportage van de Stichting Accessibility. Je moet dan eerst aanpassingen doen om het waarmerk drempelvrij.nl te krijgen. Maar neem je onderstaande punten in acht, dan komt het met die toetsing ongetwijfeld goed.

Nog even de webrichtlijnen in het kort

De webrichtlijnen gaan uit van de volgende 5 basisprincipes:

  • Universeel. Content moet betekenisvol, voor iedereen bruikbaar, uitwisselbaar en duurzaam zijn.
  • Waarneembaar. Content moet voor iedereen te zien of te lezen zijn. Geef daarom bijvoorbeeld een alternatieve tekst (alt-tekst) aan afbeeldingen. Zorg ook voor voldoende contrast tussen kleuren.
  • Bedienbaar. Iedereen moet een website kunnen bedienen. Ook met spraaksoftware en een toetsenbord.
  • Begrijpelijk. Content moet voor iedereen duidelijk en helder zijn. Zorg daarom voor toegankelijke, leesbare teksten
  • Robuust. Content moet degelijk en multitoepasbaar zijn, zodat verschillende browsers en hulpapparatuur die goed kunnen verwerken.

Om aan bovengenoemde basisprincipes te voldoen, zijn in totaal 51 succescriteria opgesteld. Websites die aan de richtlijnen voldoen, krijgen van Stichting Accessibility het waarmerk drempelvrij.nl. Dit zijn overigens niet alleen overheidswebsites, ook organisaties als SNS Bank en Thuiswinkel.org hebben een drempelvrije website.

1. Schrijf toegankelijke teksten

Zoals gezegd houd je bij het schrijven van je content al rekening met de webrichtlijnen. Maar voor een goede webredacteur is dat eigenlijk niet zo spannend. Zoals je ongetwijfeld weet, lezen mensen anders van een beeldscherm dan van papier. Daarom moeten webteksten altijd eenvoudig zijn en een heldere structuur hebben. Daarnaast zijn toegankelijke teksten goed vindbaar voor zoekmachines. Bijvoorbeeld doordat je informatieve koppen gebruikt. Een website die voldoet aan de webrichtlijnen is dus niet alleen toegankelijk voor mensen met een beperking, maar ook voor al je andere bezoekers én zoekmachines. Mooi meegenomen!

2. Gebruik de juiste kopstijlen

Bij de bouw van een website zijn keuzes gemaakt voor de opmaak van pagina’s. Die afspraken zijn vastgelegd in de Cascading Style Sheets (CSS) van de website. In het CMS hoef je als webredacteur vervolgens alleen maar de juiste opmaakprofielen te kiezen. Dus heading 1 (h1) voor de titel, heading 2 (h2) voor een tussenkop en eventueel heading 3 (h3) voor nog een niveau lager. Houd je hieraan en sla geen niveaus over, ook al ziet dat er soms mooier uit. Voorleessoftware (een screenreader) voor blinden en slechtzienden gebruikt de kopstijlen namelijk om van paragraaf naar paragraaf te springen. Let op: gebruik altijd maar één h1 header op je pagina. In de regel is dit altijd je paginatitel. Alle andere headerstijlen kunnen wel vaker voorkomen. 

3. Gebruik de knoppen in de editor met mate

Maak je tussenkoppen niet op met de knoppen voor vet en cursief in de editor. Ze zien er dan wel uit als kop, maar er zit niet het juiste opmaakprofiel achter. Hierdoor herkent hulpsoftware de tekst niet als kopregel. Je kunt vet (strong) en cursief (em) wel gebruiken om bepaalde woorden of zinsdelen te benadrukken. Maar doe dat met mate, want je tekst wordt er minder leesbaar van. Gebruik de knoppen voor onderstrepen, lettertype en kleur niet. Alle opmaakstijlen zijn vastgelegd in de CSS, dus wijk daar niet van af. Daar wordt je vormgever ook gelukkiger van.

4. Zorg voor een schone html

Bij een toetsing op de webrichtlijnen mag er geen overbodige – dus nutteloze – code in de html van je webpagina staan. Dit gebeurt bijvoorbeeld als je een kop eerst vet maakt met strong en vervolgens een opmaakprofiel kiest. De code voor vet staat er dan onnodig in. Je kunt dit controleren door in het CMS naar de html-modus te gaan en overbodige code te verwijderen. Er zijn ook handige tools om webpagina’s in 1 keer op fouten te checken, zoals validator.w3.org.

5. Geef video’s ondertiteling én audiodescriptie

Steeds meer websites maken gebruik van video. Maar de webrichtlijnen stellen hieraan strenge eisen. Video’s moeten namelijk ook toegankelijk zijn voor bezoekers met een auditieve of visuele beperking. Dat betekent dat je video’s niet alleen ondertiteling, maar ook een audiodescriptie moeten bevatten. Een audiodescriptie beschrijft wat er op dat moment in beeld is te zien, zodat ook iemand die blind is de video kan begrijpen. Hierop is 1 uitzondering: als de video een alternatief is voor de tekst op de pagina, hoef je helemaal geen ondertiteling of audiodescriptie toe te voegen. Wees er wel zeker van dat de video niet meer informatie biedt dan in de tekst staat en vermeld duidelijk dat de video slechts een alternatief is voor de tekst. 

6. Geef afbeeldingen een alt-tekst

Als je je tekst met afbeeldingen ondersteunt, geef je die een alternatieve tekst (alt-tekst). Gebruiken bezoekers een screenreader, dan leest die deze alt-tekst aan ze voor. Let op: puur illustratieve afbeeldingen geef je geen alt-tekst. Zulke afbeeldingen zijn niet noodzakelijk om de boodschap te begrijpen en leveren juist eerder verwarring op.

7. Plaats geen afbeeldingen van tabellen of teksten

Gebruik het liefst zo min mogelijk tabellen. Die zijn namelijk moeilijk te begrijpen voor hulpsoftware. Wil je toch een – eenvoudige – tabel plaatsen, plak die dan niet als afbeelding in je pagina, maar gebruik daarvoor html-codes. Maak ook geen plaatjes van tekst. Ook al ziet dat er soms mooier uit, bijvoorbeeld bij een gedicht. In beide gevallen geldt namelijk weer: deze tabellen en teksten zijn niet herkenbaar voor screenreaders.

8. Maak hyperlinks begrijpelijk

Op sommige websites kom je ze nog tegen: hyperlinks met de tekst ‘klik hier’. Dat is tegenwoordig echt niet meer nodig. Inmiddels weet iedereen wel dat je op onderstreepte tekst kunt klikken. Belangrijker is om in de hyperlinktekst informatie te geven over de inhoud van de link. En opent je link in een nieuw venster? Laat dat je bezoeker weten. Een voorbeeld van een begrijpelijke link:

9. Plaats toegankelijke pdf-bestanden

Weet je zeker dat je een pdf wilt plaatsen? Pdf-bestanden zijn oorspronkelijk niet bedoeld voor online gebruik. Je content als pdf plaatsen gaat dan ook niet alleen ten koste van de toegankelijkheid, maar ook van de vindbaarheid, meetbaarheid en gebruikerservaring. Dus als het mogelijk is, kies dan gewoon voor html. Wil je toch graag een pdf-bestand online plaatsen, zorg dan dat die toegankelijk is en is opgeslagen in een open format (PDF 1.7 of PDF/A).

10. Zorg dat je bezoeker weet wat hij downloadt

Als je link naar een downloadbaar bestand leidt, geef dan altijd het bestandstype en -formaat aan. Dat doe je bijvoorbeeld met ‘(PDF, 845 KB)’. Zo weet je bezoeker vooraf wat hij gaat downloaden als hij op de link klikt en hoe lang dat ongeveer gaat duren.

Scoren in de zoekresultaten

Zoals ik hierboven al schreef, komen toegankelijke teksten over het algemeen hoger in de zoekresultaten. Ook bovengenoemde tips maken je website beter vindbaar. De bekendste blinde gebruiker ter wereld heet namelijk Google. Zoekmachines waarderen bijvoorbeeld het gebruik van kopstijlen. En doordat je een omschrijving geeft van niet-tekstuele content als video’s en afbeeldingen, kunnen zoekmachines je pagina’s beter ‘lezen’. Scoren maar dus!