Anno 2018 is iedereen online. Helaas wordt dit in het geval van visueel gehandicapten erg vaak vergeten. Zij lopen tegen veel problemen aan als ze moderne websites bezoeken. Deze zien er hartstikke gelikt uit op verschillende schermen en in verschillende browsers, maar hoe gelikt is jouw website voor iemand die hem niet kan zien? Omdat Spilberg kennisdeling belangrijk vindt, delen wij graag tips om je website toegankelijk te maken voor visueel gehandicapten.
Benieuwd hoe een blinde überhaupt een computer gebruikt? In deze video laat Tommy zien hoe hij dat doet.
Hoe gebruiken visueel gehandicapten het internet?
Nu je weet dat visueel gehandicapten ook online te vinden zijn, is het niet moeilijk voor te stellen dat zij dat heel anders doen dan wij. Vaak gebruiken ze een combinatie van technieken. Ten eerste gebruiken ze een screen reader, dit is software die voorleest wat er op het scherm te zien is. Daarnaast wordt er vaak gebruikgemaakt van een brailleregel op de computer waardoor ze kunnen voelen wat er op het scherm staat. Slechtzienden gebruiken vaak ook nog vergrotingssoftware of een hoge contrastwaarde om pagina’s beter leesbaar te maken.
Zorg ervoor dat de hele website te bedienen is met een toetsenbord
Visueel gehandicapten gebruiken geen muis. Ze kunnen de muisaanwijzer namelijk niet zien! Vaak wordt er dan gekozen voor complete besturing met het toetsenbord, een joystick of spraakbesturing.
Het belangrijkste voor jou als developer? De hele website, inclusief menu’s en formulieren, moet bestuurd kunnen worden met het toetsenbord. Denk hierbij ook aan de recaptcha oplossingen. Je houdt hier namelijk spam, maar ook vaak visueel gehandicapten mee tegen! De meeste problemen zitten ‘m in het gebruik van JavaScript events zoals 'onMouseOver' en 'onClick'. Deze zijn muisafhankelijk en gebruikers komen niet verder zonder de muis te gebruiken. Dit kun je makkelijk oplossen door apparaat onafhankelijke event handlers te gebruiken (onFocus, onBlur, onSelect, etc.) of door extra toetsenbord event handlers toe te voegen (onKeyDown, onKeyUp, onKeyPress, etc.)
Vergeet ook niet om dit in de menu’s te doen en zorg ervoor dat de hoofdmenu items ook echt naar iets linken. Als hoofdmenu items slechts kopjes zijn voor de submenu’s, werkt toetsenbordnavigatie niet.
Gebruik de H2 en H3 kopregels alleen voor paragrafen een secties
We komen het vaak tegen, gerelateerde linkjes worden getoond als h3 kopregels. Een gewone gebruiker ziet dit niet, maar screen readers pikken dit direct op. Om pagina’s te kunnen scannen, leest deze software eerst de h1, h2 en h3 voor. Als daar allemaal ongerelateerde informatie staat, is het voor visueel gehandicapten erg lastig om de pagina te scannen. Dit betekent dat ze vaak echt de pagina moeten laten voorlezen om erachter te komen wat de inhoud van de pagina is. Niet echt handig of gebruiksvriendelijk dus…
Presenteer de belangrijkste informatie zo snel mogelijk
Extra features, mooie animaties, zoekbalken en gerelateerde artikelen zijn natuurlijk hartstikke leuk voor de doorklikwaarde op je website. Maar voor visueel gehandicapten is dit helemaal niet zo leuk. De voorleessoftware scant een pagina van boven naar beneden. Vaak moeten zedoor een hele hoop troep heen, voordat ze weten waar deze pagina over gaat. Zorg daarom dat het onderwerp van een pagina snel duidelijk is, daarna kun je al je extra features showen.
Zet de belangrijkste woorden vooraan in links en titels
Dit doe je waarschijnlijk al voor je SEO, maar zo niet dan is dit het moment om echt de belangrijkste woorden vooraan te zetten in titels en links. Niet alleen Google gebruikt dat om je pagina te scannen, screen reading software doet dat ook!
Hou alt-teksten zinnig en zet decoratieve afbeeldingen in de stylesheets
Decoratieve afbeeldingen horen eigenlijk sowieso in de stylesheets, maar soms kun je niet anders dan het in de html te zetten. Voor de SEO is het dan belangrijk dat je een goede alt-tekst hebt, maar dat geldt ook voor visueel gehandicapten. Zet hier dus geen onzin neer, maar wees omschrijvend, wat zie je? Zorg er in ieder geval voor dat de alt-tekst geen verwarring veroorzaakt als je de rest van de tekst leest.
Verwarrende alt-teksten zie je vaak bij webwinkels. Een jas wordt in de tekst helemaal omschreven. Echter heet de afbeelding bijvoorbeeld “JS2018col2.jpg”, wanneer hier geen beschrijvende alt-tekst bijstaat, zoals bijvoorbeeld “blauwe winterjas met steekzakken”, werkt het verwarrend. Een screenreader zal namelijk de titel van de afbeelding oplezen en dat verleidt in dit geval niet echt tot het aanschaffen van deze jas.
Tabellen worden ook vaak als afbeelding op een website gezet. Jammer, want een visueel gehandicapte kan op die manier deze informatie niet zien. Gebruik een fysieke tabel (die kun je genereren met deze tool bijvoorbeeld) zodat screenreaders deze ook kunnen (voor)lezen.
Zoeken op de website
Een zoekfunctie is hartstikke handig en tegenwoordig bouwen we hier ook allemaal filters in, maar dit werkt niet altijd even lekker voor visueel gehandicapten. Visueel vind je deze filters vaak links, rechts of boven de resultaten. Dat betekent vaak dat de screenreader eerst de filters opleest voordat hij de daadwerkelijke zoekresultaten opleest. Probeer er daarom voor te zorgen dat ze in de html achter de zoekresultaten komen. Je zou eventueel ook een skiplink kunnen inbouwen, maar dat is niet aan te raden. Het is niet erg gebruiksvriendelijk om op de pagina “zoekresultaten” weer door te moeten klikken naar de resultaten.
Meer dan 350.000 Nederlanders heeft een visuele handicap en met de vergrijzing zal dit aantal alleen nog maar verder toenemen. Het is goed om je websites wat dat betreft ook future proof te maken. Met wat kleine aanpassingen kun je er al voor zorgen dat je deze doelgroep niet buitensluit en dat je opdrachtgever meer mensen op zijn website kan verwelkomen. Sowieso een win-winsituatie!
