Сайт, которым удобно всем: клавиатура, контраст, подписи

Что это

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

Самый быстрый способ найти такие места — пройти сайт клавишей Tab. Она перебирает всё, с чем можно взаимодействовать: ссылки, кнопки, поля. Сразу видно, где выбранный элемент не подсвечивается, где порядок скачет и где кнопка не срабатывает от Enter. Эта проверка показывает кривые места, которые глаз проскакивает.

Промпт проверяет главный путь — то одно действие, ради которого продукт существует, — по списку:

• переход клавишей Tab и видимый фокус;
• срабатывание кнопок от Enter и пробела;
• постоянные подписи у полей и понятные ошибки;
• контраст текста и элементов;
• смысл, переданный только цветом;
• увеличение текста до 200%.

На выходе — отчёт по трём уровням и починка по одному пункту со способом ручной проверки.

Как использовать

1. Сначала пройди главный путь сам: нажимай Tab и смотри, видно ли, где ты сейчас. Запиши всё странное, но руками не правь.
2. Отправь промпт ИИ-агенту в папке проекта, добавив свои заметки. Если не уверен, что агент правильно понял увиденное, пришли ему скриншот — как его разобрать, есть отдельный промпт.
3. Чини по одному критичному пункту и проверяй сам после каждого.
4. Если отдельно беспокоит вид на телефоне, возьми ещё Почини вёрстку на телефоне и не устрой редизайн.

Промпт

Проведи аудит доступности главного пути моего продукта. Пока ничего не меняй.

Главный путь: [например: открыл страницу → понял предложение → заполнил форму → увидел подтверждение]
Что я заметил сам: [вставь заметки или напиши «ничего»]

Проверь:
— порядок перехода клавишей Tab: логичный ли он, не прыгает ли фокус в неожиданные места;
— видимый фокус: на выбранном элементе есть рамка или подсветка;
…

Что дальше

Если ещё нет общих правил оформления, собери их промптом Мини-дизайн-система: порядок вместо случайных цветов. Когда главный путь удобен всем, готовь проект к публикации: Найди ключи и пароли до того, как их найдут другие, а потом Живая ссылка: проверить и упаковать перед показом. Чтобы сайт не выдавал шаблонную нейросетевую вёрстку, подключи бесплатный запрет-лист Антишаблон: 30 примет сайта, сделанного нейросетью.