Дизайн — статьи о сайтах
Сайт рекламного агентства — это витрина: крупные фотографии, слайдеры, тонкие светлые шрифты, кнопки «Подробнее». Всё это хорошо смотрится на мониторе дизайнера, но часть посетителей прочитает такую страницу с трудом: при ярком солнце на ноутбуке, с плохим зрением, без мыши или с экранным диктором. Ниже — порядок проверки, который владелец агентства может провести вместе с подрядчиком и без специальных навыков.
Почему у агентств типичные проблемы именно с текстом и ссылками
В портфолио текст часто лежит прямо на фотографии или видео. Заголовок кейса набран светло-серым по фону, который меняется от слайда к слайду. Название клиента и описание задачи иногда вообще вставлены в картинку, и тогда их не прочитает ни диктор, ни поисковый робот, ни человек, который увеличил масштаб страницы. Ссылки на кейсы чаще всего подписаны одинаково, и со стороны непонятно, куда ведёт каждая из них.
Как проверить контраст и размер шрифта
В рекомендациях WCAG 2.0 для уровня AA указан минимальный контраст между текстом и фоном: 4,5:1 для обычного текста и 3:1 для крупного (от 18 пунктов или от 14 жирных). Измерить его на глаз нельзя, поэтому возьмите бесплатную программу Colour Contrast Analyser или аналогичный инструмент: укажите цвет текста и цвет фона и посмотрите результат.
Отдельно проверьте текст на изображениях. Откройте каждый слайд главной страницы и спросите себя: читается ли надпись, если фон в этом месте самый светлый? Решения известны: полупрозрачная тёмная подложка под текстом, смещение надписи на спокойную область кадра, набор текста обычным HTML, а не частью картинки. Ещё один тест: увеличьте масштаб страницы до 200% и убедитесь, что текст не обрезается и не наезжает на соседние блоки.
Понятны ли ссылки вне контекста
Пользователи экранных дикторов нередко просматривают список всех ссылок страницы. Если там шесть раз подряд «Подробнее», выбрать нужную невозможно. Рассмотрим условный фрагмент карточки кейса:
<div class="case"> <img src="yogurt.jpg" alt=""> <h3>Запуск линейки йогуртов</h3> <p class="grey">Телевидение и интернет</p> <a href="/cases/yogurt/">Подробнее</a> </div>
Здесь сразу несколько проблем: у картинки пустой alt, хотя она несёт смысл, подпись светло-серая, а ссылка не говорит, о чём она. Лучше так: ссылкой сделать сам заголовок или написать «Подробнее о кампании «Запуск линейки йогуртов»». Если дизайн требует короткой надписи, лишние слова можно скрыть визуально, но оставить в тексте ссылки для диктора. Заодно убедитесь, что ссылки в абзацах отличаются не только цветом, но и подчёркиванием: иначе их не заметят люди с нарушением цветового зрения.
Проверка с клавиатуры без мыши
Отложите мышь и пройдите по главной странице клавишей Tab. Обратите внимание на четыре вещи:
- виден ли на каждой ссылке и кнопке фокус — рамка или смена фона (часто её отключают стилем outline: none и ничего не ставят взамен);
- идёт ли порядок перехода сверху вниз и слева направо, без прыжков;
- можно ли переключить слайдер и остановить автоматическую прокрутку;
- закрывается ли всплывающее окно с видео клавишей Esc и возвращается ли фокус на место.
Если в портфолио остались элементы на Flash, помните: многие мобильные устройства его не поддерживают, а клавиатурой и диктором такой блок обычно не управляется. Для таких материалов нужна HTML-версия.
Изображения и видео в портфолио
Alt-текст нужен для изображений, которые что-то сообщают: логотипа клиента-ссылки, макета наружной рекламы, скриншота кампании. Опишите суть коротко: «Билборд кампании: слоган на фоне поля». Чисто декоративные картинки получают пустой alt, чтобы диктор их пропускал. Для видеороликов подготовьте текстовое описание или расшифровку и субтитры, если в ролике есть речь. Это же полезно и тем, кто смотрит без звука.
Короткий чек-лист для приёмки страницы
- Контраст основного текста не ниже 4,5:1, крупного — не ниже 3:1, в том числе на слайдах.
- Важный текст набран в HTML, а не нарисован в картинке.
- Страница читается при увеличении до 200%.
- Каждая ссылка понятна без окружающего текста; одинаковых «Подробнее» нет.
- Ссылки в тексте выделены не только цветом.
- По странице можно пройти клавишей Tab, фокус виден.
- У смысловых картинок есть alt, у декоративных он пустой.
- Автоматическую прокрутку слайдера можно остановить.
- У видео есть текстовая альтернатива.
Начните с главной и страницы одного кейса: они задают шаблоны для остальных. Исправления в шаблонах обычно обходятся дешевле, чем переделка каждой страницы, поэтому включите эти пункты в техническое задание и в критерии приёмки следующей версии сайта.
