Ga naar de hoofdinhoud

Een applicatie die ook voor blinden en slechtzienden toegankelijk en gebruiksvriendelijk is? Het kan!

Een applicatie die ook voor blinden en slechtzienden toegankelijk én gebruiksvriendelijk is? Het kan!
Toen Anchr onlangs de opdracht kreeg om een nieuwe applicatie uit te werken voor een klant, werd deze opdracht vergezeld door een ietwat unieke vraag: ‘Kunnen jullie onderzoeken of de applicatie ook zeker toegankelijk is voor blinden of slechtzienden?’ ‘Natuurlijk’, antwoordde Wouter Noij, Frontend Developer en UX Designer bij Anchr. Lees hoe Wouter dit project heeft aangepakt.

App voor blinden, test met blinden

De extra factor

‘Zodra de applicatie voor onze klant vorm had gekregen, ging ik aan de slag om de toegankelijkheid ervan te testen, zo vertelt Wouter Noij, UX/UI Designer bij Anchr. Uniek hier was dat de applicatie ook toegankelijk moest zijn voor blinden of slechtzienden. Een extra factor bovenop de gebruiksvriendelijkheid die we altijd al nastreven. ‘Ik heb een gebruikerstest opgezet met een blinde gebruiker die al jaren actief is binnen de sector waarbinnen de applicatie gebruikt zou gaan worden. Geen geschiktere persoon om de gebruiksvriendelijkheid van de applicatie te testen, toch?’ 

‘Dankzij het persoonlijk contact met de testpersoon merkte ik op dat hij gebruik maakt van een braille toetsenbord en een screenreader-programma genaamd “JAWS”. JAWS neemt zijn complete besturingssysteem over en leest alle tekst voor telkens als hij de focus verandert op zijn scherm.’ 

Samen met de testpersoon werd door de applicatieflow gegaan: inloggen, dossiers opzoeken, personen opzoeken en de verschillende navigatie-elementen werden overlopen. ‘Als meekijkende UX-designer heb ik zo min mogelijk gestuurd’, zo vertelt Wouter. ‘Ik liet de gebruiker fouten maken en liet hem zelf naar oplossingen zoeken. Ik liet hem hardop nadenken en liet de intuïtie zijn werk doen. Op hetzelfde moment noteerde ik alle verbeterpunten en mijn bevindingen’. 

HTML-code finetunen

Snelle oplossing

Al gauw konden we significante verbeterpunten binnen de schermen van de applicatie opmerken. Zo merkten we in de eerste plaats op dat het nodig was om bij bepaalde elementen, zoals knoppen, titelinformatie toe te voegen. ‘Onze testpersoon kreeg niet te horen welke actie er zou worden uitgevoerd bij bepaalde knoppen die alleen voorzien waren van een icoon, zo verduidelijkt Wouter. ‘Ook kon hij niet weten welke opties er achter een bepaalde dropdown-knop zaten. Het toevoegen van titelinformatie zou beiden oplossen’.  

Ook werd opgemerkt dat bij het opzoeken van informatie uit een tabel, het niet duidelijk was wat de informatie ‘kolomnaam’ was. Wouter verduidelijkt: ‘Wanneer de tabel lijn gelezen werd had onze tester geen idee wat de context was van deze velden’. De bovenstaande issues konden vrij gemakkelijk opgelost worden met behulp van verbeteringen in de html-code.  

Complexere verbeterpunten aanpakken

Finetune

Er waren echter ook complexere issues. Zo bijvoorbeeld bij het gebruik van pop-ups. ‘Bij het aanmaken van nieuwe onderdelen, het geven van een waarschuwing, … verschijnen pop-ups in beeld, maar het framework van onze applicatie zet deze dialogen onderaan in de html. Dit betekent dat wanneer onze testpersoon dit wil lezen, hij geen focus kan krijgen omdat hij eerst helemaal door de achterliggende pagina moet scrollen voordat hij de focus krijgt op de elementen in de pop-up’, zo vertelt Wouter. ‘Ook is hij niet op de hoogte dat hij geblokkeerd staat door deze pop-up want de titel wordt bijvoorbeeld niet voorgelezen. Na wat extra onderzoek blijkt dit wel op te lossen door middel van  ARIA: alert dialog role & ARIA: dialog role.’ 

Een ander groot verbeterpunt betrof de manier van navigeren. ‘Wanneer onze testpersoon navigeert moet hij altijd compleet door de navigatie scrollen voordat hij de content van de pagina kan lezen. Onze applicatie heeft een submenu waar ook een samenvatting van de betreffende pagina in komt. Om dit issue op te lossen kunnen we een extra onzichtbare actie toevoegen waar screenreaders de focus op krijgen. Hiermee verleggen we direct de focus naar de inhoud, een actie genaamd skip-menu. Ook kunnen er kaders gedefinieerd worden binnen de applicaties, sections enzovoort, die het voor screenreader programma’s duidelijk maakt welke inhoud waar zit. Bijvoorbeeld een sectie voor navigatie, een sectie voor inhoud etc. 

Hoe gebruiksvriendelijk zijn de applicaties waarmee jij werkt?

Doe de test

Download een schermlezer plug-in voor je browser zoals bv. JAWS - Freedom Scientific of gebruik Narrator, de schermlezer-toepassing die is ingebouwd in Windows 11

Doe een blinddoek om en kijk hoe ver je komt! 

Anchr ondersteunt slechtzienden online

UX/UI, een must bij applicatieontwikkeling

Win-win

Er bestaan diverse tools binnen webdevelopment om websites zo toegankelijk mogelijk te maken. Voor commerciële doeleinden gaan deze technieken vaak hand in hand met bv SEO, performance en andere zaken die websites herkenbaar maken voor automatische systemen.

'Een goed doordacht UX/UI design helpt dus niet alleen blinden en slechtzienden in dit geval, maar het zorgt er ook voor dat applicaties een betere HTML-structuur krijgen. Een mooie win-win!’, zo besluit Wouter. 

User-friendly apps ontwikkelen

Wil je gebruiksvriendelijke applicaties in gebruik nemen voor je medewerkers, klanten of partners?  

Neem dan zeker eens contact op met Anchr! We denken (en bouwen) graag met je mee! 

Let's get in touch!
Meer weten over Anchr's maatwerksoftware?

Neem dan even contact op en we horen elkaar snel!