Toegankelijke websites zijn niet langer een verondersteld niche-onderwerp voor mensen met een handicap. Het gaat ons allemaal aan en helpt zelfs de SEO-fans onder jullie - een overzicht met praktische tips door Johannes Mairhofer.

Toegankelijkheid in de digitale ruimte is eigenlijk een integraal onderdeel van het internet en staat al in de gestandaardiseerde richtlijnen ervan. En natuurlijk speelt het ook een belangrijke rol in de WordPress Codex. Alle gebruikers moeten WordPress kunnen gebruiken, ongeacht welke taal ze spreken, welke economische status ze hebben of welke lichamelijke beperkingen ze hebben. Toch krijgt het onderwerp meestal niet de aandacht die het verdient. Vooral met het oog op demografische ontwikkelingen en het streven naar inclusie moet bij WordPress-projecten rekening worden gehouden met digitale toegankelijkheid, zegt Johannes Mairhofer. Toegankelijkheid wordt immers ook belangrijk vanuit zakelijk en SEO perspectief.

Toegankelijke websites zijn niet nieuw

Om de technieken op het World Wide Web te standaardiseren is in 1994 het World Wide Web Consortium, of W3C, opgericht. Bijzonder belangrijke normen hier zijn:

• HTML (nog steeds het basisraamwerk van bijna elke website)
• CSS (Cascading Style Sheets, bijvoorbeeld gebruikt in WordPress-sjablonen)
• WCAG (Web Content Accessibility Guidelines)

De WCAG richtlijnen zijn ontwikkeld door het Web Accessibility Initiative (WAI), dat weer een groep is van het W3C. Er zijn hier nu twee versies.

WCAG 1.0

• Gebruik van opmaak en stylesheets
• Apparaatonafhankelijk ontwerp

WCAG 2.0

Een toegankelijke website moet aan de volgende criteria voldoen:

• Waarneembaar (bijv. tekstalternatieven voor afbeeldingen)
• Bedienbaar (bijv. te bedienen via toetsenbord)
• Begrijpelijk (bijv. door gemakkelijk taalgebruik)
• Robuust (Compatibel)

Het idee van een drempelvrije website is dus niet nieuw en is sinds 2002 zelfs verankerd in de Verordening drempelvrije informatietechnologie (BITV). Dit betekent dat ten minste de websites van overheidsinstanties verplicht zijn toegankelijke inhoud aan te bieden.

Maak een toegankelijke website

Hoe moet een website toegankelijk worden gemaakt? Veel punten zijn niet zo ingewikkeld als je zou denken en kunnen zonder veel moeite worden uitgevoerd. Vooral voor nieuwe WordPress projecten geldt: Een toegankelijke website kan met heel weinig moeite worden geïmplementeerd.

De gemakkelijkste manier om dit te doen is natuurlijk met een site die net gemaakt en ontworpen wordt. Maar ook bestaande websites kunnen achteraf worden geoptimaliseerd. Een paar eenvoudige basisregels moeten in acht worden genomen.

1) Gebruik paginatitel, navigatie en tags correct

De titel van de webpagina staat daadwerkelijk in de titel en koppen zijn logisch gestructureerd en ook opgemaakt als koppen, niet alleen vetgedrukt. Opsommingen worden gerealiseerd met opsommingstekens of punten, niet met een eenvoudige minteken. Met WordPress kan dit direct in de editor worden opgegeven. Afhankelijk van het template en de gebruikte editor, zijn hier verschillende klassen van koppen beschikbaar. Door tags te gebruiken (bijv. H1 en H2 voor koppen) kan de pagina gemakkelijker worden ervaren en genavigeerd door blinden met een schermlezer of toetsenbord.

2) Doe zonder JavaScript en Flash in het ontwerp

Voor het ontwerp kun je het beste HTML en CSS gebruiken. Javascript en Flash mogen niet gebruikt worden. Javascript is, zoals de naam al zegt, een scripttaal. Los van het feit dat het onveilig is, kan niet elk apparaat en elke browser de code verwerken. Omdat de website op zoveel mogelijk apparaten beschikbaar moet zijn, wordt Javascript afgeraden.

3) Scheid inhoud en ontwerp

De inhoud (tekst) en de vormgeving (lay-out) moeten volledig los van elkaar gezien worden. Via verschillende CSS-varianten kan bijvoorbeeld het contrast van de pagina worden aangepast of de kleuren worden veranderd door een simpele klik van de gebruiker. Dit kan mensen met visuele beperkingen of kleurenblindheid helpen. Grote bedrijven als Pfizer doen dit ook.

In principe doet WordPress dit al automatisch. Een sjabloon kan bijvoorbeeld veranderd worden zonder dat de inhoud veranderd hoeft te worden. Als de website wordt benaderd met een smartphone of tablet, wordt de lay-out ook automatisch aangepast.

4) Neem het principe van de twee zintuigen in acht

Inhoud moet zo worden voorbereid dat hij door twee verschillende zintuigen kan worden waargenomen. Zo kan de website zonder veel moeite door zoveel mogelijk mensen ervaren worden. Dit kan bijvoorbeeld door de volgende maatregelen:

