In the last couple of years, with the technological evolution, the number of Web pages was increased and in the same time the number of problems an user can occur on them. The Web experiences are inherently based on visual which, sometimes, it is almost impossible to reach by people with visual impairment. For example, it’s pretty common to see unreadable combinations of fonts and colors, of backgrounds and font colors etc., which can cause problems to users with a good vision, too. As designers, developers and marketing producers, it’s important to know that around 4.5% (around 315 million of people) of the global population experience color blindness, 4% (around 246 million of people) suffer from low vision, and 0,6% (around 39 million of people) are completely blind. This kind of users needs to have an experience on the Web products like other people without any visual problems, and their needs must be taken into consideration, as well.
The main things that you will need to take into consideration while designing an interface to be used also by the users with visual impairment are:
- Provide contrast between colors and textures. A common problem when it comes to readability is the insufficient contrast of the font. For being sure that the font is easy to read and the page has the necessary contrast between the elements, you can use some tools that can help you figure out; for example, readable.io, webpagefx.com. Also, those two tools will help you to check also the readability of the text, based on its structure.
- Allow manual font size adjustment. It’s very important to have a readable font family and size, but in the same time, it’s very important to let people change the font size with the help of magnifying software and ability to change the font size from the browser settings. However, it would be good if the first statement will be implemented because are a lot of people with low vision who are not very familiar with using magnifying software and/or adjusting the font size from the browser’s settings.
- Don’t use just colors to communicate information. Let’s say that you designed an e-commerce website from where the user will need to select a color of the products. It’s very important that in there, near the color to be a word which describes that color. This example should be applied in all cases in which you want to mark something just by using a color.
- Prioritize the colors and fonts in the interface. When it comes to the colors, a lot of trends are coming with large and wide colors to use in interfaces, but not all are really a fit with the accessibility of a Web page. To ease the work of the designers, it’s recommended to be using the colorsafe.co tool, which generates accessible color palettes based on WCAG Guidelines of text and background contrast ratio.
- Provide description for non-text content (e.g. “alt”). Having a description for non-text content, it will not only help the screen-reader software to transmit the correct information to the user (to not skip an image, just because it does not have a description), but the users, too. When a Web page can’t open all the images, it’s recommended that in that place to have a short description, in this way, the user will know what that image is about. Also, this behaviour needs to be implemented for video and audio elements, too.
- Use heading in organizing the content. We hear a lot about SEO on Web pages, and how important is to have headings to structure the content. But these headings doesn’t have just this purpose, they will help a the user to scan the page, to see the essential information of that all content and, in the same time, will help the machine to skim a page with a screen reader. What does it mean to skim a page? Is to jump from heading to heading, in this way reading just the main information presented in that whole.
- Grant keyboard shortcuts. For those people with visual impairment it easy to have implemented the keyboard navigation (through shortcuts, commands) than mouse navigation because, in that way, they will not need to follow the cursor of the mouse on the screen, an activity that for their condition requires a lot of focus. Also, this method will help not just this category of people, but users in general because the keyboard using while navigation increased in the last couple of years
So, next time when you are creating a Web page or an application, take these into consideration because a lot of persons will have a good experience while navigating on the Web page/application.