Toegankelijkheid van websites: 9,5 quickwins voor een kwaliteitssite

Vorige week schreef ik over de voordelen die een toegankelijke website je kan opleveren. Met name de cijfers bleken inspirerend te zijn, maar uiteindelijk moet het natuurlijk ook rendabel zijn voor je onderneming. In dit artikel geef ik een aantal quickwins, die voor veel impact zorgen en bekijken we hoe deze zich verhouden tot de webrichtlijnen.

Wat zijn de webrichtlijnen?

De webrichtlijnen zijn in 2004 ontwikkeld door het Ministerie van Binnenlandse Zaken. Het doel was om online overheidsdienstverlening te verbeteren en hier een standaard voor op te stellen. De webrichtlijnen gelden vooralsnog alleen voor overheidsinstellingen, wat in totaal zo’n 600 tot 700 sites behelst, die per 1 december 2010 moesten voldoen aan deze webrichtlijnen. In de praktijk zijn er op dit moment zo’n 30 tot 35 websites die voldoen aan de webrichtlijnen, die niet eens allemaal tot de overheid behoren. De deadline is daarom verschoven naar 2013. Dat is enerzijds begrijpelijk, maar vooral een gemis voor de overheidsinstellingen zelf, omdat deze instanties belangrijke kansen laten liggen.

Waar gaat het mis?

In een gesprek met een beleidsmedewerker van een gemeente hoorde ik recentelijk een belangrijk pijnpunt. Bij het ontwikkelen van een nieuwe website wordt er een programma van eisen opgesteld en iedere betrokkene probeert hierbij zijn of haar kindje naar voren schuiven. De gemeenteraad heeft nog wat wensen, de overheid legt wat eisen neer en uiteindelijk ontstaat er één lijst. Dit resulteert doorgaans in ruim 150 eigenschappen waar de site aan moet voldoen. Met zoveel krachten in het speelveld, is het eigenlijk onvermijdelijk dat er zaken op de lijst sneuvelen. In het geval van toegankelijkheid gaat het regelmatig als volgt: er zijn één of twee functionaliteiten die moeten worden geïntegreerd in de site, maar niet worden meegenomen in het redesign. Die moeten dan maar in een iframe worden ingeladen, en omdat iframes moeilijk toegankelijk te maken zijn, sneuvelt toegankelijkheid vroeg in het project en wordt het daarom maar geheel buiten beschouwing gelaten.

Demotiverend effect

Dat komt ook omdat de webrichtlijnen over het algemeen als erg demotiverend worden ervaren. Het is een lijst van 125 richtlijnen. Wanneer je voldoet aan 124 van de 125 richtlijnen is het bijzonder jammer, maar ga je niet door voor de keukenmachine en krijg je niet het waarmerk Webrichtlijnen. Dat kan betekenen dat een team van developers en contentbeheerders maandenlang heeft gezwoegd om de nieuwe website te optimaliseren, om vervolgens teleurgesteld te worden, omdat die ene richtlijn echt niet haalbaar is binnen de organisatie. Overigens is het wél zo dat toetsingen van de webrichtlijnen werken met een foutmarge, waarbij incidentele fouten weliswaar worden gemeld, maar níet worden afgekeurd. En deze incidentele fouten worden niet gemeld omdat je als developer hebt gefaald, maar omdat gebruikers mogelijkerwijs moeite hebben met het vinden van informatie. Anderzijds is het wel zo dat bij het gebruik van video in de website zoveel extra investering in tijd én geld wordt gevraagd, dat daarmee inderdaad een behoorlijke drempel wordt opgeworpen.

De stap naar pragmatisme

Het is dan ook hierom dat bij de invoering van webrichtlijnen 2 (vermoedelijk volgend jaar) veel meer aandacht wordt geschonken aan de mate van toegankelijkheid in plaats van het wel of niet halen van een 100%-score. Er word gekeken naar mogelijkheden om aan te geven hoe toegankelijk een website al is en wat er nog aan kansen ligt voor de verbetering van de website. Het kan dan inderdaad zo zijn dat niet alle video’s worden ondertiteld en voorzien worden van audiodescriptie, maar je alsnog goed scoort op de toegankelijkheidseisen.

