Een toegankelijke website ontwerpen. Allemaal goed en wel, maar hoe kun je jezelf ervan overtuigen dat je site echt wel zo toegankelijk is als je zou willen? Meestal heb je zelf geen goed zicht daarop, en kan je enkel op het gevoel afgaan.

Gelukkig zijn er op het Internet tal van hulpmiddelen beschikbaar die de toegankelijkheidsgraad van een website kunnen evalueren. Op de website van WAI (Web Accessibility Initiative) is een overzicht van deze tools beschikbaar. In dit artikel lichten we er enkele uit.

Meer achtergrond over toegankelijkheid van websites kun je vinden in artikelen die reeds eerder in Naar Voren verschenen:

1. Toegankelijk Internet: een kwestie van mentaliteit
2. Toegankelijke Sites Zijn Lelijk: onbegrip, onkunde en onwetendheid

Kruip eens in de huid...

Een test met echte (kleuren)blinden of andere ‘probleemgebruikers’ zou ideaal zijn, maar is vaak niet haalbaar. Wel mogelijk is het om eens in de huid van zo’n persoon te kruipen. Twee simulaties op de website van webAIM (Web Accessibility in Mind) demonstreren enkele algemene problemen die blinden en slechtzienden ondervinden: de screen reader simulation en de low vision disability simulation.

Een interessante test, die reeds heel wat problemen aan het licht kan brengen, is om zelf eens met een tekst-browser of schermlezer naar je site te surfen. Nog beter is om dit te laten doen door iemand die de site nog nooit gezien heeft, en er de grafische versie dus niet bij kan denken.

• De Lynx-viewer van Delorie is een simulatie van de tekstbrowser Lynx. Deze browser toont geen afbeeldingen, gebruikt geen stylesheets, voert geen scripts uit en lineariseert tabellen naar platte tekst. Als je website nog bruikbaar is in deze browser, zijn de grootste problemen opgelost.

• Verder kun je ook een echte schermlezer gebruiken die webpagina’s voorleest. De demo-versie van Connect Outloud bijvoorbeeld. Een Nederlandstalige spraakmodule zit echter niet in het pakket.

Syntax

Als basis voor een toegankelijke website is validerende HTML-opmaakcode uiterst belangrijk. Veel tools zullen namelijk het maximum aan informatie uit de HTML-opmaak proberen te halen, en een correcte HTML-structuur vergemakkelijkt dit werk aanzienlijk.

De meest bekende HTML-validator is de W3C HTML Validator. Daarnaast is er ook de WDG HTML Validator van de Web Design Group. Deze laatste is interessant in die zin dat de foutmeldingen in een meer begrijpbare taal worden gepresenteerd, en dat het mogelijk is om meerdere webpagina’s in één keer te controleren.

Is je HTML-code nog een soepje, en zie je geen beginnen aan het opruimen, dan kan HTML Tidy helpen. Vergeet de documentatie niet door te nemen.

Code die voor zichzelf spreekt

De regeltjes waarmee je een website toegankelijk maakt, komen er meestal op neer dat alternatieven moeten aangeboden worden voor grafische elementen, en dat de HTML-code voor zichzelf moet spreken. Met andere woorden: de semantische structuur is minstens even belangrijk als de syntactische structuur.

Een voorbeeld van semantische structuur zijn de hoofdingen (h1, h2, ...). Als die in goede volgorde staan (h1 voor de hoofdtitel, h2 voor subtitels, ...), kan gemakkelijk een structuur van de pagina opgesteld worden. Een blinde met een brailleregel kan op die manier gemakkelijk springen naar het stuk tekst dat haar interesseert.

Een ander voorbeeld zijn de title attributen bij hyperlinks, die een verduidelijking zijn van de link-tekst. Als de Lynx browser een lijst van de links op een pagina samenstelt (l commando), worden deze beschrijvingen gebruikt. Het nut van die lijst staat of valt dus met de kwaliteit van die title-attributen.

De Web Content Accessibility Guidelines van het W3C en de Section 508 Guidelines van de Amerikaanse Overheid bieden een stel richtlijnen aan in dit verband, en er zijn tal van tools beschikbaar om na te gaan in welke mate aan deze richtlijnen beantwoord wordt:

• Bij de tools Bobby en The Wave kan je een webpagina ter controle opgeven, waarna een rapport met mogelijke gebreken (ontbrekende alt-attributen, ...) opgesteld wordt. Mogelijke problemen, omdat niet alle problemen automatisch ontdekt worden: zo moet je bijvoorbeeld zelf nog nagaan of de pagina ook nog te gebruiken is met stylesheets uitgeschakeld. Andere gelijkaardige tools zijn Lift Online en AccessibilityWATCH.

• Terwijl Bobby en The Wave enkel online websites kunnen testen, is A-Prompt een programma dat je kunt downloaden. Na het openen van een lokaal HTML-bestand, krijg je de mogelijke problemen te zien en kan je deze via wizards oplossen. Achteraf wordt het gewijzigde bestand opgeslagen.

Visuele problemen

Ongeveer 1 op de 12 mannen (8%) en 1 op de 200 vrouwen (0,4%) zijn (gedeeltelijk) kleurenblind. Wat deze mensen waarnemen, verschilt lichtjes van wat iemand met perfect zicht waarneemt. Hierdoor kunnen problemen ontstaan als kleurenschema’s worden gebruikt waar de kleurenblinde het onderscheid tussen de kleuren niet gemakkelijk kan maken, terwijl een niet-kleurenblinde geen problemen heeft met dezelfde kleurencombinatie.

VisCheck kan hier uitkomst bieden: voor drie types kleurenblindheid kun je een simulatie opvragen van hoe een gegeven website eruit zal zien, gezien door de ogen van een kleurenblinde. Bij de resultaten van deze tool is het vooral belangrijk om na te gaan of de hyperlinks nog duidelijk te onderscheiden zijn, en dat de tekst leesbaar blijft.

De website Safe Web Colours for colour-deficient vision kan dan weer preventief helpen bij het kiezen van een goed kleurenschema.

Ergens last van?

In het voorgaande hadden we het over tools die ontwikkelaars helpen bij het toegankelijk maken van een website. Maar ook voor de andere zijde — de getroffen gebruikers — zijn er tools beschikbaar. Niet alle webontwikkelaars besteden immers voldoende aandacht aan de problematiek.

• Simpel en vaak effectief zijn de bookmarklets: kleine stukjes JavaScript code die als bookmark kunnen worden toegevoegd. Wanneer deze vanop een pagina opgeroepen worden, zal de bijhorende JavaScript code uitgevoerd worden op die pagina. Voorbeelden zijn onder andere het uitschakelen van stylesheets en het weglaten van kleuren, animated gifs of andere ongein. Tal van deze accessibility bookmarklets zijn beschikbaar.

  Ook voor ontwikkelaars zijn er bookmarklets: Bobby-controle of HTML-validatie

• PDF documenten zijn over het algemeen niet zo toegankelijk. Adobe biedt op haar website een tool aan die PDF-documenten omzet naar een HTML-versie.

Besluit

Als afsluiter kunnen we nog de vraag opwerpen of het eigenlijk wel zinvol is allemaal? Zeker en vast, vooral als je bedenkt dat ook zoekmachines als Google eigenlijk ‘blinde’ gebruikers zijn. Een toegankelijke website levert dus niet alleen dankbaarheid en respect op, maar ook betere zoekresultaten.

• Home
• Artikelen
• Colofon