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

// Design

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

Are there any questions?
Alexander Safonov
Write to the expert
Featured image for 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:
  • perceivable;
  • operable;
  • understandable;
  • robust.
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.

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

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


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.


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.


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.


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.

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

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

Here are some tips on textual content:
  • when highlighting links, you should not be limited to color differences, it would be best, for example, to visually underline the element when hovering;
  • when playing media content, you should be able to change the volume or turn off or pause the media playback;
  • the color of the font and the background should not blend, it is important to create a clear contrast between the different objects for easy readability;
  • devices with different screen resolutions and orientations require a separate version of the web resource, so that every element does not overlap with each other and look harmonious;
  • the same applies to the line spacing, so that it does not change when the page is enlarged;
  • for contrast, the maximum allowable coefficient is 3 to 1.
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:
  • It is necessary to provide full access to all features and functions of the site using the keyboard;
  • if there are keyboard shortcuts, you need to understand that the system does not use these shortcuts for its operations, which can cause a conflict in use;
  • An excellent solution can be the customization of the control, so that the user can assign the desired keys or combinations for their own convenience.
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.

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

If you took away the arrow, you could hardly identify the button to switch the site to accessibility for the visually impaired on the first try. Source.

As you can see, even if you have the necessary functionality, you can sometimes use it incorrectly, so that the whole point of providing it to the user is lost. When in doubt about correctness, you can use the WCAG 2.0 web page validation service, or schedule an external QA to receive reports on any flaws.


In conclusion, it can be said that we should not forget about such details as accessibility. Even if we disregard the legal aspects, people with disabilities, like everyone else, want to get more information from various online resources. Providing them with the necessary tools is the right way to increase the flow of the audience.

It is important to be careful about the functionality. Its presence is only half the battle. It should be properly built into the site, making it accessible. Each element or text should be placed so that it was clearly visible, it did not overlap with other similar elements and did not blend in with the background image. Even if a person has problems with hearing, vision, manual dexterity, text or speech perception, he is still human and has the same rights to access websites.

Following these recommendations, all the principles and paying attention to mistakes, you can create a full-fledged website for everyone. Take a little more time to finalize the technical part, so that the resource with gratitude was used by everyone on the planet, regardless of the presence or absence of problems. Actually, that's all you need to know about accessibility for people with disabilities when creating a web resource, its history and the basic principles that should be followed.

UX Recommendations: How to Make the Site Accessible to People with Disabilities? key takeaways:
  1. What WCAG 2.0 is
  2. Compliance of the site with WCAG 2.0 requirements
  3. Principles of WCAG 2.0
  4. Recommendations for accessibility of sites and services
  5. The availability of features is not a guarantee of accessibility
  6. Conclusion
Merehead does professional development of site accessible to people with disabilities. If you have questions, contact us for a free consultation.

How can we help you?

Full name *
Email *
Your budget
Tell us about your project
Merehead review. Vleppo is a startup, digital asset exchange platform based on the Komodo blockchain protocol.

  Category: Design 11/09/2021
Brutalism in Web Design: Is That a New Trend?
The 2017 year, the year of new iPhone X, flexible displays, and modern technologies. But why we still continue facing with old, long-worn out designs?
  Category: Design 11/16/2021
How to Choose The Best Web Design Agency/Professional Development Company
It is not easy to choose a professional web design company. It is also not easy to choose a company for software development. For example 60,000 IT companies operate only in the US. There are many professional teams among them, and at the same time, guys who make poor quality projects also exist. So how to choose web application development company? First of all, we need to determine the main criteria for an ideal company. I've managed to set up the following points:
  Category: Design 01/01/2022
Custom Web Design vs Website Templates: What to Choose?
It’s probably the most common question between all entrepreneurs and owners. When you plan a launch of a website, you had to know all stepping stones, strengths, and weaknesses of both designs. Let's analyze them now!