Daarmee is de drempel lager en kan men in combinatie met de voordelen uit het vorige artikel (gebruiksvriendelijkheid, kwaliteit, vindbaarheid, beschikbaarheid, bereik en flexibiliteit, reputatie) zelf bepalen wat de focus voor de organisatie is, en wat dat betekent voor de gebruikers van een website. Bedenk overigens wel dat het toevoegen van ondertitels ook een tekstalternatief voor video zijn, en daarmee ook vindbaar voor zoekmachines. Het hangt er dus maar net van af hoe belangrijk de content van zo’n video is voor je online dienstverlening.

Bij Microsoft hebben we op basis van de webrichtlijnen gekeken wat nu eigenlijk de belangrijkste pijnpunten en vooral kansen zijn. Daarnaast hebben we de tool Kleedjesiteuit.nl ontwikkeld, die je helpt inzicht te krijgen in de mate van toegankelijkheid van je website, zonder dat je daar technische kennis voor nodig hebt. We zijn de tool op dit moment aan het doorontwikkelen met toetsingen die gerichter vingers op zere plekken leggen en je direct uitleggen hoe je deze kansen kunt verzilveren. In combinatie met onderstaande 9,5 quickwins, kun je met minimale input maximale output genereren.

De 9,5 quickwins

1. Gelaagd bouwen

Gelaagd bouwen houdt in dat de inhoud (HTML, content), de opmaak (CSS) en interactie (JavaScript, Silverlight, Flash) los van elkaar kunnen functioneren. Dat betekent dat, wanneer je bijvoorbeeld de opmaak uitzet in de browser, de inhoud van de pagina logisch leesbaar blijft en ook duidelijk blijft wie de afzender is van de website. Sinds vorige week heeft Microsoft een nieuwe website voor Het Nieuwe Werken waarbij goed gelaagd is gebouwd, maar in de oude website was dit slecht geregeld. In de afbeelding hieronder is links de website te zien in ‘vol ornaat’. In het midden is de website gestript van afbeeldingen, waardoor afzender, navigatie en kopregels onleesbaar werden. Met een investering van ongeveer 2 à 3 uur hebben we de site vervolgens aangepast naar het voorbeeld aan de rechterzijde, waarbij onder water eigenlijk de bezoeker van de site meer handvatten kreeg. Dat had een zeer positief effect op de leesbaarheid en gebruiksvriendelijk van de website. Prettige bijkomstigheid was een veel betere vindbaarheid van de website in de zoekmachines.

2. Dynamische content

Dynamische content is de verzamelnaam voor interactieve elementen zoals sliders, video’s, animaties, (foto)carrousels etc. We kiezen er immers vaak voor om bijvoorbeeld onze belangrijkste diensten samen te vatten in een mooie carousel bovenin de pagina. Dit is eigenlijk de belangrijkste informatie op de pagina. Over het algemeen wordt hier dan Silverlight, Flash of JavaScript ingezet, omdat deze instrumenten zich het best lenen voor een mooie interactie. Met name voor Silverlight en Flash geldt echter dat dit moeilijk door zoekmachines of screenreaders kan worden geïndexeerd of geïnterpreteerd.

Dat betekent dus dat de belangrijkste informatie niet gevonden wordt! Voor JavaScript geldt dat het sterk afhangt van de wijze van implementatie of dit wel of niet goed vindbaar blijft, maar in alle gevallen is het goed om na te denken over de manier waarop deze interactie werkt zonder ondersteuning van Javascript. Het is bijvoorbeeld prima te realiseren om deze diensten zonder die ondersteuning in een nette lijst met correcte kopregels (H2, H3 etc.) weer te geven, zodat het eigenlijk voor iedereen goed bruikbaar is op ieder niveau. Een kapotte roltrap is immers nog steeds een trap, toch?

3. Bediening

De bediening van websites is voor sommige mensen een uitdaging. Zo zijn er behoorlijk wat gebruikers die moeite hebben met het gebruik van een muis. En er zijn behoorlijk wat websites waar informatie alleen via mouse-over te benaderen is. Dat betekent dat soms cruciale informatie niet overkomt bij iedereen. Trek maar eens de muis uit je computer en probeer dan eens te navigeren door je eigen website. Soms zorgt dat voor grote verrassingen. Zo kwamen we er achter dat bij een van onze eigen websites belangrijke informatie over onze partners alleen via mouse-over en niet via de tab-toets bereikbaar was. Dat kan niet de bedoeling zijn!

4. Gebruikersfeedback

