До сих пор мы тестировали продукт мышью и глазами: кликали, смотрели на экран, сравнивали цвета. Но часть реальных пользователей работает без мыши — только клавиатурой, — или имеет ограничения по зрению. Продукт должен оставаться рабочим и для них, и для этого не нужен экспертный аудит на сотни страниц по полному стандарту — достаточно короткого базового чека.
Чему научишься за этот урок:
— пройти пользовательский сценарий, используя только клавиатуру;
— определить, достаточно ли контрастен текст на экране;
— проверить, что у полей формы есть видимые подписи, а не только плейсхолдеры.
1. Навигация клавиатурой
Проверьте, можно ли пройти весь сценарий — например, регистрацию, — используя только клавишу Tab для перехода между полями и Enter для отправки, без единого клика мышью. Важен не только сам переход: должно быть явно видно, на каком элементе сейчас находится фокус (например, рамка вокруг активного поля или кнопки). Если фокус не виден, пользователь не поймёт, где он сейчас находится, даже если Tab технически работает.
2. Контраст
Проверьте, достаточно ли текст отличается по цвету от фона, чтобы его было легко прочитать. Светло-серый текст на белом фоне — типичный провал: формально текст есть, но реально прочитать его сложно, особенно людям со сниженной контрастной чувствительностью.
3. Подписи полей
У каждого поля формы должна быть понятная подпись — не только плейсхолдер (текст-подсказка внутри поля, который исчезает, как только пользователь начинает вводить данные), а видимая подпись рядом с полем, которая остаётся на месте всегда. Это важно для человека, использующего программу чтения экрана: такая программа должна понимать, что вводить в поле, даже если поле уже заполнено и плейсхолдер давно исчез.
+---------------------+------------------------------------------+ | ПУНКТ ЧЕКА | ТИПИЧНЫЙ ПРОВАЛ | +---------------------+------------------------------------------+ | 1. Клавиатура | Кнопка не получает фокус по Tab, | | | без мыши на неё нельзя перейти | +---------------------+------------------------------------------+ | 2. Контраст | Светло-серый текст на белом фоне, | | | формально есть, реально не читается | +---------------------+------------------------------------------+ | 3. Подписи полей | Есть только плейсхолдер, который | | | исчезает при вводе, подписи не остаётся | +---------------------+------------------------------------------+
Итог: доступность — не про идеал для всех возможных случаев, а про три базовых, легко проверяемых пункта: навигация клавиатурой (Tab/Enter и видимый фокус), контраст текста и фона, видимые подписи полей рядом с ними, а не только плейсхолдер.
Контрольный вопрос. Что проверяет пункт «навигация клавиатурой» в базовом чеке доступности?
Подсказка: Пункт про переход между элементами без использования мыши.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Что означает «фокус виден явно» при навигации клавиатурой?
Подсказка: Речь о зрительном обозначении текущего элемента, а не о том, работает ли Tab в принципе.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Какой пример иллюстрирует провал по пункту «контраст»?
Подсказка: Контраст — про то, насколько текст отличается по цвету от фона.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Почему плейсхолдер в поле формы не заменяет видимую подпись поля?
Подсказка: Подумай, что происходит с плейсхолдером в момент, когда человек начинает печатать.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Какие две клавиши используются, чтобы пройти сценарий без мыши: одна — для перехода между полями, вторая — для отправки формы? Перечисли через запятую, сначала клавишу перехода.
Подсказка: Первая клавиша обычно перемещает фокус вперёд по полям формы.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Кто, помимо людей без мыши, особенно зависит от видимой (не только placeholder) подписи поля формы? Ответь коротким словосочетанием — программа, которая читает пользователю содержимое экрана вслух.
Подсказка: Речь о программном инструменте, который озвучивает содержимое экрана для незрячих пользователей.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Что из перечисленного НЕ входит в три пункта базового чека доступности из урока?
Подсказка: В уроке было ровно три пункта: клавиатура, контраст, подписи полей — сверь список.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Какие из утверждений о базовом чеке доступности верны (выбери все подходящие)?
Выберите все верные варианты.
Подсказка: Одно из утверждений противоречит правилу про плейсхолдеры из урока — остальные соответствуют материалу.
Онлайн-проверка ответа появится позже
Задание. На полигоне при прохождении сценария записи на курс только клавиатурой (Tab/Enter) кнопка «Записаться» не подсвечивается рамкой фокуса ни на одном шаге Tab — то есть на неё, судя по всему, вообще нельзя перейти клавиатурой. Какой из трёх пунктов базового чека нарушен? Ответь одним словосочетанием.
Подсказка: Проблема в том, что элемент нельзя выбрать без мыши — вспомни, какой из трёх пунктов про это.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Онлайн-проверка ответа появится позже
Задание. Ученик сообщает: «На экране оплаты курса поле «Промокод» подписано только серым текстом внутри самого поля, который пропадает, как только я начинаю печатать. Рядом никакой другой подписи нет». Объясни в 2-3 предложениях, какой пункт базового чека доступности здесь нарушен и почему это проблема именно для пользователя программы чтения экрана, а не только эстетическая мелочь.
Подсказка: Подумай, что остаётся от подписи поля, когда пользователь уже начал вводить текст, и что из этого доступно программе, которая просто зачитывает содержимое экрана.
✅ Готово, если: программа запускается без ошибок и выводит то, что просят в задании.
Онлайн-проверка ответа появится позже
Задание. На полигоне сценарий записи на курс такой: Главная → Каталог → Карточка курса → кнопка «Записаться» → форма данных → кнопка «Отправить». Пройди мысленно этот сценарий только клавиатурой (Tab для перехода, Enter для отправки) и предположи ОДНО конкретное правдоподобное место, где навигация клавиатурой может сломаться. Опиши в 2-3 предложениях: на каком шаге сценария предполагаемый барьер и что именно нужно указать в отчёте, чтобы разработчик мог его воспроизвести.
Подсказка: Пройди по шагам сценария по порядку и подумай, на каком именно шаге интерактивный элемент — кнопка, поле, ссылка — мог бы выпасть из порядка обхода Tab.
✅ Готово, если: программа запускается без ошибок и выводит то, что просят в задании.
Онлайн-проверка ответа появится позже
Что дальше
Мы разобрали три базовых, легко проверяемых пункта доступности: навигация клавиатурой, контраст, подписи полей. Дальше — юзабилити, последняя тема главы: о том, что продукт может работать технически безупречно и при этом быть неудобным.
