Дизайн — статьи о сайтах
Сайт сервисного центра часто открывают в неудобный момент: ноутбук не включается, телефон с треснувшим экраном, на улице яркое солнце. Если текст бледный, а номер телефона не нажимается, человек просто уйдёт к следующему сервису. Проверку доступности можно превратить в набор простых действий, которые вы поручите команде и примете сами.
Что считать проблемой доступности на сайте сервиса
Это всё, что мешает прочитать текст или воспользоваться ссылкой: слабый контраст, мелкий шрифт, ссылки без понятного названия, кнопки, до которых не добраться клавиатурой, цены и адреса только на картинке. Сталкиваются с этим не только люди с нарушениями зрения или моторики, но и клиенты с одной свободной рукой, с кнопочным или старым смартфоном, на солнце.
Текст: контраст, размер и структура
- Контраст. Для обычного текста ориентир — соотношение яркости не ниже 4,5:1, для крупного — 3:1. Проверьте любой инструмент-пипетку контраста. Чаще всего подводят серые подписи, текст поверх фотографии мастера и белые надписи на светло-оранжевых кнопках.
- Размер. Основной текст от 16 px. При увеличении страницы до 200% ничего не должно обрезаться или налезать друг на друга.
- Цены и сроки. Не оставляйте их только в картинке. Прайс лучше оформить таблицей с подписанными колонками: «Услуга», «Срок», «Стоимость».
- Заголовки. Разделы «Ремонт ноутбуков», «Гарантия», «Как привезти устройство» должны быть настоящими заголовками, а не жирным абзацем: по ним удобно перемещаться.
Ссылки и кнопки: чтобы название объясняло действие
Ссылки «Подробнее», «Здесь» и «Нажмите» вне контекста ничего не говорят. Программа экранного чтения умеет показывать список всех ссылок страницы, и шесть одинаковых «Подробнее» превращаются в загадку. Пишите так: «Цены на замену экрана», «Проверить статус ремонта», «Написать в мессенджер».
Отдельно проверьте контакты. Телефон должен быть ссылкой для звонка, а не картинкой или текстом, который не нажимается. Ссылки на файлы подписывайте форматом: «Бланк заявления на гарантийный ремонт (PDF)». Если ссылка открывается в новом окне, предупредите об этом. Ссылку отличайте от текста не только цветом, но и подчёркиванием. Между соседними ссылками, например телефоном и адресом, оставляйте достаточный отступ, чтобы не промахнуться пальцем.
Условный пример: карточка услуги «Ремонт ноутбуков»
Представим фрагмент страницы, который не относится к реальному проекту. Было:
- светло-серый текст 12 px «Диагностика бесплатна при согласии на ремонт» на белом фоне;
- шесть карточек с одинаковой ссылкой «Подробнее»;
- телефон вставлен картинкой в шапку;
- внизу фраза «Статус заказа смотрите здесь».
Стало:
- условия диагностики записаны тёмным текстом 16 px сразу под заголовком;
- ссылки названы «Замена матрицы ноутбука», «Чистка от пыли и замена термопасты» и так далее;
- телефон — текст-ссылка для звонка, рядом отдельная ссылка «Написать в мессенджер»;
- вместо «здесь» — кнопка «Проверить статус ремонта по номеру заказа».
Содержание не изменилось, но человек быстрее находит нужное действие, а программа чтения экрана правильно его озвучивает.
Как проверить самому за 20 минут
- Нажимайте клавишу Tab от начала страницы. Фокус должен быть виден, идти логично и доходить до телефона, формы заявки и статуса ремонта.
- Увеличьте масштаб до 200% и пролистайте страницу на компьютере и в телефоне.
- Откройте сайт на смартфоне при максимальной яркости экрана и убедитесь, что прайс читается.
- Проверьте форму заявки: у каждого поля есть видимая подпись («Модель устройства», «Что случилось»), а ошибка объяснена словами, а не только красной рамкой.
- Запустите автоматический аудит доступности в браузере, но не считайте его полным: он не оценит, понятны ли названия ссылок.
Чек-лист для приёмки страницы
- Контраст основного текста и кнопок проверен инструментом.
- Шрифт читается при увеличении до 200%, ничего не обрезается.
- Цены, сроки и адрес есть в тексте, а не только на картинке.
- Нет ссылок «Подробнее» и «Здесь» без пояснения.
- Телефон и мессенджер нажимаются с телефона.
- Все ссылки и кнопки доступны с клавиатуры, фокус виден.
- У полей формы есть подписи, ошибки описаны текстом.
Просите у разработчиков не общее заверение, что «сайт доступен», а список проверенных страниц, найденных проблем и исправлений. Начните с главной, страниц основных услуг и формы заявки: именно там клиент принимает решение обратиться.
