In a world where websites are an essential part of our lives, the importance of accessibility for the visually impaired is felt more than ever. Designing a website so that all people, with all their vision problems and limitations, can access its information and services, shows the ethical and human commitment of web designers.
For this reason, the concept of accessible web (Web Accessibility) has become one of the most important concepts in web design. Because in addition to allowing a wider range of audiences to access the website, it is also very important from a commercial point of view.
In this article, 6 important points in website design that you should consider for people with vision problems are given.
Table of Contents
Why is website design important for visually impaired people?
Website accessibility helps everyone, including people with blind and low vision limitations, use websites and apps easily. The website is visual. Because of this, many websites, tools, and apps are virtually unusable for people with visual impairments. For example, we often see websites that use color combinations in the background and text that cause problems for people who are color blind.
The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.
TIM BERNERS-LEE, W3C DIRECTOR AND INVENTOR OF THE WORLD WIDE WEB
All types of vision problems
According to the American Institute for the Prevention of Blindness, 53 million Americans over the age of 45 have some form of mild or severe vision problems. There are different types of vision problems. But the most common ones are color blindness (inability to distinguish colors), low vision, and blindness.
1. Colorblind
Color blindness means difficulty in distinguishing colors. There are three common forms of color blindness: red-green color blindness, yellow-blue color blindness, and total color blindness.
Red-green color blindness: In this type of color blindness, it is difficult for a person to distinguish between the two colors green and red.
Yellow-blue color blindness: In this type of color blindness, a person can’t distinguish two colors, green and blue, as well as yellow and red.
Complete color blindness: In this type of color blindness, no color can be recognized.
In general, 8% of men and 0.5% of women in the world have color blindness. So, if you are a website designer, think if 100 people visit the website; According to statistics, about 10 of them are not able to see all colors naturally.
2. Blindness and low vision
In addition to color blindness, about 285 million people worldwide have vision problems: 39 million are blind and 246 million are visually impaired. People with low vision usually can see colors. However, they have problems such as blurred vision, loss of the central field of vision, or blurred vision.
Blindness means loss of vision in both eyes that cannot be corrected. You may have heard the term “Legally Blind”. This term does not usually mean total blindness, but the vision impairment in this case is so severe that the person cannot function without assistance due to the loss of a significant amount of vision.
With all these statistics and interpretations, what is important is that the site designer and user experience should consider the conditions of people with vision problems as much as possible to design an accessible website for them.
6 tips for designing an accessible website for people with vision problems
1. Create appropriate contrast using colors and textures
When designing the site, attention should be paid to the color difference between the text and the background so that the text can be read well. There are many tools to do this. One of these tools is the Stark tool, which is used in Sketch software. These tools help designers to check the legibility of text and background color as well as text size.
Also, standards and guidelines are defined to help improve website accessibility for people with visual impairments. According to the WCAG (Web Content Accessibility Guidelines), the appropriate color contrast criteria for texts on backgrounds are as follows:
- For normal texts, the contrast ratio is 4:5:1 and
- For large texts, the contrast ratio is 3:1.
In addition, it is better to use texture or pattern in tables and charts in addition to color. In addition to color, these patterns add another layer to tables and charts that a color-blind person can distinguish between image data if they see it.
2. Limiting and prioritizing color in the user interface
Try to limit and prioritize the number of colors in the user interface. The more colors you use in the website design, the more difficult it is for people with low vision and color blindness to work with the site.
It is interesting to know that Adobe Photoshop CC software supports color-blind simulators. In other words, with the help of this tool, the site designer can ensure accurate and correct transmission of graphic information to users with vision problems.
In addition, the Color Safe tool is another useful tool that is used to create a color palette for a website or application. This tool helps designers choose colors that improve accessibility.
3. Ability to manually adjust the font size
Today, there are various tools and software that help people with vision problems. One of the important uses of these tools for people with vision problems is the possibility of enlarging text and images on the website.
Many browsers can change the text size in their settings so that people can make the text bigger or smaller. However, most people with low vision, especially elderly people who have vision problems, are not familiar with these tools and do not use them.
Therefore, if there is a clear option on the website to change the size of the text, it will help visually impaired people to make the texts larger and view the content easily.
4. Non-dependence on color in conveying important information
In a website or application, various notifications, warnings, links, and buttons are used for user interaction with the product, each of which is intended to convey a specific message or information to the user. The web designer must ensure that color is not his only tool for conveying important information to the user. It is better to use icons and other symbols in addition to color. In other words, each element on the page should have more than one visual cue.
5. The possibility of access through the keyboard
Using keyboard shortcuts makes website navigation much easier for visually impaired people. A mouse is usually not a suitable option for these people because it requires hand-eye coordination.
6. Using clear and descriptive labels and buttons
When the link is used on the website, it is better to use semantic tags and avoid vague and vague phrases like “click here”.
Visually impaired users who use screen reader software will hear the links on the page as a list. Therefore, the use of appropriate anchor texts and descriptive text helps them to fully and without problems use different links on a website or application.