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

Uitvoerige gebruikerstesten laten AXI toe applicaties te ontwikkelen waarbij user experience en user interface voorop staan 

Toen AXI 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 AXI. Lees hoe Wouter dit project heeft aangepakt.  

App voor blinden, testen met blinden 

‘Zodra de applicatie voor onze klant vorm had gekregen, ging ik aan de slag om de toegankelijk ervan te testen, zo vertelt Wouter Noij, UX/UI Designer bij AXI. 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 

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 buttons, titelinformatie toe te voegen. ‘Onze testpersoon kreeg niet te horen welke actie er zou worden uitgevoerd bij bepaalde buttons die alleen voorzien waren van een icoon, zo verduidelijkt Wouter. ‘Ook kon hij niet weten welke opties er achter een bepaalde dropdown  button 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 ‘column name’ 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 beteringen in de html-code.  

Complexere verbeterpunten tacklen 

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. 

UX/UI, een must bij applicatieontwikkeling 

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.