How did I make the site version for visually impaired and blind people

Brief: Timely provide to quick read articles from 3–7 mins.

In the Republic of Kazakhstan live more than 20 thousand blind and visually impaired people, and light disorders like myopia have every second. The Internet adapts to such people: Windows has a function of a screen announcer, there are programs for writing text like Text To Speech Maker or for increasing it on the screen, for example, MAGic.

Designers can also take care of the visually impaired and make for them a special version of the site: with increased contrast, increased font and other features. For people with disabilities, this is a good way to get information easier and faster. And I’ll tell you in the article what exactly is needed.

There is a whole document https://sitekaluga.ru/i/2015/gost-r-52872-2012.pdf. (True, I did not find the RK version). Here it is told what features and properties a version for visually impaired people should have. Reading this list of requirements is a real yearning. It should be said that it is almost impossible to combine all the requirements of standards with steep design, well-functioning functionality and cross-browser compatibility. Compliance with all the strictness of the rules can significantly affect the corporate style of the company, the usability of the interface for the average user, the way information is presented and much more. The standard should be perceived not as a strict guideline, but as a recommendation that significantly expands the audience of the resource.

Lesson 1: Sufficient contrast of text and background

It is important that the main text on the site can be easily read from screens of different brightness and quality. Also there are many people with different visual impairments. For example, users with color vision disorders simply will not see the text or will be able to discern it with great difficulty if it is not contrasted with the background. Often when developing brandbooks do not take into account this recommendation in pursuit of a beautiful design, and then it turns out that the text on the site is difficult to read.

The contrast of texts can be checked with contrast checkers, for example, Color Contrast Analyzer, or browser extensions, for example, “Contrast Ratio Checker” for Chrome. There are even online contrast checkers that do not require installation on a computer.

As mentioned earlier, some users have problems with color perception. Therefore, the possibility of individual color adjustment is very important. At the same time, its integration into the interface is not technically complicated, which greatly simplifies the process of implementing this option in any site.

I’ll give an example with quite flexible settings of the page style: you can change the background and text color, change the contrast settings, enable / disable images.

Lesson 2: defects are more common than you think

Dyslexia is also known as a “reading disorder” that affects up to 7% of the world’s population, making it the most common defect affecting learning. Despite normal development, people with dyslexia find it difficult to pronounce words, sounds, or read fast.

People with dyslexia almost can not read sites with low contrast or illegible typeface. And how to fix it?

In fact, the solution is the same — the contrast. People with dyslexia are turned over by letters. Those. the letter b can turn into d, and the letter p — into q.

People with dyslexia can easily read texts with enlarged uppercase letters, additional distance between characters, different line heights, inclined symbols, and ideally if each character in the font is manually designed. Anyone who works with fonts will thank him for that.

The letters are easier to recognise

While (unfortunately) the network has few fonts designed specifically for dyslexics, but a couple can still be found and used in design.

That is why, it is worth remembering the following rules:

1. Normal text and text in pictures should have a contrast ratio of at least 7: 1
2. It should be possible to change the font size (except for titles and text images) to within 200% without loss of content and functionality
3. The text and background color must have flexible settings, which the user can change himself
4. The string can not be longer than 80 characters
5. Forbidden by width
6. The minimum line spacing is not less than 1.5 intervals, and the interval between paragraphs is at least 1.5 times larger
7. Text on images should be used only for registration
8. The text of buttons and key elements should be informative
9. All input fields must have meaningful text labels
10. The font must be legible

Example of readable authorization forms

Settings for people with disabilities

However, the font in the interfaces of this class does not always need to be changed. In some cases, this is not necessary. For example, for texts with a large size (most often headings of the first level in the main content and names of the promblanners), the minimum allowable contrast level is reduced to the ratio of 4.5: 1. Secondary text, which only has a decorative function, can also be changed neither in size nor in contrast. All logos and trademarks, in the symbolism of which there is text, retain their original form and contrast.

Lesson 3: Management

Movements that require a certain precision, such as: hovering a mouse over a small area, clicking on an icon, dragging a card — can be an impossible task for people with musculoskeletal disorders.

For this category of users, you can control using the keyboard. It must meet the following conditions:

1. No restrictions on the time you press the key
2. The ability to enter information in other ways
3. In case of using non-standard translation of the cursor and focus, a description of the method of its movement

Conclusion

Standards require a large number of requirements. Many, such as the presence of a text equivalent to multimedia content, keyboard management, font size and discharge adjustment — are feasible without compromising on design. However, if we are talking about colors, shapes, sizes and infographics, the designer’s vision most often runs counter to the requirements of the standards. After all, any designer wants to not only correctly arrange information blocks, make convenient navigation and good UX, but also create a special atmosphere of the site, attract the attention of the user, add uniqueness to the product. Naturally, many design solutions do not fit into the standards framework.

Of course, you can make a separate version for people with disabilities, but the customer most often does not like this option. He wants everything, at once and in one product. Therefore, the task of developing a flexible (in all senses) web resource falls on the shoulders of all members of the working group: managers, designers, designers, developers, analysts and even the customers themselves. After designing the site, you need to immediately think over the hierarchy of meanings, the convenience of navigation, the popularity of certain sections, the functional purpose of all elements, the logic of the location of information blocks. In addition, it is also necessary to take into account the technical and financial literacy of the population, the age of the target audience, the orientation towards the platform,

Do not underestimate the complexity of designing a truly convenient and functional site “for all”, because in the process it is important to take into account not only the visible part, but all the semantics of the web resource. This requires more resources — temporary, monetary, professional. But if you set yourself this goal, then the output will be a product that can be safely called first-class

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.