# Доступность — минимум, который стоит сделать сразу

> Контраст, видимый фокус, подписи у полей и работа с клавиатуры: базовый уровень доступности за пару дней и почему он помогает всем пользователям.

Published: 2026-08-10 · Source: https://subxcat.com/ru/articles/accessibility-minimum · Author: SUBXCAT

Доступность часто откладывают как задачу «для отдельной аудитории», до которой продукт ещё не дорос. Но базовый уровень — не про отдельную аудиторию. Это контраст, который читается на солнце, фокус, который видно, подписи у полей и интерфейс, которым можно пользоваться без мыши. От этого выигрывают все.

Вот минимум, который не требует перестраивать продукт.

## Контраст

Светло-серый текст на белом выглядит изящно на хорошем мониторе и не читается на телефоне под солнцем или на дешёвом ноутбуке. Ориентир из стандарта WCAG: для обычного текста контраст не ниже 4,5:1, для крупного текста и значимых иконок — не ниже 3:1.

Где чаще всего проваливается:
- приглушённый текст: подписи, подсказки, даты;
- плейсхолдеры, которыми заменили подписи;
- текст на цветных кнопках и поверх изображений;
- неактивные элементы, которые не отличить от просто бледных.

Контраст показывают инструменты разработчика в браузере — прямо при выборе цвета у элемента.

## Видимый фокус

Человек, который ходит по интерфейсу клавишей Tab, должен видеть, где он сейчас. Популярная правка «убрать некрасивую обводку» — `outline: none` без замены — делает интерфейс непроходимым с клавиатуры.

Обводку не надо удалять, её надо сделать своей: заметной, в цветах продукта, появляющейся при навигации с клавиатуры и не мешающей при клике мышью. Для этого есть `:focus-visible`.

## Подписи у полей

У каждого поля должна быть подпись, связанная с ним в разметке, а не просто текст где-то рядом. Плейсхолдер подписью не считается: он исчезает при вводе, и через секунду уже не вспомнить, что это было за поле.

То же с кнопками-иконками. Кнопка с крестиком или корзиной без текстовой метки для экранного диктора называется просто «кнопка». Ей нужно имя — видимое или через `aria-label`.

Ошибки в формах привязывают к полю и показывают не только красным. Часть людей плохо различает красный и зелёный, и для них ошибка, выделенная одним цветом, невидима.

## Клавиатура

Пройди ключевые сценарии без мыши: Tab, Shift+Tab, Enter, пробел, Escape, стрелки. Проверь:
- доходит ли фокус до всех интерактивных элементов;
- идёт ли он в разумном порядке;
- открываются и закрываются ли меню и модальные окна с клавиатуры;
- не уходит ли фокус под открытое модальное окно и возвращается ли на место после закрытия.

Частый виновник — `div` с обработчиком клика вместо кнопки. Выглядит как кнопка, но табом до него не дойти и с клавиатуры не нажать. Настоящий `button` даёт всё это бесплатно.

## Движение и размер текста

Если в интерфейсе много анимации, уважай системную настройку уменьшения движения, `prefers-reduced-motion`. Для некоторых людей параллакс и резкие переходы — не неудобство, а головокружение.

Проверь, что интерфейс не разваливается при увеличении в браузере до 200%: текст не обрезается, кнопки не наезжают друг на друга.

## Почему это помогает всем

Высокий контраст помогает на солнце. Видимый фокус и работа с клавиатуры — опытным пользователям, которым лень тянуться к мыши. Подписи у полей — всем, кто отвлёкся посреди формы. Правильная разметка помогает автозаполнению, автотестам и поисковикам. А в ряде стран и отраслей доступность уже требование закона или условие крупных клиентов.

## С чего начать

Полный аудит по стандарту не нужен. Возьми три главных сценария и пройди их с клавиатуры, потом проверь контраст текста на главных экранах, потом подписи у полей и кнопок-иконок. Это день-два работы, и большая часть исправлений приходится на общие компоненты — то есть чинится один раз.

SUBXCAT закладывает этот минимум в компоненты продукта, чтобы новые экраны получали его автоматически.