Je opent een willekeurige website je scant de pagina voor belangrijke koppen en afbeeldingen. Binnen enkele seconden vind je de informatie die je zoekt of interessant vindt. Zo eenvoudig is het voor een niet-beperkte gebruiker.
In een ideale wereld zou het ook zo eenvoudig zijn voor niet-beperkte gebruikers. Helaas is dit niet de realiteit en zijn er veel websites die geen prioriteit geven aan toegankelijkheid.
Toen Tim Berners-Lee in 1989 het internet bedacht en realiseerde had hij een duidelijke visie over de menselijke kant. “After all, it’s not machines that use the web, but people”2. Zijn visie hield stand op het “oude” internet. Het zag er misschien niet mooi uit voor de huidige maatstaven, maar het was toegankelijk. Koppen werden gebruikt voor koppen en knoppen waar knoppen nodig waren — tegenwoordig is dat niet meer zo vanzelfsprekend.“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect” 1
~ Tim Berners-Lee
De complexiteit van het internet is toegenomen, en we kunnen stellen dat er meer verwacht wordt van websites dan tien jaar geleden. Animaties, transities tussen pagina’s en informatie dat in beeld springt is de gang van zaken. Voor een niet-beperkte gebruiker is het vaak geen probleem dat er een popup tevoorschijn komt — een visueel beperkte gebruiker raakt de weg kwijt.
Ik wil niet zeggen dat we de nieuwe mogelijkheden, ontwikkelingen en technologieën achter ons moeten laten en terug moeten naar het begin van het internet. We moeten bewuster omgaan met de mogelijkheden die we tot onze beschikking hebben.
Voor wie
Op het moment zijn er in Nederland ruim 345.000 blinden en slechtzienden. In 2020 gaat dit aantal waarschijnlijk toenemen naar 380.000. Deze toename wordt voornamelijk toegerekend aan diabetes en vergrijzing
- Elke 5 seconden wordt er iemand blind
- 8,4% Van de wereldbevolking heeft een visuele beperking
- 285 Miljoen mensen hebben een beperking waardoor ze niet alle content kunnen lezen op een website
We zien blinden en slechtzienden vaak als groep die de meeste invloed van toegankelijkheid ondervinden. Er zijn ook nog anderen — denk aan ouderen die een verminderd gezichtsvermogen hebben en gebruik maken van een vergrootglas. Gebruikers met beperkte hand functie die geen of moeilijker gebruik maken van een muis. Doven en slechthorenden die het geluid van video compleet missen en daarmee mogelijk het verhaal en de boodschap. Gebruikers die gevoelig zijn voor epileptische aanvallen en niet tegen knipperende content kunnen.
De sociale factor voor het toegankelijk maken van een website kan al een rol spelen. We accepteren niet dat gehandicapten geen toegang hebben tot facilitaire voorzieningen of een restaurant niet mogen of kunnen betreden. We accepteren wel dat een website niet toegankelijk is — waar de gebruiker verdwaald of verkeerde content krijgt voorgeschoteld.Waarom toegankelijkheid
In Nederland hebben we nog geen wet die toegankelijkheid op het internet forceert. In 2003 hebben we wel de wet “Gelijke behandeling op grond van handicap of chronische ziekte”4 aangenomen. Een niet toegankelijke website zou onder die wet gezien kunnen worden als discriminatie tegen gehandicapten.Wet & regelgeving
In Australië, Verenigde Staten en Canada zijn er al wel wetten geïntroduceerd voor overheid gerelateerde websites5. Deze regelgevingen zijn strenger en moeten gehanteerd worden. In de Verenigde Staten gaat dit om section 5086 die zegt dat informatie technologie toegankelijk moet zijn voor beperkten.
Search Engine Optimisation (SEO)
Niet alleen voor mensen kan toegankelijkheid van belang zijn, ook zoekmachines zullen toegankelijke websites waarderen. Zoekmachines zijn net als visueel beperkten blind. Al hebben ze aangegeven dat de robots/crawlers slimmer worden7, blijft de realiteit nog vaag.
Als een screenreader die blinden en slechtzienden gebruiken om een pagina te lezen de pagina begrijpt — kunnen we ervan uitgaan dat ook Google of Bing de informatie begrijpen en dus juist indexeren.
In sommige gevallen waarbij toegankelijkheid vanaf het begin van het project hoog in het vaandel wordt gehouden kan een website sneller en kleiner worden. Dit wordt veroorzaakt door minder afbeeldingen, geen achtergrondvideo’s enz.Snellere websites
Een toegankelijke website bevorderd de positieve gebruikerservaring, ook voor niet-beperkten. Denk eens aan een popup die bij het openen van de pagina tevoorschijn komt, of nog erger terwijl je iets leest. Voor niet-beperkten is de pop-up al storend, het haalt ze uit de ‘flow’ waarin de gebruikers zich bevinden. Voor visueel beperkten met een screenreader is dat nog erger. De focus ligt niet op de popup. Uit zo’n pop-up komen is dan een flinke opgave. Een goede gebruikerservaring wordt bevorderd door goede toegankelijkheid.Voordelen voor niet-beperkten
Er zijn veel bedrijven die zich al hebben ingezet voor een toegankelijke website, bijvoorbeeld NS, Wehkamp, SNS Bank, Schiphol enz8.Toegankelijkheid toegepast
Legal & General — een verzekeringsmaatschappij gevestigd in Engeland heeft in 2005 een volledige redesign gedaan van de website. Daarbij hebben ze alle richtlijnen voor toegankelijkheid verwerkt en zijn er uitgebreide gebruikerstests uitgevoerd. Het resultaat, een groei van 50% bezoekers uit organische zoekresultaten. Ranking van alle zoekwoorden in Google ging omhoog. In drie maanden waren er dubbel zoveel offerte aanvragen.
InteraktContour kwam eind 2014 naar OrangeTalent voor een nieuwe website. InteraktContour is een organisatie die zich al jarenlang bezighoudt met zorg en ondersteuning voor mensen met niet aangeboren hersenletsel. Voor deze doelgroep is het van belang dat de website voldoet aan de richtlijnen. We hebben samen met deze doelgroep gezorgd voor een toegankelijke online ervaring.
Genoeg gepraat over de feiten waarom toegankelijkheid van belang is. Hoe kunnen we het toepassen in projecten en testen of de implementatie klopt?Toepassen
Er is een werkgroep die zich bezighoudt met toegankelijkheid — het WAI (Web Accessibility Initiative). Deze groep bedenkt en creëert specificaties voor een toegankelijk internet. Ze hebben verschillende specificaties gemaakt.
WAI-ARIA
Eén van de specificaties is WAI-ARIA (Accessible Rich Internet Applications). Deze biedt betere technische mogelijkheden aan om toegankelijke code te schrijven die duidelijk is voor screenreaders. Deze specificatie is vooral ontwikkeld om moderne applicaties toegankelijk te maken.
Het belangrijkst zijn de algemene richtlijnen, de WCAG (Web Content Accessibility Guidelines). De eerste versie van WCAG kwam in 1999 uit. Voor die tijd een goede specificatie, later werden websites complexer en de eerste versie bleek niet meer toepasbaar.WCAG
De WCAG 2 zijn de huidige richtlijnen voor toegankelijke websites. In 2010 zijn deze definitief gemaakt, en tot op heden worden deze doorontwikkeld. Voordat er gewerkt wordt aan toegankelijkheid is het van belang deze richtlijnen door te lezen. Op www.w3.org/Translations/WCAG20-nl staan de richtlijnen samengevat in het Nederlands.
In Nederland wordt onder andere door de (semi)overheid de Webrichtlijnen versie 2 gebruikt. Deze richtlijnen zijn een doorontwikkeling op de internationale WCAG 2 richtlijnen. Voor de Webrichtlijnen zijn in Nederland ook keurmerken te verkrijgen, het Drempelvrij keurmerk. Drempelvrij is onder veel (semi)overheids en zorginstelling websites te vinden. Het Drempelvrij keurmerk kan worden aangevraagd en wordt door een externe partij gecontroleerd en afgegeven.Webrichtlijnen
Drempelvrij keurmerk onder een website
De richtlijnen zijn bestudeerd en verwerkt in de website. Hoe kunnen we nu controleren of ze voldoen. Er zijn verschillende tools.WAVE van WebAIMWAVE is een handige tool waar een website ingevoerd kan worden en er aan de linkerkant een rapport naar voren komt. Daarin staan fouten die opgelost moeten worden voor WCAG 2. Bijvoorbeeld labels die missen in een formulier of alternatieve teksten die missen op afbeeldingen. wave.webaim.orgWe hebben de richtlijnen toegepast, wat nu?
Een tool die gericht is op developers is AXE. Deze extensie is te vinden voor Chrome in de Chrome Store. Na de installatie komt deze in de ‘developer tools’ te staan en wordt de huidige website gecontroleerd volgens de richtlijnen.AXE
AXE in de Chrome StoreChecklist van Elsevier.comHet is altijd handig een checklist bij te houden en op te volgen. Een vrij duidelijk en compacte is die van Elsevier.com.
Checklist van Elsevier.com
De richtlijnen zijn belangrijk om op een eenvoudige manier te controleren of een website toegankelijk is. Er is alleen zoveel meer dan de richtlijnen. Ik adviseer om echt te ervaren hoe het is om een website met het toetsenbord te besturen en te laten voorlezen. Op Mac of iOS kan Voiceover gebruikt worden, deze kan bij Mac worden gestart met CMD+F5 en op iOS in de instellingen. Op Windows raad ik aan om ChromeVox voor Chrome te installeren, dit is een extensie die dezelfde functionaliteiten biedt. Na het installeren van ChromeVox kan deze gestart worden met de snelkoppeling die in de instellingen te vinden is — op Mac is dit Ctrl+CMD+2x A.De echte ervaring
Na het gebruik van dergelijke tools komen vaak al snel de pijnpunten naar voren. Als voorbeeld van de Starbucks website, deze is recentelijk aangemerkt als goed toegankelijke website. Bij het drukken op Tab komt er een knop speciaal voor toetsenbord navigatie die het mogelijk maakt naar bepaalde delen in de website te springen. Dit maakt het erg makkelijk om te navigeren op de pagina. Ook het menu is goed te gebruiken met het toetsenbord, dropdowns klappen bijvoorbeeld op de juiste manier uit.
Voorbeeld van interne navigatie starbucks.com
Met ChromeVox of VoiceOver komen we ook slechte voorbeelden tegen. Zelfs in een bijbehorende website van Starbucks namelijk, ‘Coffee Passport’ op 1912pike.com. Als we VoiceOver of ChromeVox starten en naar het menu gaan met de Tab knop kunnen we deze openen. Dat werkt prima, maar het is niet mogelijk om in het menu te komen. Dit is duidelijk een probleem, een niet toegankelijke website. Het is een probleem die niet met de Webrichtlijnen of WCAG worden gecontroleerd, maar wel een probleem vormt voor beperkten.
Voorbeeld van slechte toegankelijkheid 1912pike.com onderdeel van Starbucks
Toegankelijkheid van je website is heel belangrijk. Ik adviseer WCAG te gebruiken als basis voor toegankelijkheid. Het uitgangspunt moet zijn: een toegankelijke website voor gebruikers met en zonder beperking. Gebruik een tool als WAVE om de website te testen op toegankelijkheid en pijnpunten op te lichten en te verbeteren. Ga je met toegankelijkheid aan de slag, verplaats je dan eens in de schoenen van een gebruiker met een beperking.Conclusie
Er is nog veel te vertellen over het gebruik van apparaten door beperkten (screenreaders), toegankelijkheid vertaald in een ontwerp, het schrijven van toegankelijke content enz. Dat laat ik nu even. Later ga ik dieper in op specifieke onderwerpen.Tot slot
Verdere informatie
- Cursus toegankelijkheid van Google: https://webaccessibility.withgoogle.com/course
- HIKE, een korte handleiding voor de basis van een toegankelijke website: http://accessibility.parseapp.com/
- Accessibility Wins Tumblr, een blog met goede voorbeelden van toegankelijkheid in de praktijk: https://a11ywins.tumblr.com/
- Toegankelijkheid in iOS: http://www.apple.com/ios/accessibility-tips/
Bronvermelding
- Berners-Lee applies Web 2.0 to improve accessibility - http://www.out-law.com/page–6946 ↩︎
- Web Accessibility: Web Standards and Regulatory Compliance - ISBN: 978–1–59059–638–8 ↩︎
- Feiten & cijfers over blind of slechtziend zijn - https://www.steunbartimeus.nl/wp-content/uploads/2014/05/BARTI1305_factsfigures4.pdf ↩︎
- Wet gelijke behandeling op grond van handicap of chronische ziekte - http://wetten.overheid.nl/BWBR0014915/2015–07–01 ↩︎
- Webtoegankelijkheid en Wetgeving - https://www.accessibility.nl/over-toegankelijkheid/wetgeving/ ↩︎
- Section 508 - http://www.section508.gov/content/learn/laws-and-policies ↩︎
- Understanding web pages better - https://webmasters.googleblog.com/2014/05/understanding-web-pages-better.html ↩︎
- Accessibility.nl klant ervaringen - https://www.accessibility.nl/uit-de-praktijk/ervaringen ↩︎
- WAI-ARIA 1.1 specificatie - https://www.w3.org/TR/2016/WD-wai-aria–1.1–20160317/ ↩︎
- WCAG 1.0 - https://www.w3.org/TR/WCAG10/ ↩︎
- WCAG 2.0 - https://www.w3.org/Translations/WCAG20-nl/ ↩︎
- Webrichtlijnen versie 2 - http://versie2.webrichtlijnen.nl/ ↩︎
