Accessibility (base) · Sergey Sukharevsky

Accessibility is the quality of key scenarios for people with permanent, time and situational constraints. Include it in the definition of done and design system from the start: fixing semantics, focus, and structure after release is usually more expensive than checking early.

What is accessibility and why is it necessary?

Availability in UX – Definition

Accessibility is an approach to designing digital products in which as many people as possible can use them, regardless of their physical, cognitive or sensory characteristics. Accessibility is a part of the broader discipline, which is called inclusive design, but it is not limited to it.

Why it matters for UX

Poorly designed accessibility ruins the user experience for everyone. Example: too small fonts interfere not only with people with visual impairments, but also those who are simply tired. Contrast is lowered – any user under the sun or at night risks not seeing the button. Most UX guides associate accessibility with a more general quality of use.

Example: Lost audience segment

The application does not provide control of buttons and keys. People with a hand injury and anyone who doesn’t want to take a mouse will just go to a competitor. Loss of reach is the main business barrier to ignoring accessibility.

Key principles of accessibility

Contrast and readability

To meet WCAG 2.2 at level AA, plain text must have a contrast of at least 4.5:1 and large text must have a contrast of 3:1; logos, decorative and inactive text have exceptions. Font size, line length, and intervals are evaluated with language and script, not with a single universal number. The current criteria are collected in WCAG 2.2.

Not everyone uses a mouse. All functionality should be accessible from the keyboard, the order of focus should correspond to the logic of the interface, and the user should not fall into the “trap”. Tab usually shifts focus between elements, with arrows running inside components like menus, tabs, and radio groups according to their pattern.

Example

Authorization Form: If the focus cannot be returned from the keyboard after opening the prompt or modal window, the user will not be able to complete the login. Check not only the forward transition on the Tab, but also the reverse order, visibility of focus, Escape and return of focus to the element that opened the window.

Alternative texts and descriptions

An informative image needs a textual alternative that conveys its purpose in the current context. The decorative image, on the other hand, should be hidden from assistive technologies, such as leaving the alt="" blank. The button image should have an available name that describes the action, not the appearance.

Universal language and simplicity

UX copywriting should be short and not overloaded with speed. This is important for people with cognitive disabilities, as well as those who read a second or third language. Clear instructions, short markers, and predictable actions save time for everyone, not just for the low-mobility groups.

Responsiveness and scalability

According to the Resize Text Level AA criterion, text should be increased to 200 percent without loss of content and functionality. Separately check reflow in narrow viewport: apart from elements that really need a two-dimensional layout, the user does not have to constantly scroll the page in two directions.

Common Errors and Anti-Patterns

Declarative accessibility: alt for alt

Alt text is sometimes added only as a formality. alt="image 1" or a file name explains nothing, while a missing attribute may cause a screen reader to announce implementation details. Describe the meaning of an informative image; use an empty alt="" for a decorative one.

Use of only colours

Color-only error markers are a common problem. Either part of the audience does not distinguish shades, or the corny incorrect transfer of color on the screen. Add pictograms, text signatures, icons.

Insufficient focus on testing

Manual accessibility checks and real-world test work better than automatic checkers. Without this, it is difficult to fully see the problem.

Tools and resources for UX accessibility assessment

Mini-set: what to use everyone in practice

axe DevTools for quick accessibility checks
WAVE visualizes problems with color, alte markers and navigation structure
Color Safe (https://colorsafe.co/) with WCAG contrast testing

Short instruction

Add a few standard questions to the checklist of ux checks:

Can I use the interface only with the keyboard?
Do you read the text in typical conditions?
Do text alternatives convey the meaning of informative images, while decorative ones are hidden from the screen reader?
Is the logic of transitions and clues clear to the novice user?

Benefits of testing at all stages

Engage people with different degrees of digital literacy and with different devices. It is often seen how low availability scares off even digital-savvy users.

Accessibility and user experience: the impact on business

Metrics that make sense to watch

The impact of accessibility depends on the audience and the script, so don’t promise universal retention or conversion growth. Measure the success of a key task with a keyboard and screen reader, the number of blocking defects, user requests, and the proportion of components that have been tested.

Cases from practice

Increasing the active area of a small mobile button can reduce the number of misses, and correcting contrast can make the condition available in bright light and low vision. The effect is tested by erroneous clicks, script success, and quality tests, without attributing any change in the overall conversion to a single visual parameter.

FAQ: Briefly on the main issues

**Why is accessibility considered part of UX and not a separate domain? Accessibility is built into the user experience. If a product is uncomfortable for some people, UX is below the baseline.

What are the standards for digital accessibility? For web content, follow the current WCAG 2.2 recommendation and the applicable requirements of your market. Native applications are further checked by the accessibility guides and API of the target platform.

**Are automatic checks sufficient to guarantee availability? Nope. These tools don’t catch all the problems. Manual testing and feedback of live users is required.

**Do you want to make the product as accessible as possible immediately or can you do it in stages? Step by step, acceptable practice. It is important to prioritize the main scenarios and critical business locations.

**How do you check if a bad design is discouraging a part of the audience? Use data from ux-research, custdevs and user path analysis. Watch for the growth of errors, rejections and repeated appeals.

**What are the most common errors that interfere with the availability of the interface? Ignoring keyboard navigation, low contrast, lack of text alternatives.