Дизайн — статьи о сайтах
Сайт пекарни часто открывают с телефона, на улице или у витрины: нужно узнать часы работы, посмотреть меню, заказать торт. Если светлый шрифт сливается с фоном, а ссылка «Подробнее» ничего не объясняет, человек не получит ответа и уйдёт. Проверить это можно самому, без специальных знаний.
Что именно нужно проверить в тексте и ссылках
Доступность здесь сводится к четырём вопросам. Можно ли прочитать текст при ярком солнце и слабом зрении? Можно ли его увеличить, не сломав страницу? Понятно ли по названию ссылки, куда она ведёт? Можно ли дойти до нужной ссылки и нажать её без мыши? Ориентиром служат рекомендации WCAG 2.1 уровня AA, на них опираются многие проверочные инструменты.
Условный пример: блок «Торты на заказ»
Представим фрагмент страницы. Заголовок «Торты на заказ». Под ним абзац светло-серым цветом #AAAAAA на белом фоне, шрифт 13 px. Контраст такой пары около 2,3 к 1, а для обычного текста рекомендуется не менее 4,5 к 1. Ниже три карточки тортов, и в каждой ссылка «Подробнее». Рядом кнопка-картинка с нарисованным словом «Заказать» без текстового описания. Телефон напечатан обычным текстом, а меню лежит картинкой.
Проблемы в этом фрагменте такие:
- абзац трудно читать на экране телефона на улице;
- три одинаковые «Подробнее» невозможно различить в списке ссылок, который зачитывает программа экранного доступа;
- кнопка-картинка без описания для такой программы безымянна;
- по телефону нельзя позвонить одним касанием;
- картинку с меню нельзя увеличить без потери чёткости, а её текст не прочитать вслух.
Лучше сделать так: текст тёмно-коричневый на светлом фоне, не меньше 16 px. Ссылки называются «Подробнее о торте „Медовик“». Кнопка содержит настоящий текст «Заказать торт». Телефон оформлен ссылкой для звонка, меню напечатано текстом.
Как проверить контраст и размер текста
- В Chrome откройте инструменты разработчика, выберите текст и кликните по образцу цвета. Браузер покажет коэффициент контраста и отметит, проходит ли он норму.
- Для обычного текста ориентир 4,5 к 1. Для крупного (примерно от 24 px, или от 19 px жирным) достаточно 3 к 1.
- Отдельно смотрите текст поверх фотографий булочек и витрины. Проверьте его в нескольких местах кадра: на светлой корочке и на тёмной тени контраст разный.
- Увеличьте масштаб страницы до 200%. Текст не должен налезать на кнопки, а важные блоки не должны пропадать.
- Проверьте, что меню, цены и адрес набраны текстом, а не вставлены картинкой.
Как проверить ссылки и кнопки
Откройте сайт и нажимайте клавишу Tab. Фокус должен перемещаться в логичном порядке: шапка, меню, основной текст, форма заказа. На текущем элементе должна быть заметная рамка или подчёркивание. Если рамки не видно, пользователь клавиатуры теряется. Нажмите Enter на ссылке и убедитесь, что она срабатывает.
Затем проверьте сами названия. Прочитайте только тексты ссылок, без окружения: «здесь», «жмите», «читать далее» ничего не скажут. Название должно описывать цель: «Скачать меню в PDF», «Адреса пекарен», «Заказать торт». Ссылка не должна отличаться от текста одним лишь цветом, поэтому добавьте подчёркивание. Если файл скачивается, укажите формат.
Для полной картины вызовите список ссылок в бесплатной программе NVDA (сочетание Insert+F7) или в VoiceOver на устройствах Apple. Так вы услышите страницу так, как её слышат незрячие пользователи. Это быстро показывает повторяющиеся и безымянные ссылки.
Короткий проверочный список
- Основной текст контрастнее 4,5 к 1, размер не меньше 16 px.
- При масштабе 200% страница читается и работает.
- Меню, цены, часы работы и адрес набраны текстом.
- Каждая ссылка понятна без соседнего текста.
- Нет нескольких одинаковых «Подробнее» с разными адресами.
- Кнопки-картинки имеют текстовое описание.
- Телефон и почта оформлены ссылками для звонка и письма.
- Через Tab доходит до каждой ссылки и формы, фокус заметен.
- Ссылки отличаются от обычного текста не только цветом.
Что решить самим, а что поручить разработчику
Владелец сам отвечает за тексты: названия ссылок, описания товаров, наличие меню в виде текста и выбор цветов фирменной палитры. С этим можно разобраться без программиста. Разработчику стоит поручить видимый фокус, порядок перехода по Tab, правильную разметку кнопок и ссылок, описания к изображениям.
Автоматические проверки вроде Lighthouse или WAVE полезны, но находят лишь часть проблем. Например, они не оценят, понятно ли название «Подробнее о торте». Поэтому сочетайте их с ручной проверкой, а результаты записывайте в список правок с указанием страниц.
