Доступность — это свойство интерфейса, которое позволяет пользоваться им людям с нарушениями зрения, слуха, моторики и когнитивных функций, а заодно всем, кто временно или ситуативно ограничен. Мерило — стандарт W3C WCAG 2.2: четыре принципа (воспринимаемость, управляемость, понятность, надёжность) и критерии уровней A, AA и AAA; ориентир для большинства сайтов — уровень AA. Контраст, фокус, размеры целей, подписи и сообщения об ошибках закладываются в макет — исправлять их после разработки дороже.
После материала вы сможете
- объяснить четыре принципа WCAG (POUR) и разницу между уровнями A, AA и AAA
- назвать критерии WCAG 2.2, которые решаются на этапе макета, а не в коде
- проверить макет по чек-листу из 12 пунктов с привязкой к критериям WCAG 2.2
- описать для разработки состояния фокуса, порядок перехода и альтернативы жестам
Что знать заранее
Проверено на
WCAG 2.2 (W3C Recommendation, 2024-12-12)
Сверено с документацией: 11 октября 2026 г.
Содержание
- Кому нужна доступность: постоянные, временные и ситуативные ограничения
- WCAG 2.2: принципы POUR и уровни A/AA/AAA
- Контраст, размер и не только цвет
- Фокус, порядок и клавиатура — что закладывает дизайнер
- Размер целей касания и жесты
- Тексты: подписи, ошибки, альтернативный текст
- Чек-лист макета перед передачей в разработку
Кому нужна доступность: постоянные, временные и ситуативные ограничения
Доступность часто воспринимают как заботу о небольшой группе незрячих пользователей. W3C WAI описывает её шире: она касается нарушений слуха, зрения, моторики, речи, когнитивных и неврологических особенностей — и одновременно помогает людям без инвалидности. Удобно думать о трёх видах ограничений.
Постоянное
- Примеры
- Слабое зрение, нарушение цветовосприятия, тремор, глухота, дислексия
- Что помогает в интерфейсе
- Контраст, текстовые альтернативы, крупные цели, субтитры, простой язык
Временное
- Примеры
- Сломанная рука, потерянные очки — примеры из материалов W3C WAI
- Что помогает в интерфейсе
- Управление одной рукой и с клавиатуры, масштабирование текста
Ситуативное
- Примеры
- Яркое солнце, нельзя включить звук, ребёнок на руках, медленный интернет
- Что помогает в интерфейсе
- Контраст, субтитры, крупные кнопки, лёгкие страницы
Сюда же относятся пожилые люди, у которых с возрастом меняются зрение и моторика, и все, кто пользуется сайтом с телефона, часов или телевизора. Поэтому доступность — это не отдельная «версия для слабовидящих», а качество основного интерфейса.
WCAG 2.2: принципы POUR и уровни A/AA/AAA
WCAG (Web Content Accessibility Guidelines) — стандарт W3C о доступности веб-контента. Версия 2.2 опубликована 5 октября 2023 года и обновлена 12 декабря 2024 года; она же утверждена как международный стандарт ISO/IEC 40500:2025. W3C рекомендует ориентироваться на последнюю версию: контент, соответствующий WCAG 2.2, соответствует и 2.1, и 2.0. Требования сгруппированы по четырём принципам — по первым буквам английских названий их называют POUR.
- 01Perceivable — воспринимаемостьИнформацию можно воспринять: увидеть, услышать или получить в виде текста. Контраст, альтернативы для изображений, субтитры.
- 02Operable — управляемостьИнтерфейсом можно управлять: с клавиатуры, одним пальцем, без точных жестов, с видимым фокусом.
- 03Understandable — понятностьПонятны и содержание, и работа интерфейса: подписи полей, внятные ошибки, предсказуемое поведение.
- 04Robust — надёжностьКонтент корректно интерпретируют разные браузеры и вспомогательные технологии — это прежде всего задача разметки.
A
- Что означает
- Базовые критерии: без них часть людей не сможет пользоваться интерфейсом совсем
- Как использовать
- Обязательный минимум
AA
- Что означает
- Включает A и добавляет критерии контраста, фокуса, размера целей и другие
- Как использовать
- Практический ориентир для большинства сайтов и приложений
AAA
- Что означает
- Самый высокий уровень: усиленный контраст, крупные цели, расширенные требования
- Как использовать
- Точечно, где это возможно; W3C не рекомендует требовать AAA для всего сайта
Контраст, размер и не только цвет
Подробно о контрасте и цветовых ролях — в статье о типографике и цвете. Здесь — сводка критериев, которые проверяются прямо в макете, без кода.
1.4.3 Контраст (минимальный)
- Уровень
- AA
- Что проверить в макете
- Текст — от 4,5:1; крупный текст (от 18 pt или 14 pt полужирного, примерно 24 и 18,5 px) — от 3:1. Плейсхолдеры и текст при наведении тоже считаются
1.4.11 Контраст нетекстовых элементов
- Уровень
- AA
- Что проверить в макете
- Рамки полей, иконки, состояния переключателей, значимые части графиков — от 3:1 к соседнему цвету
1.4.1 Использование цвета
- Уровень
- A
- Что проверить в макете
- Ошибка, статус, обязательность, ссылка не обозначены только цветом — есть текст, иконка или подчёркивание
1.4.4 Изменение размера текста
- Уровень
- AA
- Что проверить в макете
- Текст можно увеличить до 200% без потери содержимого: подписи не обрезаются, кнопки растут вместе с текстом
1.4.10 Перекомпоновка
- Уровень
- AA
- Что проверить в макете
- При ширине 320 CSS-пикселей контент перестраивается в колонку без горизонтальной прокрутки (кроме таблиц, карт и подобного)
Фокус, порядок и клавиатура — что закладывает дизайнер
Многие люди управляют интерфейсом без мыши: с клавиатуры, переключателем, голосом, через экранный диктор. Для них важно, где сейчас фокус — выделение элемента, с которым произойдёт действие, — и в каком порядке он перемещается. Это закладывается в макет и спецификацию компонентов.
Нарисуйте состояние фокуса
У каждой кнопки, ссылки, поля и переключателя есть видимое состояние фокуса, заметное на любом фоне (2.4.7, AA). Индикатор — тоже нетекстовый элемент, ориентир по контрасту 3:1.
Задайте порядок
Порядок перехода совпадает с логикой чтения и задачи: сначала поля формы сверху вниз, затем кнопка отправки (2.4.3, A). В сложных экранах отметьте порядок цифрами прямо в макете.
Всё доступно с клавиатуры
Любое действие, которое делается мышью, должно выполняться и с клавиатуры (2.1.1, A): меню, карусели, выбор даты, закрытие окна.
Фокус не прячется под шапкой
Закреплённая шапка, плашка cookie или чат-виджет не должны полностью закрывать элемент в фокусе (2.4.11, AA). Предусмотрите отступ при прокрутке или закрытие плашки.
Размер целей касания и жесты
Целью (target) WCAG называет область, на которую нажимают: кнопку, ссылку, иконку. Маленькие и тесно стоящие цели трудно попадать людям с тремором и всем, кто держит телефон одной рукой.
2424
CSS-пикселя — минимальный размер цели по 2.5.8 (AA); исключения — достаточный отступ, ссылка в тексте, дублирующий элемент
4444
CSS-пикселя — усиленный критерий 2.5.5 (AAA)
Жесты требуют отдельного внимания. Критерий 2.5.1 (A) запрещает делать сложные жесты — щипок двумя пальцами или свайп по траектории — единственным способом выполнить действие. Критерий 2.5.7 (AA) требует, чтобы всё, что делается перетаскиванием, можно было сделать и простыми нажатиями.
Только жест
- Карусель листается только свайпом
- Карта масштабируется только щипком
- Порядок в списке меняется только перетаскиванием
- Ползунок цены двигается только тягой
Жест плюс нажатие
- У карусели есть кнопки «вперёд» и «назад»
- На карте есть кнопки «+» и «−»
- У элемента списка есть кнопки «выше» и «ниже»
- Нажатие на шкалу переносит ползунок, есть поле для точного значения
Тексты: подписи, ошибки, альтернативный текст
Значительная часть доступности — это тексты, и их пишут дизайнер, редактор и продакт, а не разработчик. Если в макете у поля нет подписи, а у иконки — названия, в коде их придётся придумывать на ходу.
1.1.1 Нетекстовый контент
- Уровень
- A
- Что предусмотреть
- Для каждого значимого изображения и иконки-кнопки — текст, передающий смысл или действие; декоративные изображения помечены как декоративные
3.3.2 Подписи или инструкции
- Уровень
- A
- Что предусмотреть
- Видимая подпись у каждого поля, формат там, где он неочевиден, отметка обязательных полей — без избытка инструкций
3.3.1 Обнаружение ошибок
- Уровень
- A
- Что предусмотреть
- Ошибка указывает на конкретное поле и описана текстом
3.3.3 Подсказка при ошибке
- Уровень
- AA
- Что предусмотреть
- Если понятно, как исправить, — сообщение подсказывает: «Введите номер в формате +7…»
2.4.6 Заголовки и подписи
- Уровень
- AA
- Что предусмотреть
- Заголовки и подписи описывают тему или назначение, а не «Раздел 1»
3.3.7 Без повторного ввода
- Уровень
- A
- Что предусмотреть
- Данные, введённые ранее в том же процессе, подставляются или доступны для выбора
3.3.8 Доступная аутентификация (минимальная)
- Уровень
- AA
- Что предусмотреть
- Вход без запоминания и перепечатывания: разрешена вставка и менеджеры паролей, есть вход по ссылке или ключу доступа
Так не работает
- alt «фото», «image123.jpg» или пустой alt у фото товара
- Иконка корзины без названия
- Плейсхолдер вместо подписи: исчезает при вводе
- «Ошибка в форме» над всеми полями
Так работает
- alt «Кожаный рюкзак, коричневый, вид спереди»
- Название кнопки «Корзина, 2 товара»
- Постоянная подпись над полем, пример — в подсказке
- Текст ошибки у конкретного поля и подсказка, как исправить
Чек-лист макета перед передачей в разработку
Чек-лист покрывает то, что видно в макете. Он не заменяет проверку готового интерфейса: семантику, работу с экранным диктором и клавиатурой проверяют уже в коде.
- Контраст текста не ниже 4,5:1, крупного — 3:1, включая плейсхолдеры (1.4.3)
- Рамки полей, иконки и состояния элементов — не ниже 3:1 к фону (1.4.11)
- Ни одно значение не передано только цветом (1.4.1)
- Макет проверен при увеличении текста до 200% и на ширине 320 px (1.4.4, 1.4.10)
- У каждого интерактивного элемента нарисовано заметное состояние фокуса (2.4.7)
- Порядок фокуса отмечен на сложных экранах и совпадает с логикой задачи (2.4.3)
- Закреплённые шапка, плашки и виджеты не закрывают элемент в фокусе (2.4.11)
- Цели не меньше 24×24 px или имеют достаточный отступ (2.5.8)
- У свайпов, щипков и перетаскивания есть альтернатива нажатием (2.5.1, 2.5.7)
- У полей видимые подписи, у ошибок — текст и подсказка исправления (3.3.1, 3.3.2, 3.3.3)
- Для значимых изображений и иконок-кнопок написан альтернативный текст (1.1.1)
- Вход не требует запоминать или перепечатывать коды, повторный ввод данных не нужен (3.3.7, 3.3.8)
Доступность дешевле всего на этапе макета: каждое решение, отложенное до кода, возвращается доработкой.