Gebruikersfeedback is zo’n voor de hand liggende, vaak vergeten eigenschap van website. Als de invoer van de gebruiker bijvoorbeeld word verwerkt, is het beter een wachticoon te gebruiken dan de gebruiker te laten wachten. Vaak gaan ze dan meerdere keren klikken, als dat niet goed is geregeld in de backoffice, zorgt dat voor enorm veel extra uitzoekwerk. Daarnaast geven mouse-overs en focus-states ook belangrijke feedback aan de gebruiker, door bijvoorbeeld een knop een andere kleur te geven of elementen op de pagina überhaupt te laten oplichten. Waar is hij of zij? Is de muisklik aangekomen? Waarom gebeurt er even niets? Zorg daarnaast dat een knop groot genoeg is om te klikken, zodat men op een mobiele telefoon of tablet, of met bijvoorbeeld een motorische beperking, goed een keuze kan maken.

5. Structuur van de content

De structuur van de content is voor iedereen belangrijk; zoekmachines, mensen met een beperking, jij en ik. We hebben allemaal baat bij een logisch opgebouwde tekst. Stel je voor dat ik in dit artikel geen koppen of nummering had toegepast; dat zou behoorlijk vervelend lezen zijn. Waarschijnlijk was je zelfs al afgehaakt. Zo’n correcte structuur zou je kunnen regelen met alleen de opmaaklaag van een website, door zogenaamde classes mee te geven die opmaak bepalen voor de verschillende elementen op de pagina. Makkelijker is echter door simpelweg de juiste HTML-elementen te gebruiken, die voor een groot deel deze opmaak al voor je regelen. Zo is het ook goed leesbaar zonder opmaak, en kunnen zoekmachines, mensen met een beperking én jij en ik makkelijk pagina’s of dit artikel scannen op inhoud. Wil je nog meer tips over de juiste opbouw van content, lees dan meer over de redactierichtlijnen.

6. Formulieren

Formulieren zijn een vak apart. Vaak probeert men er een intuïtief, snel en logisch opgebouwd formulier van te maken met slimme hulpmiddelen zoals sliders, kalenderfunctionaliteiten, up/down-inputvelden en meer van die mogelijkheden. Vaak is dit absoluut een verbetering van de interface en dus zeker ook aan te raden. Voor een persoon met spierproblemen of voor blinden en/of slechtzienden is dit echter vaak erg moeilijk in gebruik, omdat het soms nauw luistert de juiste instelling te vinden. Daarom is het goed om ook ‘normale’ invoer als alternatief voor een slider aan te bieden, of in ieder geval te zorgen dat een datum bijvoorbeeld ook in te voeren is, naast het gebruik van een kalenderfunctionaliteit. Veel van de standaardfunctionaliteiten ondersteunen dit vaak niet.

Daarnaast kunnen we met de laatste versie van HTML, HTML5, ook gebruik maken van slimmere invoermogelijkheden voor bijvoorbeelde mobiele telefoons. Hieronder zie je vier toetsenborden van de nieuwe WindowsPhone 7, waarbij het formulier is opgemaakt met invoervelden die specifiek voor e-mail, webadressen of bijvoorbeeld numerieke invoer zijn bedoeld. Het werkt exact zo op de iPhone en op het Android-platform. Het bespaart de gebruiker op een tablet op telefoon een hoop geklik, en geeft een veel betere gebruikerservaring. En op andere platformen blijft de functie van het invoerveld ook gewoon hetzelfde zoals we allemaal gewend zijn. Oudere versie van Internet Explorer? Dat maakt niets uit, die zien het gewoon als een ouderwets invoerveld en functioneren dus naar behoren.

7. Standaarden

Standaarden zijn een handig hulpmiddel om te weten of je de juiste keuzes hebt gemaakt. De meest actuele standaard is XHTML 1.0 Strict voor HTML. HTML5 is nog geen standaard, maar wordt al wel in behoorlijke mate ondersteund door de W3C-validator. De validatietool van het W3C (WorldWide Web consortium) en de quickscan van de webrichtlijnen zijn handige hulpmiddelen om de kwaliteit van jouw applicatie in verregaande mate te toetsen. Gebruik in ieder geval geen verouderde technologie en houd je aan de huidige standaarden, zodat zoekmachines, screenreaders, browser en natuurlijk de gebruikers hier probleemloos mee kunnen werken. Deze tools geven geen definitieve uitslag, maar wel een goede indicatie of je op de goede weg bent. Voor uitgebreide en officiële toetsingen kun je op Drempelvrij.nl terecht.

