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