• Afbeeldingsbeschrijving toevoegen aan afbeeldingen (kan rechtstreeks via de WordPress editor)
• Ondertitels toevoegen aan video's (Youtube doet dit bijvoorbeeld automatisch).
• Structureer tekst met koppen (kan in de editor)

Toegankelijke website: Ervaring verzamelen

In theorie is het onderwerp niet altijd zo gemakkelijk te begrijpen. Ik sprak met Heiko Kunert, directeur van de Vereniging voor Blinden en Slechtzienden, over barrièrevrije websites. Heiko is zelf blind en surft op het web met een schermlezer. Heiko vertelt over zijn ervaringen met websites en sociale netwerken en vertelt hoe hij met zijn smartphone en een brailleleesregel op het web komt.

Veel dingen die hier theoretisch worden behandeld, kunt u ook zonder veel moeite zelf uitproberen. Zo kunt u een gevoel krijgen van hoe uw pagina eigenlijk wordt gezien.

Hoe schermlezers en brailleleesregels helpen

Een schermlezer is software die tekst herkent en hardop voorleest. Om door websites en documenten te kunnen navigeren is het daarom belangrijk dat er tags worden gebruikt bij koppen en afbeeldingen. Hierdoor kunnen gebruikers met een schermlezer en toetsenbord of brailleleesregel door de website navigeren.

Een variant van een schermlezer is bijvoorbeeld NVDA. Deze variant is vrije software en gratis. Ik raad aan het uit te proberen en je eigen website op te roepen met het beeldscherm uit en te proberen door de menu's te navigeren.

Een brailleleesregel vertaalt de huidige regel op het scherm in braille. Deze lijn is echte hardware die op de computer is aangesloten. De brailleleesregel werkt in combinatie met een schermlezer.

Responsiviteit voor toegankelijke websites

Computers, laptops, smartphones, tablets, smartwatches en tekstbrowsers. Het aantal apparaten waarmee een website benaderd kan worden is enorm. Een van de belangrijke punten van WCAG 2.0 is de beschikbaarheid van de website op zoveel mogelijk apparaten.

De meeste WordPress templates zijn nu min of meer responsive en maken het mogelijk om de website in ieder geval op computers en smartphones te benaderen. Afhankelijk van het sjabloon worden bijvoorbeeld menu's aangepast, sidebars getoond en verborgen, maar ook ontwerpen worden volledig aangepast. Dit heet Responsive Web Design. Toegang tot de eigen website op een ander apparaat is eenvoudig en onthullend.

Conclusie: Het web is voor iedereen!

Het net en de permanente beschikbaarheid is geen nieuw terrein meer, maar vanuit het oogpunt van één generatie is het nog steeds nieuw. De generatie van de huidige 30-jarigen, maar uiterlijk ook de volgende generaties, zijn gewend te weten dat het net altijd en overal beschikbaar is. We willen niet zonder de mogelijkheden van informatie en communicatie die het net met zich meebrengt, ook niet op oudere leeftijd.

De behoefte aan toegankelijke websites neemt dan ook toe en wordt van jaar tot jaar groter. Met behulp van de beschikbare opties en tools die in WordPress zijn geïntegreerd (bijv. beeldbeschrijving, kopteksten, CSS), is het mogelijk om zonder veel moeite websites op zijn minst drempelvrij te maken.

Dat dit steeds belangrijker wordt, blijkt ook uit het feit dat steeds meer grote bedrijven steeds meer belang hechten aan digitale participatie. Naast het hierboven genoemde voorbeeld van Pfizer biedt bijvoorbeeld Twitter al enige tijd de mogelijkheid om een beeldbeschrijving aan afbeeldingen toe te voegen, houdt Microsoft zich uitvoerig met het onderwerp bezig en vele anderen volgen geleidelijk aan. Een uitgebreid overzicht van positief toegankelijke websites vind je bijvoorbeeld hier.

Een toegankelijke website is ook beter voor Google

Helaas zie ik het veel te vaak dat er meer waarde wordt gehecht aan SEO dan aan goede inhoud. Maar als websites beter kunnen worden gelezen en geïnterpreteerd door schermlezers, is het ook gemakkelijker voor de Google bot om de bezochte pagina correct te classificeren.

Maak een toegankelijke website met WordPress

Het is nog een lange weg naar 100% toegankelijkheid. En dat is voor veel kleine bedrijven en privé-blogs waarschijnlijk niet haalbaar. Maar met de mogelijkheden van WordPress is het gemakkelijk om ongeveer 80 procent toegankelijkheid te bereiken.

Door tags te gebruiken voor koppen en afbeeldingen, en vooral voor de beschrijving van afbeeldingen, kan veel bereikt worden met weinig voordeel. Als je eenmaal je eigen website hebt bezocht met een tekstbrowser, krijg je een gevoel voor welke schroeven aangedraaid moeten en kunnen worden.

Wie de site voor een bedrijf beheert, doet er altijd goed aan hem een keer door blinden te laten testen om professionele feedback en tips te krijgen.