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