Сайт фотостудии обычно оценивают по портфолио: крупные кадры, много воздуха, тонкий серый шрифт. Но посетителю нужно прочитать условия, найти прайс и нажать «Записаться». Если текст сливается с фоном, а ссылки не отличить от обычных слов, часть людей не дойдёт до заявки. Ниже описано, как проверить это самостоятельно.
Что проверять в первую очередь
У фотостудий типичные слабые места: надписи поверх фотографий, светлые подписи к пакетам, ссылки на бронирование в виде иконок, галереи со слайдером. Поэтому проверка сводится к трём вопросам. Можно ли прочитать текст? Понятно ли, куда ведёт ссылка? Можно ли добраться до нужного действия без мыши?
Условный пример: страница «Семейная съёмка»
Возьмём вымышленную страницу. На ней есть:
- заголовок белыми буквами на фото со светлым небом;
- описание трёх пакетов серым цветом #999999 на белом, шрифт 14 px;
- под каждым пакетом ссылка «Подробнее»;
- «кнопка» записи, сделанная блоком с обработчиком клика, без текста для программ чтения;
- условия переноса съёмки мелким светло-серым шрифтом внизу.
Серый #999999 на белом даёт контраст около 2,8:1, а для обычного текста ориентир — 4,5:1 по рекомендациям WCAG 2.1. Серый #767676 на белом уже примерно соответствует этой границе. Три одинаковые «Подробнее» не различаются в списке ссылок. А блок вместо кнопки может не получить фокус с клавиатуры.
Как проверить контраст и размер текста
Откройте страницу в Chrome, нажмите правой кнопкой на текст и выберите «Просмотреть код». В панели стилей щёлкните по цветному квадрату у свойства color: подсказка покажет коэффициент контраста. Тот же расчёт делает бесплатная программа Colour Contrast Analyser.
- Для обычного текста ориентир 4,5:1, для крупного (от 24 px или от 19 px жирным) — 3:1.
- Для текста на фотографии берите самый светлый участок под буквами. На телефоне кадр обрезается иначе, поэтому проверьте и мобильную версию.
- Если контраст недостаточен, затемните фото полупрозрачной подложкой или вынесите текст на сплошной фон.
- Увеличьте масштаб страницы до 200%. Текст не должен перекрывать кнопки и обрезаться, а условия и цены должны оставаться читаемыми.
Ссылки и кнопки: понятно ли, куда они ведут
Люди с программами экранного чтения часто просматривают список ссылок страницы. «Подробнее» и «Нажмите здесь» в таком списке ничего не объясняют. Пишите «Подробнее о пакете „Семья“» или «Прайс на портретную съёмку». Если дополнительные слова портят дизайн, их можно скрыть визуально, оставив для программ чтения.
- Ссылка в тексте отличается не только цветом: добавьте подчёркивание или другой признак.
- У иконок соцсетей, телефона и карты есть текстовое название, например «Написать в мессенджер».
- Если ссылка открывается в новой вкладке, об этом сказано в тексте.
- Телефон оформлен ссылкой, чтобы набор номера работал с телефона одним нажатием.
- Кнопка действия сделана элементом button или ссылкой, а не обычным блоком.
Проверка с клавиатуры за пять минут
Уберите мышь и пройдите страницу клавишей Tab, назад — Shift+Tab, действие — Enter. Смотрите, виден ли выделенный элемент: если рамку фокуса скрыли ради аккуратного вида, ориентироваться невозможно. Порядок должен идти сверху вниз и слева направо. Окно бронирования должно открываться, пропускать фокус внутрь и закрываться клавишей Esc. Слайдер с кадрами должен листаться кнопками, до которых можно добраться клавишей Tab.
Короткий проверочный список
- Контраст основного текста не ниже 4,5:1, крупного — не ниже 3:1.
- Надписи на фото читаются на десктопе и телефоне.
- Страница при масштабе 200% остаётся читаемой.
- Тексты ссылок понятны вне контекста, одинаковых «Подробнее» нет.
- Ссылки отличаются от текста не только цветом.
- Иконки-ссылки имеют текстовое название.
- Все действия доступны клавишей Tab, фокус виден.
- Окно записи закрывается с клавиатуры.
Что передать разработчику по результатам
Составьте таблицу: адрес страницы, элемент, что не так, как проверяли. Для контраста добавьте текущие цвета. Автоматические проверки в Lighthouse или WAVE полезны, но находят лишь часть проблем: понятность текста ссылки и удобство порядка фокуса оценивает только человек. Лучше исправить сначала страницы с прайсом, формой записи и контактами, а затем остальные.
