<div><img src="https://mc.yandex.ru/watch/56654995" style="position:absolute; left:-9999px;" alt="" /></div>
Попробовать бесплатно

Доступность (a11y)

Доступность часто обозначают сокращением a11y (между «a» и «y» в слове accessibility — 11 букв). Стандартный документ — WCAG.

Что обычно проверяют

  • Контраст текста и фона: не ниже 4,5:1 для основного текста.
  • Размер интерактивных элементов: 44×44 пикселя — комфортный минимум.
  • Работа без мыши: можно ли пройти все ключевые сценарии с клавиатуры.
  • Альтернативный текст для картинок и иконок.
  • Понятные сообщения об ошибках, привязанные к полям формы.
  • Поддержка экранных читалок и других вспомогательных технологий.

Почему это важно бизнесу

  • Прямые требования регуляторов и крупных корпоративных клиентов.
  • Расширение аудитории: миллионы людей просто не пользуются неудобными продуктами.
  • Лучшее SEO и более понятная разметка для поиска.
  • Снижение нагрузки на поддержку — люди реже ошибаются и реже пишут «не могу нажать кнопку».

Когда применять и когда нет

Применять

  • В любом продукте с публичной аудиторией
  • В государственных, банковских, медицинских сервисах — это часто требование закона
  • В B2B-продуктах для крупных корпораций с собственными требованиями

Не применять

  • Не существует: даже внутренние инструменты выигрывают от доступности, потому что и среди ваших сотрудников есть люди с разными возможностями

Примеры применения

Команда внедряет автоматическую проверку контраста в дизайн-системе. Все цвета и шрифты теперь автоматически прогоняются через проверку WCAG AA. Сразу выясняется, что светло-серый текст подсказок в формах не проходит по контрасту. После коррекции изменения замечают даже без проблем со зрением: формы стали понятнее и операторы поддержки получают на треть меньше уточняющих обращений «куда нажать».

Часто задаваемые вопросы

В разных странах требования разные. В России есть нормы для государственных сайтов и сервисов, в ЕС и США — серьёзные общие требования и судебные прецеденты. В B2B многие крупные клиенты требуют соответствия WCAG AA в качестве условия закупки.

С аудита: автоматических инструментов (axe, Lighthouse, Wave) и ручной проверки самых важных сценариев. Дальше — пофикcить самые грубые нарушения (контраст, отсутствие alt-текстов, работа без мыши) и встроить проверки в процесс дизайна и разработки, чтобы не накапливать новые.

Готовы применить теорию на практике?

Соберите команду в Shtab — единое пространство для проектов, целей и задач. Бесплатно до 5 человек.