Дизайн — статьи о сайтах
Сайт мастерской обычно открывают в неудобных условиях: на улице с телефоном, на ярком солнце, в очереди, иногда с увеличенным шрифтом или через экранный диктор. Если прайс едва виден, а вместо понятных ссылок везде «Подробнее», человек не найдёт, сколько стоит замена набоек и как к вам дойти. Ниже описано, как это проверить самому, без специальной подготовки.
Что проверять в тексте: размер, контраст, структура
Начните с трёх вещей, которые видны сразу.
- Контраст. Для обычного текста ориентир из рекомендаций WCAG 2.1 — не менее 4,5:1 к фону, для крупного — 3:1. Светло-серый #999999 на белом даёт около 2,8:1, и такой текст на солнце почти исчезает. Серый #767676 на белом уже проходит. Значения проверяются бесплатными калькуляторами контраста или панелью разработчика в Chrome.
- Размер. Основной текст на телефоне — от 16 px. Увеличьте масштаб страницы до 200%: ничего не должно обрезаться или налезать, горизонтальная прокрутка не нужна.
- Структура. Заголовки должны идти по порядку: название страницы, затем разделы «Ремонт каблуков», «Замена молний», «Растяжка». Не делайте заголовком просто крупный жирный текст: диктор такой «заголовок» не распознает.
Какие ссылки на сайте мастерской ничего не объясняют
Типичная беда сайтов услуг — карточки с одинаковыми ссылками «Подробнее», «Узнать больше», «Здесь». Пользователь диктора может открыть список всех ссылок страницы и услышать десять одинаковых «Подробнее». Зрячий посетитель с трудом понимает, куда ведёт каждая из них, если карточки не перед глазами.
Хорошая ссылка понятна вне контекста: «Цены на ремонт каблуков», «Как добраться до мастерской на карте», «Позвонить: +7 (000) 000-00-00». Отдельно проверьте ссылки-телефоны и адреса: они должны быть текстом, а не частью картинки, иначе их нельзя ни выделить, ни озвучить.
Условный пример: фрагмент страницы «Ремонт обуви»
Представим карточку услуги в таком виде:
<div class='card'><h3>Замена каблука</h3><p style='color:#aaa'>от срока 1 день</p><a href='/uslugi/kabluk'>Подробнее</a></div>
Здесь три проблемы: бледно-серый текст срока, безликая ссылка и телефон, оформленный кнопкой без текста внутри. Исправленный вариант:
<h3>Замена каблука</h3><p>Срок: от 1 дня</p><a href='/uslugi/kabluk'>Замена каблука: что входит и сколько стоит</a>
Цвет текста тёмный, ссылка описывает, куда ведёт, а кнопку звонка делают ссылкой tel: с видимой подписью «Позвонить в мастерскую». Если нужна короткая подпись визуально, разработчик добавляет скрытое для глаз, но читаемое диктором уточнение.
Проверка за 15 минут без специалиста
- Клавиатура. Нажимайте Tab на главной и странице услуги. Фокус должен быть виден (рамка или подчёркивание), порядок — логичным, а ссылки в меню и телефон — достижимыми. Enter должен открывать ссылку.
- Масштаб. Увеличьте страницу до 200% и откройте её на телефоне в альбомной ориентации. Прайс и часы работы должны остаться читаемыми.
- Диктор. В Windows можно запустить бесплатный NVDA, на iPhone — VoiceOver. Послушайте, как читается шапка, прайс и контакты. Хватит двух минут, чтобы заметить пропущенные подписи.
- Автопроверка. Аудит доступности в Lighthouse (встроен в Chrome) или расширения вроде WAVE покажут слабый контраст и ссылки без текста. Они находят не всё, поэтому ручные шаги тоже нужны.
Короткий проверочный список
- Текст и фон контрастны, особенно в прайсе, акциях и подвале сайта.
- Цены, сроки и адрес написаны текстом, а не картинкой.
- Ссылки различимы без цвета: подчёркнуты или выделены иначе.
- Нет нескольких одинаковых «Подробнее» подряд.
- Телефон и почта — кликабельные ссылки с видимым текстом.
- Таблица цен имеет заголовки столбцов («Услуга», «Срок», «Цена»).
- Фокус виден при переходе клавишей Tab.
- Страница не ломается при масштабе 200%.
Что поручить разработчику и как принять результат
Составьте задачу по пунктам списка и приложите адреса страниц, где вы нашли проблемы: главная, прайс, контакты, форма заказа обратного звонка. Просите не «сделать доступнее», а конкретно: изменить цвет текста в карточках, переименовать ссылки, добавить подписи к кнопкам. После правок повторите те же проверки с клавиатурой, масштабом и диктором. Так вы убедитесь, что результат реально изменился, а не просто указан в отчёте.
