Webrichtlijnen: content invoeren in het CMS
Wil je aan de webrichtlijnen voldoen, dan schrijf je toegankelijke, leesbare teksten. Hoe je dat doet, lichtte ik toe in mijn vorige blog. Nu komen we bij de volgende stap: waar houd je rekening mee als je je content invoert in het CMS?
Op dit punt zijn de eisen van de webrichtlijnen een stuk concreter. Voldoet je website hier bij een toetsing op de webrichtlijnen niet aan, 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.
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.
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 geen 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.
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.
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.
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.
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.
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 zo’n blauw 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:
- Lees meer over de webrichtlijnen voor hyperlinks (opent in nieuw venster)
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 in mijn vorige blog al schreef, komen toegankelijke teksten over het algemeen hoger in de zoekresultaten. Ook bovengenoemde tips maken je website beter vindbaar. 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!