Дизайн — статьи о сайтах
Посетитель сайта кафе обычно ищет три вещи: что в меню, до скольких вы открыты и как забронировать столик. Если светло-серое время работы сливается с фоном, а вместо ссылки на меню стоит слово «Здесь», задача решается с трудом. Так бывает у людей со слабым зрением, у тех, кто смотрит на экран телефона на ярком солнце, и у тех, кто не пользуется мышью. Ниже описано, как проверить это без специальной подготовки.
Что именно проверяем на странице кафе
Для начала возьмите четыре страницы: главную, меню, контакты и форму брони. На них проверяем текст (размер, контраст, структуру) и ссылки с кнопками (названия, заметность, фокус). Ориентиром служат критерии WCAG 2.0 и 2.1 уровня AA. Это международные рекомендации, по ним удобно ставить задачу подрядчику. Юридических выводов из них мы не делаем.
Хватает ли контраста у времени работы и цен
Для обычного текста рекомендуют контраст не ниже 4,5:1, для крупного (от 24 px, или от 19 px жирным) — не ниже 3:1. Проверьте значения в бесплатном калькуляторе контраста: введите цвет текста и фона. Для быстрой проверки подойдёт и аудит Lighthouse во вкладке Audits в Chrome DevTools: он отметит слишком бледные места.
Условный пример блока на главной:
<p style="color:#999999; background:#ffffff">Ежедневно с 9:00 до 22:00</p>Серый #999999 на белом даёт около 2,8:1, этого мало. Если заменить его на #767676, контраст составит примерно 4,5:1 и текст пройдёт проверку. Отдельно посмотрите места, где текст лежит на фотографии блюда или зала. Там контраст меняется от точки к точке, поэтому нужна затемняющая подложка или сплошная плашка под надписью.
Можно ли выделить и увеличить текст меню
Если меню выложено картинкой или сканом в PDF, его нельзя выделить и перевести в крупный шрифт без потери чёткости. Программы экранного доступа такой текст не прочитают. Лучше сделать меню HTML-страницей с заголовками разделов («Завтраки», «Напитки») и списком позиций, а PDF оставить как дополнение для печати. Проверка простая: попробуйте выделить название блюда мышью и увеличить страницу до 200%. Текст не должен обрезаться, а горизонтальной прокрутки быть не должно.
Понятны ли названия ссылок и кнопок
Ссылка должна объяснять, куда она ведёт, даже если её вырвали из контекста. Так читают страницу пользователи экранных дикторов: они часто просматривают список всех ссылок подряд. Сравните:
- плохо: «Подробнее», «Здесь», «Нажмите»;
- лучше: «Скачать меню в PDF», «Забронировать столик», «Построить маршрут до кафе».
Ссылки внутри абзацев не должны отличаться от текста только цветом, добавьте подчёркивание. Телефон оформите как ссылку вида tel:, чтобы с мобильного его можно было набрать одним касанием. Кнопку брони делайте достаточно крупной для пальца: ориентир — около 44×44 px.
Работает ли сайт без мышки
Отложите мышь и пройдите страницу клавишей Tab. Проверьте три вещи:
- фокус всегда виден (рамка или заливка вокруг ссылки), а не убран правилом outline: none;
- порядок перехода совпадает с порядком на экране: меню, затем бронь, затем контакты;
- выпадающее меню, галерею и форму брони можно открыть и закрыть с клавиатуры (Enter, Esc), а окно с формой не перехватывает фокус навсегда.
В форме у каждого поля должна быть подпись («Имя», «Телефон», «Число гостей»), а не только серая подсказка внутри, которая исчезает при вводе. Сообщение об ошибке пишите словами: «Укажите телефон», а не просто красной рамкой.
Короткий проверочный список для владельца
- Время работы, адрес, телефон и цены читаются при контрасте не ниже 4,5:1.
- Основной текст не мельче 16 px, страница читается при увеличении до 200%.
- Меню есть в виде обычного текста, а не только картинкой или PDF.
- У каждой ссылки понятное название без «Здесь» и «Подробнее».
- Ссылки в тексте заметны не только цветом.
- Весь путь до брони проходится клавишей Tab, фокус виден.
- У полей формы есть постоянные подписи, ошибки описаны текстом.
- Страница проверена на телефоне при ярком свете экрана.
Такую проверку удобно повторять после каждой смены оформления или сезонного меню. Автоматические инструменты находят лишь часть проблем, поэтому ручной проход клавишей Tab и взгляд на телефон остаются обязательными. Если найдёте недочёты, вместе с задачей для разработчика прикладывайте конкретные цвета, страницы и места.
