An application that is accessible and user-friendly for the blind and visually impaired? It is possible!

‘As soon as the application took shape for our client, I started testing its accessibility,’ says Wouter Noij, UX/UI Designer at Anchr. What was unique here was that the application also had to be accessible for blind or visually impaired users. An extra factor on top of the user-friendliness that we always strive for. ‘I set up a user test with a blind user who has been active for years in the sector where the application would be used. There was no better person to test the application's usability, right?’ 

‘Thanks to the personal contact with the test user, I noticed that he uses a braille keyboard and a screen reader program called “JAWS”. JAWS takes over his entire operating system and reads all text aloud every time he changes focus on his screen.’ 

Together with the test user, they went through the application flow: logging in, searching for files, searching for people, and reviewing the various navigation elements. ‘As an observing UX designer, I guided as little as possible,’ says Wouter. ‘I allowed the user to make mistakes and let him search for solutions himself. I encouraged him to think out loud and let his intuition do its work. At the same time, I noted all the areas for improvement and my findings’. 

We soon noticed significant areas for improvement within the application screens. Firstly, we observed that it was necessary to add title information to certain elements, such as buttons. ‘Our test subject was not informed about what action would be carried out by certain buttons that only had an icon,’ Wouter explains. ‘They also could not know what options were behind a certain dropdown button. Adding title information would solve both issues.’  

It was also noted that when searching for information from a table, it was not clear what the information ‘column name’ was. Wouter clarifies: ‘When the table line was read, our tester had no idea what the context of these fields was.’ The above issues could be quite easily resolved with improvements in the HTML code.  

However, there were also more complex issues. For example, with the use of pop-ups. ‘When creating new components, issuing a warning, … pop-ups appear on the screen, but the framework of our application places these dialogs at the bottom of the HTML. This means that when our test subject wants to read this, he cannot gain focus because he first has to scroll all the way through the underlying page before he can focus on the elements in the pop-up,’ says Wouter. ‘He is also unaware that he is blocked by this pop-up because the title, for example, is not read aloud. After some additional research, it turns out that this can be resolved through ARIA: alert dialog role & ARIA: dialog role.’ 

Another major area for improvement was the method of navigation. ‘When our test subject navigates, he always has to scroll completely through the navigation before he can read the content of the page. Our application has a submenu that also includes a summary of the respective page. To solve this issue, we can add an extra invisible action for screen readers to gain focus on. This immediately shifts focus to the content, an action called skip-menu. We can also define frames within the applications, sections, etc., which clarify for screen reader programs where the content is located. For example, a section for navigation, a section for content, etc. 

There are various tools within web development to make websites as accessible as possible. For commercial purposes, these techniques often go hand in hand with, for example, SEO, performance, and other aspects that make websites recognizable to automated systems.

'A well-thought-out UX/UI design therefore not only helps the blind and visually impaired in this case, but it also ensures that applications have a better HTML structure. A nice win-win!’, Wouter concludes. 

Would you like to implement user-friendly applications for your employees, customers, or partners?  

Then be sure to get in touch with Anchr! We are happy to collaborate and build with you!