📏 🤞🏾 🤰🏼 QA and its role in creating resources for people with disabilities 🛕 🧚🏻 🐀

In this article I want to draw attention to the fact that the problem of accessibility of sites and applications for people with disabilities is more acute than it seems. Under the cat is a list of useful tools for testing and microauditing several well-known sites.

First, let's define the terms.

HIA - limited health options. Such people may have deviations in the physical and / or mental development of a very different spectrum. According to the WHO (World Health Organization) report on HIA 2018:

More than 1 billion people, approximately 15% of the world's population, have some form of disability.
From 110 to 190 million adults have mobility difficulties, vision / hearing problems, etc.
More than 12 million people with disabilities live in Russia (most of them are adults).

Thanks to technology, users with disabilities can more or less fully work, develop and have fun, order clothes and products, in general, do everything like everyone else.
To make it easier for these people to be on the Internet, you should pay more attention to the availability of services and digital products.

And here is QA and what can we do

The main objective of QA is to ensure the quality of a service or product. I want the concept of “quality” to increasingly fit into “accessibility”. According to the manual that I wrote about below, accessibility is the implementation of content on the web in such a way that users of the widest possible range can work with it, including people with disabilities.

By the way, these recommendations will help make the site more accessible for users who do not have certain restrictions. How can I argue for product development in a conversation with a client?

A lot of people with disabilities are on the Internet every day, and such a revision will allow them to use the product without problems,
Adaptation will help the product stand out among competitors,
An adapted product can positively affect the number of users and affect the rating of the company as a whole,
, , , . ,
“accessibility id” ( iOS) iOS ,
, .

?

Detailed criteria for product compliance are described in the Web Content Accessibility Guide (WCAG).

From the main: there are three levels of compliance that depend on the specific situation and user group: the lowest , middle and highest . The levels are divided into four main principles: perceptibility, controllability, comprehensibility, reliability.

Each of the principles includes different content requirements, for example, it is important to provide a text version of non-text elements, to ensure full control of the keyboard only, or to avoid design elements that are hazardous to health. A complete list of level requirements can be found in the same WCAG 2.1.

On the Internet, most often you can find a display settings panel for people with disabilities. By the way, there is some kind of story with the HIA panel. You can still check how its implementation matches the layouts. But how to understand how well a visually impaired person reads this or that information is already a question.

For example, how do you know if a person with deuteranomaly (a state of vision characterized by a slight decrease in sensitivity to the waves of the green spectrum ) is normal to see page elements? To solve this problem, the NoCoffee tool is suitable.

Nocoffee- A free extension for browsers (Chrome, Firefox), a simulator of visual defects. Very easy to use and effective. The tool is popular, it gained a lot of positive reviews, more than 20,000 downloads on different platforms with a high average rating of 4 out of 5.

How NoCoffee works

With NoCoffee, you can check the display for people with all types of color blindness: protanomaly, protanopia, deuteranomialia, deuteranopia, tritanomaly , tritanopia, achromatopsia, tetrachromatia. It is possible to simulate various visual defects / eye diseases and other external factors: low visual acuity, cataracts, low peak contrast, nystagmus, visual field defects.

I was lucky (or unlucky), my brother had deuteranomaly, I asked him to describe the colors that he sees on the site to which I applied the deuteranomaly filter. After that, I checked our results, and they turned out to be the same, plus or minus.

Examples of “settings for HIA” panels

Pension Fund of Russia

On the Pension Fund portal “HIA settings panel” there are some layout bugs. But there is a plus: it has its own player for playing selected text. This is an alternative to screen readers. Screen reader is a program for reading from a computer or smartphone screen, designed for the blind and visually impaired. She voices the text, interface elements, and also provides sound and vibration feedback.

The site focuses on the work of screen readers, and it is really well adapted for their work, but more on that later.

VTB

Bank VTB Bank has implemented a “HIA settings panel”, there are some problems with displaying elements when changing the settings of this panel itself. But in general, it is worth paying tribute - I did not find such functionality in other banks.

All-Russian Society of Persons with Disabilities

But on the website of the All-Russian Society of Persons with Disabilities, the “HIA settings panel” turned out to be, but its capabilities are minimal and there are problems in layout. Of course, I would like such a resource to be more adapted for its users.

WorldSkills Ticket to the Future

We worked on the website of the WorldSkills Ticket to the Future project. Here we implemented settings for displaying page elements for people with disabilities. In addition to changing the color of the elements, there is also a separate design (different from the standard) for displaying the elements when switching colors.

In addition to adjusting color themes, in the HIA panels there is usually a function for increasing the size of the text, the function of turning on / off the display of images ( this is in all of the above examples ).

Less common is the ability to customize the display of text: the interval between characters and serif font, such settings are designed for people with dyslexia ( dyslexia is a specific learning disability that is neurological in origin, characterized by difficulties with accurate or fluent word recognition and insufficient reading and writing abilities ) . This, incidentally, was implemented on the website of VTB and the Pension Fund of Russia.

Unfortunately, there are no simulators of neurological impairment, and practically the only way to check the correctness of the display of text with serifs or with an increased interval between characters is to check the functionality of a person with dyslexia.

Back to accessibility testing

Another good testing tool is aXe .

aXe is designed to verify compliance of a site or application with WCAG 2 guidelines. This is an extension for browsers, it is currently installed more than 100,000 times and has a rating of 4.5.

How aXe Works

The tool is easy to use. You must install the extension in the browser. Management is carried out from the developer panel - after installation, a new ax tab will appear. When you switch to it, we will see a bunch of ads, calls to "buy a pro version", but the most important is the analyze button.

An analysis of one of the pages of the State Service revealed 10 non-compliance with WCAG requirements. We can assume that the site is well adapted for people with disabilities:

But when analyzing one of the pages of the FIU, 29 inconsistencies were found. Improvements are definitely needed here, especially considering the fact that people with disabilities and people aged are precisely using the resource.

The site of the All-Russian Society of Disabled People has 69 inconsistencies with WCAG recommendations.

What do we get after analyzing aXe:

. : , WCAG 2.
.

To adapt the site to people with problems with fine motor skills and those who cannot use the mouse, it is necessary to implement page elements so that the user can switch between them with the Tab key.

A good example is “Gosulugi”:

The picture shows how to move through the elements of the page sequentially and in the correct order using the Tab key.

The site of the All-Russian Society of Disabled is poorly adapted for switching with the Tab key.

No display of highlighting page elements. The transition between the elements is carried out gradually and inconsistently. This can greatly complicate the life of the user with disabilities.

The correct operation of screen readers is primarily affected by: not using the alt attribute for images, tags for headers, using elements to mark up forms, tooltips, and more.

All of the above problems will help find aXe. If you eliminate most of the problems identified by aXe when analyzing a page or web application, screen readers will work correctly. Naturally, the ideal result will never be, but the difference between the test results of reading the text by the screen reader before fixing the problems identified by aXe, and after that will be huge.

Useful materials

Web Content Accessibility Guidelines (WCAG) 2.0 - a regulatory document based on which software is developed for people with disabilities;

WebLind is a good resource about website development for people with visual impairment;

Guideline - a resource for developers, managers, designers on the implementation of the site for people with disabilities.

Total

In general, the field for work on improving resources in terms of accessibility is truly enormous. I hope that soon there will be more such tools, as well as QA and developers who can explain to the business the need for such an adaptation. This is a good thing for everyone: people with disabilities can fully use the resources, and the business will receive new users.

How is your site or application accessible? Do you use any testing tools?

QA and its role in creating resources for people with disabilities