Доступность видна в обычном маршруте: человек открывает страницу, перемещается клавиатурой, читает заголовки и отправляет форму. Если фокус пропадает или ошибка объясняется только цветом, часть посетителей останавливается.
Доступность определяется не внешним видом главной страницы, а состоянием меню, порядком фокуса, подписями полей, контрастом и текстом ошибки.
Можно ли пройти страницу без мыши?
Меню, карточку услуги, поиск и форму проходят клавишей Tab. Порядок перехода должен соответствовать смыслу страницы, а текущий элемент — быть заметным. Если фокус уходит за пределы экрана или застревает в виджете, посетитель теряет управление.
Что должен сообщать не только цвет?
Контраст нужно смотреть у обычной, наведённой, выбранной и ошибочной версии элемента. Сообщение «поле заполнено неверно» должно быть доступно текстом и связано с нужным полем. Иконка или оттенок могут дополнять объяснение, но не заменяют его.
Как форма объясняет ошибку?
Подпись находится рядом с полем, формат данных понятен, а ошибка появляется там, где её ищут. После исправления введённое значение сохраняется. На телефоне клавиатура не должна закрывать кнопку и сообщение о результате.
Что облегчает чтение?
Заголовки идут в логичном порядке, ссылки описывают назначение, а изображения с важным смыслом имеют текстовую альтернативу. Пустая декоративная картинка не должна отвлекать от содержания. При увеличенном масштабе пользователь сохраняет доступ к основному маршруту.
Как использовать стандарт без формальности?
WCAG помогает назвать критерий для конкретной страницы и состояния. В записи указывают адрес, действие и фактическое препятствие, чтобы после изменения темы или формы вернуться к тому же маршруту.
Что происходит при увеличении?
При масштабе страницы заголовки, поля и кнопки сохраняют порядок и смысл. Горизонтальная прокрутка допустима только там, где она объяснима самим содержанием. Если карточка превращается в набор обрезанных элементов, посетитель теряет контекст.
Доступность оценивают не только на пустом экране. Открытое меню, заполненная форма и сообщение об ошибке показывают, исчезает ли фокус или контраст в состоянии взаимодействия.
Кому мешает найденная проблема?
Запись «WCAG проверен» ничего не говорит о посетителе. Назовите элемент, действие, состояние и препятствие: например, кнопка оплаты теряет фокус после ошибки формы.
Как сохранить доступность во всех состояниях?
Смысл страницы не должен зависеть от наведения, цвета или движения. В меню, заполненной форме и сообщении об ошибке посетитель должен понять, что произошло, без специального зрения и без мыши. Если компонент не выдерживает состояние, замечание относится к компоненту, а не к абстрактной «доступности сайта».
Контраст и фокус нужно смотреть на реальном фоне темы, а не только в отдельном макете. Состояние ошибки, отключённая кнопка и открытое меню часто используют другие цвета и границы.
Новый посетитель должен понять форму без подсказки другого человека. Если ответ зависит от цвета, наведения или точной моторики, компонент требует доработки, даже когда автоматический тест не показал ошибку.
Описание называет элемент, действие, состояние и препятствие. По нему разработчик меняет конкретный компонент и понимает, как посетитель должен пройти этот шаг.
В итоговой записи указывают роль посетителя и экран, на котором возникло препятствие. Команда понимает, чьё действие нужно повторить и где искать исправление.
