Дизайн — статьи о сайтах
Сайт ателье часто открывают с телефона и на ходу: нужно найти адрес, узнать, берётесь ли вы за подшив, и записаться на примерку. Если цены набраны бледно-серым по бежевому, все ссылки называются «Подробнее», а телефон нарисован на баннере, часть посетителей не дойдёт до записи. Это касается людей с пониженным зрением, пожилых клиентов и тех, кто смотрит на экран под солнцем. Проверить основное можно самостоятельно, без специальных знаний.
Что значит «доступный» текст и ссылка
Текст доступен, если его можно прочитать при слабом зрении и ярком свете, при увеличенном шрифте и если его корректно озвучит программа экранного доступа. Ссылка доступна, если её назначение понятно до нажатия, её можно выбрать клавишей Tab и при этом видно, где находится выделение. Ориентир для проверки — международные рекомендации WCAG 2.1 уровня AA. Их используют как рабочий стандарт, но здесь они нужны прежде всего как набор конкретных проверок.
Условный пример: фрагмент страницы «Ремонт одежды»
Представим страницу с таким содержимым. Заголовок «Ремонт одежды». Под ним пять строк: «Подшить брюки», «Заменить молнию», «Ушить пиджак» и так далее, с ценой «от ХХХ ₽». Текст светло-серый на кремовом фоне. В конце каждой строки стоит ссылка «Подробнее». Ниже блок «Позвоните нам» — картинка с номером телефона. Кнопка «Записаться на примерку» сделана из блока div с обработчиком клика. Ссылка на PDF-прайс называется «Скачать».
Проблемы в этом фрагменте:
- серый на кремовом, скорее всего, не дотягивает до коэффициента контраста 4,5:1;
- пять одинаковых «Подробнее» невозможно различить в списке ссылок;
- номер в картинке нельзя увеличить без потери чёткости, скопировать или нажать для звонка;
- div-кнопка не получает фокус с клавиатуры;
- «Скачать» не говорит, что именно и в каком формате.
Исправления: тёмный текст на светлом фоне, ссылки «Подробнее о замене молнии», номер текстом со ссылкой tel:, настоящая кнопка button или ссылка a, подпись «Скачать прайс-лист (PDF)».
Как проверить читаемость текста
Возьмите цвета текста и фона из макета или из инструментов разработчика браузера: многие из них сами показывают коэффициент контраста. Для обычного текста нужно не менее 4,5:1, для крупного (примерно от 24 px, или от 19 px жирным) — не менее 3:1. Отдельно проверьте самое неприметное: подписи под фото работ, сноски к ценам, текст внутри полей формы, надписи поверх фотографий. Затем увеличьте масштаб страницы до 200% и увеличьте шрифт в настройках телефона. Текст не должен обрезаться, наезжать на соседние блоки или требовать горизонтальной прокрутки внутри абзаца.
Как проверить названия и вид ссылок
Прочитайте ссылки страницы подряд, как список, без окружающего текста: именно так их слышит пользователь программы экранного доступа. Фразы «Подробнее», «Здесь», «Ещё», «Нажмите» без уточнения бесполезны. Лучше сделать видимое название осмысленным: «Условия срочного ремонта». Если дизайн требует короткой надписи, разработчик может добавить уточнение в скрытый текст, но оно должно включать видимые слова.
Ссылки внутри абзацев не должны отличаться только цветом: добавьте подчёркивание или другой признак. Телефон и почту оформляйте текстом со ссылками tel: и mailto:. Если ссылка ведёт на файл или открывается в новой вкладке, скажите об этом в названии.
Как проверить работу с клавиатуры
Отключите мышь и пройдите страницу клавишей Tab, назад — Shift+Tab. Проверьте:
- видна ли рамка или подсветка на каждой ссылке и кнопке;
- идёт ли порядок перехода сверху вниз, как на экране;
- раскрывается ли меню услуг без мыши;
- открывается ли форма записи по Enter, можно ли закрыть её клавишей Esc и вернуться на кнопку, с которой открывали;
- не попадает ли фокус на скрытые элементы за окном формы.
Что находят автоматические проверки, а что нет
Lighthouse в браузере Chrome, расширения WAVE и axe DevTools быстро покажут низкий контраст, пустые ссылки, картинки без описания. Но они не оценят, понятно ли название «Подробнее о замене молнии» и логичен ли порядок блоков. Поэтому используйте их как первый проход, а затем пройдите ключевой путь вручную: главная, услуги, цены, контакты, запись на примерку.
Короткий проверочный список
- Контраст основного текста не ниже 4,5:1, крупного — не ниже 3:1.
- Цены, адрес и время работы набраны текстом, а не картинкой.
- При масштабе 200% ничего не обрезается.
- Нет одинаковых ссылок «Подробнее» без уточнения.
- Телефон нажимается, адрес копируется.
- Ссылки в тексте отличимы не только цветом.
- Все кнопки и ссылки доступны клавишей Tab, фокус виден.
- Форма записи закрывается по Esc, у полей есть видимые подписи.
Если нашли несколько пунктов, оформите их как задачу для подрядчика: страница, элемент, что не так и как проверить исправление. Так правки будут точнее и не потребуют полной переделки дизайна.
