Brailleliga
Innovative web design for the visually impaired
With much research, analysis, testing and teamwork, Studio Mast designed a website for the visually impaired and blind. It was a challenge we together with Tentwelve fully met. Read below how we were able to take the usability to the next level.
First a thorough analysis before making design decisions.
We didn't just jump right in. We first worked with Tentwelve to have different types of visually impaired people visit the old website, analyze their browsing habits and learn about their software. With this analysis, we could design the most user-friendly website for visually impaired people.
We provided web tools that help for every type of low vision
To get started, we have added some additional tools for visitors on each page: easy view mode (AAA score), Contrast (black/white), Fontsize + . This way you can adjust the display of the website to your visibility needs.
In standard mode, we worked with visibility layers. Anything that is necessary information is displayed in heavy readable contrast with the AA-standards in our mind. Anything that is decorative and does not affect readability, we worked in colored areas to give depth to the website. This ensures that it is still aesthetically pleasing to visitors with visual impairments.
How do you guide a visual impaired visitor through the website when the website is zoomed in up to 400%?
Upon analysis, we saw that visually impaired visitors zoomed in slightly or extremely through their software. Some zoomed in as much as 6 letters per browser view, which can quickly cause one to lose their way in the website.
With this important fact, we chose to display all content on 1 straight line below each other. If there is an indentation at a quote, highlight or caption, an accompanying line was drawn on the grid as a handhold. This way, the visitor cannot accidentally skip content.
A new approach to user-friendly forms.
We also extended this grid to forms and error messages. When one zooms in fully, one cannot see the error icon after a sentence, so we chose to place the icon before the sentence. This allows the visitor to scroll up through the accompanying grid to quickly see which field was left blank. We quickly noticed that a color like red can reduce contrast for the visually impaired, so we did not change the color, but instead marked it with a white frame so the error is quickly visible. Only on the easy mode we could use the color yellow which provides high contrast with a black background.
