Доступность интерфейса по WCAG: проверка и правки
Контраст, фокус, клавиатура и подписи в файле a11y.md
Какую задачу решает
Проверить интерфейс на доступность по WCAG
Что будет на выходе
Документ a11y.md: контраст, фокус, клавиатура, подписи
- Кому подойдёт
Вайбкодер, который хочет, чтобы сайтом могли пользоваться все, включая людей с ограничениями
- Тема
- Вайбкодинг
- Инструменты
- любой ИИ-чат
Серый текст на светло-сером фоне, кнопка-иконка без подписи, форма, в которой после нажатия Tab фокус уходит непонятно куда. Ты этого не замечаешь, потому что смотришь с хорошим зрением на большом мониторе и кликаешь мышкой. Человек со слабым зрением, с экранным диктором или просто с телефоном на солнце застревает на первом же экране.
Промпт проверяет интерфейс по четырём темам из WCAG: контраст, фокус, управление с клавиатуры, подписи. Результат — файл a11y.md с найденными проблемами, правкой для каждой и проверками, которые ты сделаешь сам за десять минут.
Дай ИИ скриншоты и HTML-код экрана. Он найдёт тексты с низким контрастом, элементы без подписи и места, где клавиатурой не пройти, и разложит правки по порядку: сначала то, что мешает совсем.
Что внутри
- Контраст. Ориентир WCAG уровня AA: обычный текст не меньше 4,5:1 к фону, крупный текст и элементы управления не меньше 3:1. ИИ отметит, где по виду не дотягивает, а точно проверишь в инструментах браузера.
- Фокус. При переходе по Tab видно, где ты находишься, и порядок совпадает с порядком на экране.
- Клавиатура. Меню, модальные окна, выпадающие списки и форма работают без мыши, из модального окна можно выйти по Esc.
- Подписи. У полей есть видимая подпись, у кнопок-иконок есть текст для диктора, у картинок со смыслом есть alt.
Как использовать
- Выбери 1–3 экрана, где люди совершают главное действие: форма заявки, оформление заказа, регистрация.
- Сделай скриншоты и скопируй HTML этих экранов (в браузере: правый клик, «Просмотреть код», скопировать нужный блок). Без кода ИИ проверит только видимую часть.
- Отправь промпт и приложи всё это.
- Сохрани ответ как a11y.md в проекте.
- Отдай агенту задачи из раздела «Что исправить» и после правок пройди экран клавиатурой сам по чек-листу из файла.
Рядом по теме: ТЗ на личный кабинет: разделы, права, пустые экраны, Cursor Rules для UI без нейрослопа: готовый design.mdc, Матрица ролей и прав для SaaS, статья «Что такое вайбкодинг» и Чек-лист «Перед запуском» (бесплатно).
Дальше — для участников
Регистрация бесплатная и занимает минуту. Часть закрытых материалов откроется сразу, без карты.
Что дальше
Практика по клавиатуре, контрасту и подписям на примере обычного сайта — в гайде Сайт, которым удобно всем. Проверить, как экран ведёт себя на телефоне, поможет Почини вёрстку на телефоне и не устрой редизайн. А для формы регистрации есть отдельный разбор: UX-аудит формы регистрации.
