Как проверить доступность сайта клуба или магазина снастей

Если срок регистрации на рыболовный турнир есть только на афише, посетитель, который не видит изображение, может не успеть подать заявку. Поэтому дату, место, условия участия и контакты нужно разместить рядом обычным текстом. В этом и состоит цифровая доступность: человек может получить информацию и выполнить нужное действие независимо от того, как он видит экран, слышит звук или управляет устройством.

Небольшому сайту клуба, магазина снастей или редакции не обязательно начинать с редизайна. Сперва проверьте страницы, на которых посетитель принимает решение или совершает действие: анонс события, правила участия, карточку товара, форму заявки и контакты. Ищите помехи, из-за которых нельзя прочитать условия, найти кнопку или отправить данные.

Проверьте путь посетителя без мыши

Откройте сайт на компьютере и пройдите по нему клавишей Tab. Фокус должен по порядку попадать на меню, ссылки, поля формы и кнопки, а его положение — быть заметным. Enter обычно открывает ссылку или нажимает кнопку, пробел активирует кнопку и некоторые другие элементы, Shift+Tab переводит фокус назад. Если фокус исчезает, застревает в меню или перескакивает от описания турнира к концу страницы, человеку будет трудно закончить регистрацию без мыши.

Отдельно проверьте окно записи: получается ли открыть, заполнить и закрыть его с клавиатуры? Возвращается ли после закрытия фокус к кнопке, открывшей окно? Пока окно открыто, не мешает ли оно прочитать нужное содержимое? Обнаружить такие ошибки можно за несколько минут, хотя для исправления порой понадобится разработчик.

Ссылки, кнопки и порядок заголовков

Подпись «Подробнее» ничего не объясняет, если просматривать ссылки отдельно от текста страницы. Лучше назвать цель перехода: «Условия участия в турнире» или «Характеристики спиннинга». Ссылка ведёт на другую страницу или к разделу, кнопка выполняет действие — например, отправляет заявку. Текст, который лишь выглядит как кнопка, но не размечен как элемент управления, нередко недоступен с клавиатуры.

Заголовки нужны и тем, кто пользуется программой экранного доступа: по ним можно переходить между разделами. Поэтому «Место старта», «Стоимость участия» и «Что взять с собой» оформляйте как заголовки, а не просто выделяйте жирным. Сохраняйте иерархию: сначала заголовок раздела, затем, если нужно, подзаголовок. Крупный шрифт сам по себе этой задачи не решает.

Не прячьте условия внутри картинок и файлов

Афишей удобно делиться в мессенджере, но на сайте она не заменяет текст. Перенесите на страницу дату, время, адрес, порядок подачи заявки и контакты. Если событие связано с рыбалкой или охотой, подскажите читателю, где проверить действующие ограничения. Сроки, лимиты и разрешения зависят от региона: их нужно сверять с актуальными региональными нормативными актами. Перед публикацией проверьте и сами сведения — доступная подача не спасёт от устаревших условий.

Для фотографии удилища в карточке товара подойдёт короткое альтернативное описание того, что важно увидеть: «Спиннинг в сложенном виде рядом с чехлом». Декоративной картинке описание не нужно: оставьте его пустым, чтобы программа экранного доступа не зачитывала лишнего. Не превращайте альтернативный текст в набор ключевых слов и не повторяйте в нём подпись, которая уже стоит рядом.

Если на фото видно существенное различие моделей, например расположение колец или вид крепления, отметьте его в описании либо в основном тексте. К схеме проезда добавьте текстовый маршрут: откуда двигаться, где вход и что нужно знать о подъезде. Без пояснений карта бесполезна для человека, который не может её рассмотреть.

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

Сделайте текст различимым и предсказуемым

Светло-серые подписи на белом фоне могут казаться аккуратными на большом мониторе, но теряться на улице, когда человек смотрит адрес водоёма с телефона. Проверьте контраст текста и фона специальным инструментом, ориентируясь на критерии WCAG для обычного и крупного текста: оценки на глаз недостаточно. Затем увеличьте страницу до 200% и выше. Текст не должен обрезаться или перекрывать кнопки.

Не передавайте смысл одним только цветом. Если свободные места на выезд отмечены зелёным, а занятые — красным, добавьте слова «Свободно» и «Мест нет». Ошибку в форме обозначайте текстом рядом с нужным полем, а не только красной рамкой. Так сообщение останется понятным и при изменённой цветопередаче экрана, и человеку, который не различает эти цвета.

На мобильном устройстве не отключайте увеличение страницы. Проверьте, можно ли дочитать длинное название снасти, увидеть цену и нажать «Добавить в корзину» без горизонтальной прокрутки всего экрана. Тесно расположенные кнопки неудобны не только людям с ограниченной подвижностью — на берегу в перчатках это тоже чувствуется.

Формы: подписи, ошибки и подтверждение

У каждого поля нужна видимая подпись: «Имя», «Телефон», «Количество участников». Подсказка внутри поля исчезает, когда человек начинает вводить данные, поэтому подпись она не заменит. Обязательные поля отмечайте не одной звёздочкой, но и понятным пояснением. Если телефон требуется в определённом формате, покажите пример заранее, а не после неудачной отправки.

При ошибке сохраняйте введённые данные и указывайте, какое поле нужно исправить. Сообщение «Форма заполнена неверно» заставляет перепроверять всё подряд. После успешной отправки покажите подтверждение на странице: «Заявка получена, ответ придёт на указанный адрес». Изменения цвета кнопки для этого недостаточно.

Если запись закрывается в определённое время, напишите срок обычным текстом рядом с формой. Не оставляйте эту информацию только в таймере обратного отсчёта. А когда условия меняются, обновляйте и анонс, и форму: иначе посетитель не поймёт, идёт ли регистрация.

Видео, звук и проверка после правок

К видео с обзором снаряжения или разбором правил участия подготовьте субтитры, передающие речь и важные звуки. Автоматическую расшифровку вычитайте: она может ошибиться в названиях снастей, географических именах и специальных терминах. Если важные сведения появляются только в кадре — например, время сбора, — продублируйте их в описании или произнесите вслух. Звук не должен включаться неожиданно при открытии страницы.

Автоматическая проверка доступности находит поля без подписей, часть ошибок контраста и проблемы с разметкой. Но она не скажет, понятна ли ссылка «Положение» без соседнего текста, верно ли описана фотография и удаётся ли разобраться в заявке. Поэтому сделайте три прохода: запустите автоматическую проверку, пройдите страницу только с клавиатуры, затем откройте её в программе экранного доступа. Для последнего достаточно попробовать найти дату события, прочитать условия и отправить тестовую заявку. Такой проход помогает заметить препятствия, но не заменяет проверку с людьми, которые постоянно пользуются вспомогательными технологиями.

Как распределить работу в маленькой команде

• Редактор проверяет заголовки, названия ссылок, текст на афишах, подписи к изображениям и полноту условий.
• Дизайнер проверяет контраст, заметность фокуса, размеры элементов управления и поведение страницы при увеличении.
• Разработчик исправляет разметку форм, порядок перехода по странице с клавиатуры и работу всплывающих окон.
• Ответственный за публикацию повторяет короткую проверку после обновления шаблона или установки нового модуля.

В журнале правок записывайте конкретную, воспроизводимую проблему вместо общего «улучшить доступность»: «На странице турнира кнопка отправки не получает фокус при переходе клавишей Tab». Рядом укажите страницу, устройство или браузер, ответственного и результат повторной проверки. Для начала возьмите одну действующую форму записи, пройдите её без мыши и зафиксируйте первую помеху.