Request a Quote
11 August 2021

UX Recommendations: How to Make the Site Accessible to People with Disabilities?

The appearance of information technology and Internet resources has always raised the question of accessibility of electronic information for people with disabilities, which could be solved only in 1997. It was in that year that the World Wide Web Consortium launched the Web Accessibility Initiative, whose task is to develop common standards and regulations to ensure greater accessibility of sites.

In the early days of the WAI, the WCAG 2.0 international standard was developed to require resource owners to make the resource more accessible to users with disabilities. This includes the hearing impaired, the visually impaired, the handicapped, and so on. Over 25 years there was a whole evolution of auxiliary elements, designed to help people with disabilities to comfortably use the resources of the Internet, to be on a level with healthy users.

What WCAG 2.0 is


In simple terms, WCAG 2.0 is a guide for every website owner with a set of requirements and recommendations for making sites more accessible for people with disabilities. It includes four basic principles:

We will talk about each category in more detail later. First, you need to know that there are three levels of compliance: A, AA, and AAA. The higher the "A," the better the site is accessible to all categories of the population. But reaching AAA is almost impossible because some criteria may not be available in most resources. This level exists exclusively for specialized websites, not for general access.


WCAG 2.0 principles and "guidelines". Source.


A number of countries (the United States, Australia, Germany, etc.) have special government commissions that closely monitor violations in the area of disability discrimination. This can lead to multimillion lawsuits for the mere fact that there are no additional options to simplify access to the site for such categories of people. And there are about 1 billion people with disabilities in the world, which speaks to the rather large scale of the problem that they are trying to solve in the legislation field.

Compliance of the site with WCAG 2.0 requirements


The following criteria are used to assess the eligibility of the site:

  1. Compliance level. See "What is WCAG2.0".

  2. The whole page is evaluated. For lazy developers, this means that the entire page must have additional options for disabled people, not just a single page. Otherwise, the web page does not get the appropriate grade.

  3. If the page is part of a process (for example, an online store with separate pages for each product), then accessibility should be present on all related pages without exception.

  4. If the information or feature does not have accessibility support, an alternative version with support should be provided. An example is multiple video players with subtitles or typhlo-commentaries.

  5. The "non-interference" principle. If the technology has no WCAG 2.0 compliance capabilities, then its presence is not prohibited, but even then, it must not block access to other parts of the site where accessibility support is provided. A vivid example is an advertising banner. If the text on it is unreadable for the visually impaired, then the close button should be clearly visible, otherwise it will be a restriction on access to the web resource.


Principles of WCAG 2.0


Perceivable

For this principle, it is important that all information on the page is provided in a way that anyone can perceive it. Examples: video and audio content accompanied by subtitles for the hearing impaired or typhlo-commentaries for the visually impaired, clear visibility of the text font, captcha with the possibility of using sound identification in case of poor text reading, etc.

Operable

Interface components must be able to be controlled using a keyboard. People with poor motor skills may have problems moving the cursor over individual items. In such cases, it is necessary to adjust the keyboard control to switch between them. The same applies to media content, where pressing a button can pause playback.

Understandable

Each element, information, or operation must be understandable to the end user. The most obvious example of adhering to the principle is the ability to switch the language. Also, each button should display a hint when pointing, so that a person has an understanding of what operation will be performed when pressed.

Robust

This principle does not apply to the user, but to the developer. When creating a website, it is necessary to write clean code without errors and unnecessary lines. This is necessary to ensure that later changes will not detect errors, or the user is no longer part of the information that breaks the first principle.

Recommendations for accessibility of sites and services


Now that you have an idea of WCAG 2.0, it's time to move on to what a site for people with disabilities should look like. As you know, it's important to be accessible not only morally, but also to avoid the attention of disability rights commissions.

It's a good idea to start with alternatives for non-text content. A modern website is nothing without pictures, music or media players. Here it is enough to provide a text description of the content for images, where a visually impaired person will not be able to recognize the images. The description should be clear and reflect the essence of the image in its entirety. For better accessibility it is necessary to complement the description with a voice-over, translation into other languages or in Braille text.

As for media players, when playing audio and video files, you should take care to add synchronized subtitles, preferably with typhlo-commentaries. A more advanced option would be to integrate additional accompaniment in sign language into the video content.

For textual content, there are also options that can increase accessibility. The page should be equipped with the additional ability to change the contrast of the page, making it easier to read and perceive. It is also necessary to provide the user with text scaling in case of poor readability of small print.


This is how an example of quality contrast for text looks like. Source.


Here are some tips on textual content:

Another problem can be the inability to control with the keyboard. If there is no button control, the second principle of WCAG 2.0 is being violated. To satisfy all the rules, it is recommended to recourse to the following:

When content has a time limit on usage or review, providing options to extend the session is required for convenience. If there are active chats, the user should be provided with a stop to automatically refresh conversations and scrolling. If any data needs to be entered during the limited time, the site should be equipped with a voice alert in case of a timeout.

For people with epilepsy, it is important to avoid repetitive bright flashing to avoid seizures. Therefore, it is highly recommended not to use such content on a web page. But if this cannot be avoided (presence of video sequences with flickering images), the end user should be warned about the dangers of playing the content.

Voice dialing can be another useful feature. Almost every device is equipped with this system, but even if there is no technical possibility, the site itself, if it has an on-screen keyboard, is obliged to comply with the rules and provide the function when you type.

Among the general rules it is worth highlighting the correct location of the elements, so they do not bunch up. In general, the visual part should be as neat and practical as possible, each button is in sight and has the necessary accompaniment of clues.

The best solution for the developer of an Internet resource would be to allow the user to select the options for themselves. Among government sites, the placement of the so-called "panel for the visually impaired" is popular. The principle of its operation is simple - the user chooses for himself the functions that he needs. Among them - a mode for the colorblind with a substitution of colors, increased contrast, changing the color and font size for text, the disabling of images, the emphasis on buttons and links among all elements.

The availability of features is not a guarantee of accessibility


Following the WCAG 2.0 guidelines and principles is undoubtedly a good thing. But it often happens that in the pursuit of accessibility, the developer gets lost, and all of his features work out of whack.

Consider the following examples of poor execution of good functionality.

The presence of limitations in the development of additional functions.

As previously mentioned, it is common for government agencies to use a "panel for the visually impaired," but often the developer is limited to changing the background color or font, which is fundamentally wrong. When developing this feature, all parameters should be taken into account and the user should have full control over the appearance of the page.

Providing separate versions of sites for people with vision problems.

On the one hand, it's not a bad idea in general, but on the other hand there is a need for parallel support and filling the content of two pages at once. This is impractical and costly.

Poor quality of screen narrator.

Because of errors in creation, a situation can arise where the screen reader is not activated on every element of the page, but on individual parts. This oversight occurs when sites are updated and filled with new content, when the developer forgets to attach the possibility of voiceover for added elements. Or the screen reader itself works occasionally due to its "cheapness".

Inability to find the button to switch to accessibility mode, even for a sighted person.

Here it is even more interesting, because the button with the switch to the version for the visually impaired is intended primarily for people with visual impairments. But sometimes the designer gets too carried away, and such a button can blend into the background, creating inconvenience even for a healthy person, who will not immediately see this element on the screen.


Contact us
Your Name*:
Your Email*:
Message: