Дизайн — статьи о сайтах
Страница тура обычно собрана из фотографий, баннеров, карточек и кнопок. Глазу всё понятно, но при проверке выясняется другое: надпись на фото не читается, десять ссылок «Подробнее» неотличимы друг от друга, а до формы заявки не добраться с клавиатуры. Ниже описано, как это обнаружить самостоятельно и что потребовать от разработчика.
Что именно проверяем в тексте и ссылках
Для сайта турагентства важны четыре вещи. Первая: читается ли текст при плохом освещении, на небольшом экране и при увеличенном шрифте. Вторая: понятно ли из самой ссылки, куда она ведёт. Третья: можно ли пройти весь путь от каталога до заявки без мыши. Четвёртая: попадает ли важная информация (даты, цена, что входит в тур, условия) в текст страницы, а не только в картинку или PDF.
Условный пример: карточка тура в каталоге
Возьмём вымышленный фрагмент каталога. Типичная разметка выглядит так:
<div class="card">
<img src="t12.jpg">
<p>Турция, 7 ночей</p>
<a href="/tour/12">Подробнее</a>
</div>Здесь у фото нет описания, название не размечено как заголовок, а ссылка вне карточки ничего не сообщает. Если на странице двадцать таких карточек, пользователь экранного диктора услышит двадцать одинаковых «Подробнее». Лучше так:
<h3>Турция, 7 ночей</h3>
<p>Вылет из Москвы, питание «всё включено»</p>
<a href="/tour/12">Подробнее о туре «Турция, 7 ночей»</a>Цену и даты вылета тоже оставьте текстом, а не частью изображения: так их можно увеличить, скопировать и прочитать вслух.
Ручная проверка за 15 минут
- Клавиатура. Нажимайте Tab от верха страницы. Фокус должен быть виден на каждой ссылке и кнопке, порядок должен совпадать с визуальным, а меню, фильтры и календарь дат должны управляться без мыши.
- Масштаб. Увеличьте страницу в браузере до 200%. Текст не должен перекрываться, а кнопка «Оставить заявку» не должна уходить за край экрана.
- Контраст. Проверьте белый текст на фото моря и серые подписи вроде «цена за человека». Для обычного текста ориентир по WCAG 2.1 — отношение 4,5:1, для крупного — 3:1.
- Ссылки. Отличается ли ссылка в тексте не только цветом, например подчёркиванием? Понятно ли без окружающих слов, что скрывается за «Здесь» или «Смотреть»? Предупреждает ли подпись, что ссылка ведёт на PDF-программу тура или откроется в новой вкладке?
- Телефон и почта. На смартфоне номер должен быть ссылкой вида tel:, иначе его придётся переписывать вручную.
Автоматические проверки и экранный диктор
Lighthouse в браузере Chrome, расширения WAVE и axe DevTools быстро находят отсутствующие описания изображений, слабый контраст, пустые ссылки и поля формы без подписей. Но они не оценят, осмысленно ли написано «Подробнее» и удобен ли порядок блоков. Поэтому автоматику стоит дополнить ручной проверкой.
Если есть время, включите бесплатный NVDA на Windows или VoiceOver на Mac и iPhone. Вызовите список заголовков и список ссылок. Если из них можно понять структуру каталога («Туры в Турцию», «Что входит в стоимость», «Условия бронирования»), то разметка в порядке. Если там набор из «Подробнее», «Далее» и «Нажмите», карточки нужно переделывать.
Контрольный список для приёмки страницы
- У страницы один h1, заголовки идут по уровням, названия туров размечены заголовками.
- Тексты ссылок уникальны и понятны вне контекста.
- Цена, даты, состав тура и условия есть в тексте, а не только на картинке.
- Информационные фото имеют краткое описание, а декоративные не мешают диктору.
- Фокус виден, а все элементы доступны через Tab.
- При масштабе 200% нет горизонтальной прокрутки и перекрытий.
- Поля формы заявки имеют видимые подписи, а ошибки описаны словами, а не только красной рамкой.
- Ссылки на PDF и внешние ресурсы помечены.
Если пунктов с отметкой «нет» много, составьте для разработчика список конкретных страниц и элементов, а не просьбу «сделать удобнее». Так проще оценить объём работ и проверить результат повторным прохождением тех же шагов.