8. Linktitels

Linktitels zijn over het algemeen vrij eentonig op een website. Lees meer. Klik hier. Ga verder. Een zoekmachine of een blind persoon met een screenreader kan hier slecht wijs uit worden. Zorg voor een logische verdeling van informatie op je website en geef de pagina’s en links betekenisvolle namen en omschrijvingen, zodat men aan de URL of link de inhoud kan herkennen.Vermijd ook het gebruik van ellenlange URL’s; “www.gemeenteX.nl/trouwen/” is immers een stuk leesbaarder én gemakkelijker te onthouden dan iets als “www.uwgemeenteX.nl/ref=s9_simh_gw_p74_d2_i7pf_rd_m=ATVPDKIKX0DER&pf_rd_s =center3=1PBAHHAX6HTHVC1YSCFP&pf.” Bovendien is een goede URL zeer waardevol voor de vindbaarheid van je website in zoekmachines.

9. Meten is weten

Soms is het ondoenlijk een bestaande site dusdanig aan te passen dat het volledig toegankelijk wordt. Ook met kleine aanpassingen kun je echter al grote effecten bereiken. Een goede implementatie van statistiekentools kan je enorm helpen bij het maken van de juiste aanpassingen. Zo weet je op welke termen mensen je website vinden, welke paden ze afleggen en door bijvoorbeeld de statistieken van de zoekfunctionaliteit er op na te slaan weet je ook welke termen blijkbaar niet zo duidelijk te vinden zijn of wat men écht belangrijk vindt. Je kunt dan beginnen met alleen die pagina’s te optimaliseren of bepaalde informatie beter uit te lichten op je homepage. Low input, high output gegarandeerd!

En tip 9,5: Ceci n’est pas rocket science

Toegankelijkheid is niets nieuws en het bouwen van een toegankelijke website is ook niet significant moeilijker te realiseren dan een website die niet toegankelijk is. Trek de muis eens uit je computer en probeer te navigeren met alleen je toetsenbord. Of dim de lichtsterkte van je monitor eens tot 40%. Blijft alles benaderbaar, leesbaar en logisch? Vergeet alle kennis die jij hebt van de applicatie, verplaats je in de eindgebruiker en bekijk dan opnieuw met een frisse blik jouw harde werk. Je zult merken er dat in veel gevallen genoeg ruimte voor verbeteringen is. Verbeteringen, waar iedereen wat aan heeft. En jijzelf als eigenaar uiteindelijk ook, want mensen kunnen je product beter vinden, beter gebruiken en je sluit niemand uit. Én het is goed voor je reputatie, dus aan de slag!

Wat levert het dan op?

Natuurlijk zijn deze 9,5 quickwins niet te vergelijken met de webrichtlijnen. Maar het is wel een pragmatische aanpak die in ieder geval de drempel verlaagt en snel resultaat geeft. Ik geloof dat het beter is wanneer alle websites in Nederland 80% toegankelijk zijn, dan wanneer er maar 30 tot 35 sites zijn die 100% voldoen aan de webrichtlijnen. De webrichtlijnen zijn immers niet heiligmakend, zeker niet voor commerciële websites. Enkele maanden geleden liet ik een vriend, die vanaf zijn tienerjaren blind is, onze toegankelijkheidswebsite testen. Er waren in zijn beleving nog voldoende verbeterpunten aan te brengen, ook al voldoet de website aan de webrichtlijnen. Daaruit bleek voor mij dat het voldoen aan de webrichtlijnen nooit het doel mag zijn, maar het louter een middel is om je doel – bijvoorbeeld een zo groot mogelijk bereik met zoveel mogelijk impact – te bereiken. En dan zijn de webrichtlijnen, of deze 9,5 quickwins, handige lijsten om mee aan de slag te gaan om die doelen te bereiken. Ook, of júist voor commerciële websites.

Volgende week sluit ik deze serie af met enkele praktijkcases en voorbeelden. Is het je niet duidelijk waarom je een toegankelijke website zou moeten willen? Lees dan nog eens het artikel van vorige keer. Wil je een helder overzicht van de voordelen van toegankelijkheid? Bekijk dan nog eens deze infographic.