Publiceer je online jaarverslag WCAG-proof

Circa 4 miljoen Nederlanders hebben te maken met een functionele beperking, bijvoorbeeld (kleuren)blindheid of doofheid, maar ook cognitieve en/of motorische beperkingen. Door deze beperkingen kan het moeilijker zijn om online informatie te raadplegen. 

Wij willen digitale communicatie voor iedereen toegankelijk maken, mede daarom heeft ons CMS verschillende opties om je content drempelvrij te maken. Met resultaat, want verschillende producten van ons hebben - als eerste van Nederland - het drempelvrij-waarmerk! 

Waarneembaar, bedienbaar, begrijpelijk en robuust, dat zijn de principes waarop de toegankelijkheid van online kanalen wordt getoetst. Voldoet je online communicatie aan al deze principes, dan neemt de toegang en gebruiksvriendelijkheid toe. Voor mensen met én zonder een beperking. Win-win!

Dus, heb je de content gevuld in ons CMS, maak je content dan nog toegankelijker met behulp van onderstaande tips. Deze hebben we uiteengezet per principe.

Voordat je verder leest, zorg dat je de voertaal op je website hebt geselecteerd in het CMS. Dat scheelt al veel!

Het is een open deur, maar uiteraard wil je dat alle content waarneembaar is voor iedereen. 

Kleurcontrast

Een belangrijk onderdeel is dat je zorgt voor voldoende kleurcontrast. Onze designers kunnen je hiermee helpen, maar zelf kun je ook al veel doen in de stylingmodule. Belangrijk daarbij is dat tekst en iconen altijd voldoende contrast hebben met de achtergrondkleur. De stylingmodule vind je in het menu aan de linkerzijde onder 'ontwikkeling'.

Alt-tekst

Ook belangrijk voor de waarneembaarheid, is de alt-tekst (alternatieve tekst). Dat houdt in dat je een tekst bij een afbeelding of illustratie plaatst die de afbeelding beschrijft. Bijvoorbeeld: Foto kip op stok. Op die manier kan een screenreader overbrengen wat er op de illustratie te zien is. Je kunt de alternatieve tekst ingeven onder eigenschappen van het desbetreffende component.

Tip: Voorkom tekst in afbeeldingen

Vaak gebeurt het dat er een afbeelding met daarin veel tekst en/of diagrammen in het CMS wordt gezet. Bijvoorbeeld een grafiek met een toelichting. Voorleessoftware kan de tekst in de afbeelding niet uitlezen. Voeg daarom tekst ook echt als tekst toe en niet als afbeelding. 

Niet iedereen is in staat om een muis te bedienen, daarom dient alle content bedienbaar te zijn met het toetsenbord. 

Ondertiteling

Naast alt-teksten, is het wenselijk om ondertiteling en gebarentaal toe te voegen in video's. Maak je gebruik van een YouTube-video, dan kun je in YouTube zelf ondertiteling toevoegen. 

Koppen

Je hebt vaak een duidelijke hiërarchie in de koppen van je publicatie. Om die voor iedereen te laten werken, is het raadzaam om elk component koppen te geven. Daardoor kan iedereen de indeling van je publicatie begrijpen en gemakkelijk tot zich nemen, ongeacht een eventuele beperking. 

Je kunt de koppen ingeven onder eigenschappen van het desbetreffende component. Ook in een tabel kun je koppen plaatsen, dat doe je door een '#' toe te voegen aan het gekoppelde Excel-bestand. 

Skiplinks

Verder zorgt ons CMS voor skiplinks. Dat zijn een soort 'wegwijzers' in de code om blokken met herhalende content (zoals een logo, menu, etc.) te omzeilen. Zo hoeft een bezoeker met een visuele beperking niet telkens het menu te horen, maar kan hij/zij deze gemakkelijk skippen. 

Een derde principe voor online toegankelijkheid is, begrip. Alle content moet begrijpelijk zijn voor de gebruiker.

Tabel bij diagram

Gebruik je een diagram en/of een grafiek in je publicatie, dan is het raadzaam om deze te combineren met een tabel. Op die manier kunnen cijfers die in het diagram staan, ook gelezen worden door screenreaders. 

Je kunt een tabel toevoegen door de optie 'tabel onder diagram tonen' te selecteren, deze optie vind je onder de eigenschappen van het desbetreffende component. 

Labels bij formuliervelden

Wat ook bijdraagt aan het gebruiksgemak, is het labelen van formuliervelden. Bijvoorbeeld, een invoerveld voor een e-mailadres, met het label 'e-mailadres' of 'voornaam', 'woonplaats', etc. Dankzij dit label kunnen screenreaders benoemen wat er gevraagd wordt, zodat de bezoeker de juiste informatie in het juiste veld kwijt kan. 

Je kunt labels toevoegen aan de formuliervelden onder de eigenschappen van het desbetreffende component. 

Extra tip: Stel bij de formuliervelden ook het veld 'automatisch invullen' in. In dat geval proberen de meeste browsers het formulier automatisch in te vullen op basis van de gegevens van de bezoeker. Daarmee is de website nog beter bedienbaar. 

Links

Staat er 'Klik hier' of 'Download whitepaper' als link opgenomen? Wanneer je verwijst naar een andere pagina door middel van een link, is het belangrijk om de linktekst een duidelijke omschrijving mee te geven. 

Je kunt elke omschrijving meegeven aan een tekst door middel van de stylingmodule. Houd deze bij voorkeur kort en krachtig. 

Je hebt de toegankelijkheid van je online communicatie niet helemaal zelf in de hand, ook de techniek moet er goed op ingericht zijn. Aangezien wij voorvechter zijn van digitale inclusie, doen wij er alles aan om onze techniek elke dag een stuk toegankelijker te maken. Want, zolang wij begrijpelijke code schrijven, kunnen browsers, screenreaders en meer systemen de informatie zo goed mogelijk overbrengen. 

Je hebt de toegankelijkheid van je online communicatie niet helemaal zelf in de hand, ook de techniek moet er goed op ingericht zijn. Aangezien wij voorvechter zijn van digitale inclusie, doen wij er alles aan om onze techniek elke dag een stuk toegankelijker te maken. Want, zolang wij begrijpelijke code schrijven, kunnen browsers, screenreaders en meer systemen de informatie zo goed mogelijk overbrengen.