Дизайн — статьи о сайтах
На сайте агентства недвижимости много однотипных элементов: карточки квартир, фильтры, десятки ссылок «Подробнее», телефоны, формы заявок. Если текст плохо читается, а ссылки не отличить друг от друга, пользоваться таким каталогом трудно. Это касается людей с плохим зрением, тех, кто листает объявления на смартфоне при ярком солнце, и тех, кто работает с клавиатурой или программой экранного чтения. Базовую проверку можно сделать за один вечер.
Что считать доступным текстом в карточке объекта
Ориентир — рекомендации WCAG 2.0 уровня AA. Для текста они включают несколько практических требований:
- Контраст обычного текста с фоном не ниже 4,5:1, у крупного — не ниже 3:1. Чаще всего подводят светло-серые подписи («Этаж», «Площадь»), цена поверх фотографии и белый текст на светлых кнопках.
- Страница должна увеличиваться до 200% средствами браузера без потери содержимого: цена не обрезается, кнопки не накладываются друг на друга.
- Важная информация не должна быть только на картинке. Если площадь комнат указана лишь на изображении планировки, а условия акции есть лишь на баннере, их не прочитает программа экранного чтения. Дублируйте такие данные текстом.
- У страницы указан язык (атрибут lang со значением ru), иначе программа чтения может произносить русский текст с неверными правилами.
Условный пример: карточка, где ссылки не различить
Вот упрощённый фрагмент каталога, придуманный для иллюстрации:
<div class="card">
<img src="flat-1042.jpg">
<span class="price">8 400 000 ₽</span>
<a href="/object/1042">Подробнее</a>
</div>Здесь три проблемы. У изображения нет текстового описания. Если на странице 20 карточек, пользователь программы чтения услышит 20 одинаковых ссылок «Подробнее» и не поймёт, какая к чему ведёт. Кроме того, цена может быть слабо контрастной на фоне фото. Исправленный вариант:
<div class="card">
<img src="flat-1042.jpg" alt="Гостиная двухкомнатной квартиры">
<span class="price">8 400 000 ₽</span>
<a href="/object/1042">2-комнатная квартира, 54 м², ул. Садовая: подробнее</a>
</div>Текст ссылки теперь понятен и вне карточки. Цену лучше выводить на сплошной подложке, а не прямо на фотографии.
Как проверить ссылки на всей странице
Откройте каталог и просмотрите тексты ссылок так, будто карточек вокруг нет. Бесплатная программа экранного чтения NVDA для Windows умеет выводить список всех ссылок страницы, и этот список хорошо показывает проблемы. Без неё можно просто выписать тексты ссылок и оценить каждый отдельно.
- Ссылки «Подробнее», «Здесь», «Читать далее» без уточнения не годятся.
- В обычном тексте (статьи о районах, описание объекта) ссылка должна выделяться не только цветом, например подчёркиванием.
- Телефон оформлен ссылкой с протоколом tel:, чтобы его можно было набрать нажатием на смартфоне.
- Ссылка на PDF-файл (например, презентацию дома) сообщает о формате в тексте.
- Если ссылка открывается в новом окне, об этом сказано в её тексте.
Проверка с клавиатуры: фильтры, галерея, форма
Уберите мышь и пройдите страницу клавишей Tab (назад — Shift+Tab). Проверьте три вещи. Первая: фокус всегда виден, то есть у выбранной ссылки или кнопки есть рамка или другое заметное выделение. Часто его убирают стилями ради аккуратности. Вторая: порядок перехода логичен — от шапки к фильтру, затем к карточкам. Третья: каждым элементом можно управлять без мыши. Выпадающий список районов, ползунок цены, переключение фото в галерее и отправка формы заявки должны работать по Enter, пробелу и стрелкам. Если нужное действие доступно только по наведению курсора, это дефект.
Что находят автоматические проверки, а что нет
Расширения для браузера вроде WAVE или aXe быстро показывают нехватку alt, слабый контраст, пустые ссылки и поля формы без подписей. Но они не оценят, осмысленно ли описание фото и понятен ли текст ссылки. «Фото 1» программа сочтёт допустимым. Поэтому результат автоматической проверки дополняйте ручной: клавиатура, масштаб 200%, чтение списка ссылок.
Короткий чек-лист для приёмки страниц
Проверьте пять типовых страниц: главную, каталог с фильтрами, карточку объекта, контакты и страницу с формой заявки.
- Контраст основного текста, цен и подписей не ниже 4,5:1.
- Страница увеличивается до 200% без обрезанного текста.
- Важные данные есть текстом, а не только на картинках.
- У содержательных фото есть осмысленный alt, у декоративных он пустой.
- Тексты ссылок понятны без окружения, одинаковых «Подробнее» нет.
- Телефон и почта кликабельны.
- Фокус виден, порядок Tab логичен.
- Фильтры, галерея и форма работают без мыши.
- У каждого поля формы есть подпись, видимая рядом с ним.
Если сайт делает подрядчик, включите эти пункты в приёмку и в техническое задание на новые разделы. Тогда правки будут частью разработки, а не отдельной переделкой после запуска.
