Дизайн — статьи о сайтах
Страница мероприятия нужна, чтобы человек решил, приходить ли ему и как купить билет. Если он не может разобрать дату или не понимает, куда ведёт ссылка, он просто уйдёт и ничего вам не сообщит. Основные проблемы можно найти самостоятельно, без специальных программ.
Что именно проверяем в тексте и ссылках
Достаточно трёх вопросов. Читается ли текст: хватает ли контраста и размера, не спрятаны ли важные сведения в картинке. Понятна ли ссылка вне окружения и можно ли до неё добраться с клавиатуры. Размечена ли страница так, чтобы по ней можно было ориентироваться по заголовкам. Ориентиром служат рекомендации WCAG 2.0 уровня AA. Ниже взяты только практические проверки из этого набора критериев.
Пример: фрагмент страницы конференции
Условный фрагмент анонса, в котором собраны типичные ошибки:
<span class="title">Конференция «Городские события»</span>
<p style="color:#aaa">12 марта, 10:00. Выставочный зал</p>
<a href="/program">Подробнее</a>
<a href="/tickets">Здесь</a>
<div onclick="buy()">Купить билет</div>Что здесь не так:
- Название оформлено как span, а не как заголовок, поэтому в структуре страницы его нет.
- Светло-серый #aaa на белом фоне даёт контраст около 2,3:1, а для обычного текста нужно не меньше 4,5:1. Дата и место читаются хуже всего, хотя это главное.
- «Подробнее» и «Здесь» ничего не говорят, если читать ссылки списком.
- «Купить билет» сделан div с обработчиком клика. Это не ссылка и не кнопка, на неё нельзя перейти клавишей Tab, а Enter не сработает.
Исправленный вариант:
<h2>Конференция «Городские события»</h2>
<p>12 марта, 10:00. Выставочный зал</p>
<a href="/program">Программа конференции</a>
<a href="/tickets">Купить билет на конференцию</a>Цвет текста даты тоже нужно сделать темнее, например #595959 или темнее.
Как проверить ссылки с клавиатуры
Отложите мышь и пройдите страницу клавишей Tab, возвращаясь назад через Shift+Tab.
- Фокус должен быть виден на каждой ссылке и кнопке. Если рамка отключена стилем outline:0 и ничем не заменена, пользователь теряется.
- Порядок перехода должен совпадать с порядком чтения: программа, спикеры, билеты.
- Всплывающие окна, например выбор даты или формы регистрации, должны открываться и закрываться без мыши.
- Ссылка «Перейти к содержимому» в начале страницы избавляет от десятков нажатий по меню.
Как проверить читаемость текста
- Увеличьте масштаб страницы в браузере до 200%. Текст не должен обрезаться или налезать на соседние блоки, а расписание не должно требовать горизонтальной прокрутки.
- Измерьте контраст пипеткой в инструментах разработчика браузера или в программе Colour Contrast Analyser. Для обычного текста нужно не меньше 4,5:1, для крупного не меньше 3:1.
- Проверьте текст поверх фотографий. На светлом участке снимка белая надпись может пропасть.
- Если афиша выложена картинкой, дату, время, место и условия входа продублируйте обычным текстом. Тогда их можно увеличить, скопировать и прочитать программой экранного доступа.
- Не передавайте смысл только цветом. Пометка «места закончились» красным без слов не видна людям с нарушением цветового зрения.
Как проверить, понятны ли ссылки без окружения
Бесплатная программа экранного доступа NVDA умеет показывать список всех ссылок страницы. Откройте его и прочитайте как незнакомец. Если там двадцать раз подряд «Подробнее», пользователь не поймёт, какая из них ведёт на программу, а какая на условия возврата. Тот же результат даст простой тест: скопируйте тексты ссылок в столбик и посмотрите, различаются ли они.
Отдельно проверьте такие случаи:
- Ссылка на файл должна называть формат: «Программа (PDF)».
- Если ссылка открывается в новом окне, об этом нужно предупредить в тексте.
- Телефон и адрес электронной почты должны быть ссылками, а не картинкой или текстом, разбитым на части.
- Карта проезда должна сопровождаться текстовым адресом и описанием, как добраться.
Короткий проверочный список
- Название мероприятия оформлено заголовком, а разделы страницы имеют подзаголовки.
- Дата, время и место набраны текстом, а не только нарисованы на афише.
- Контраст основного текста не ниже 4,5:1.
- При масштабе 200% ничего не пропадает.
- До каждой ссылки и кнопки можно дойти клавишей Tab, и фокус виден.
- Тексты ссылок различаются и понятны без соседних слов.
- Покупка билета и регистрация работают с клавиатуры, а у полей формы есть подписи.
С чего начать исправления
Если замечаний много, идите по пути посетителя: сначала дата и место, затем кнопка покупки или регистрации, затем форма, потом остальное. Пункты по ссылкам и контрасту обычно правятся быстро, в шаблонах и стилях. Афиши-картинки и PDF требуют изменить привычки при подготовке материалов, поэтому договоритесь заранее, что каждый анонс публикуется и в виде текста.
