Дизайн — статьи о сайтах
На сайте фермы обычно много практичной информации: что есть в наличии, где забрать заказ, как связаться. Часто она спрятана в картинках, в мелком сером шрифте или за ссылками «Подробнее». Тогда ею не смогут воспользоваться пожилые покупатели, люди с плохим зрением и те, кто открыл сайт на телефоне под солнцем. Проверить это можно самостоятельно, без специальных знаний.
Что значит «доступны» текст и ссылки
Текст доступен, если его можно прочитать при слабом зрении, увеличить без потери содержимого и озвучить программой экранного чтения. Ссылка доступна, если понятно, куда она ведёт, и до неё можно добраться без мыши. Международные рекомендации по этой теме собраны в стандарте WCAG 2.0, но для первой проверки достаточно простых наблюдений, описанных ниже.
Пример: страница «Молоко и творог» до исправления
Представим условную страницу. Заголовок написан светло-зелёными буквами на фото луга. Цены на молочную продукцию лежат в картинке со скриншотом таблицы. Под ней стоит ссылка «Скачать». Внизу есть строка «Как добраться — здесь». Телефон тоже вставлен картинкой, чтобы его не собирали роботы.
Вот как может выглядеть исправленный фрагмент:
<h2>Цены на молочную продукцию</h2>
<table>
<tr><th>Товар</th><th>Объём</th><th>Цена, руб.</th></tr>
<tr><td>Молоко</td><td>1 л</td><td>указать</td></tr>
</table>
<p><a href="price.pdf">Скачать прайс-лист в PDF (до 1 МБ)</a></p>
<p><a href="contacts.html">Схема проезда к ферме</a></p>Цены стали текстом, у таблицы есть подписанные столбцы, а ссылки понятны вне контекста. Телефон лучше писать обычным текстом, а не картинкой.
Как проверить текст: размер, контраст, структура
- Увеличение. Нажмите Ctrl и «+» в браузере до 200%. Если текст налезает на фото, обрезается или пропадает горизонтальная прокрутка не по делу, вёрстку надо исправлять.
- Контраст. Откройте страницу на ноутбуке с приглушённой яркостью. Если подписи к товарам или цены читаются с трудом, контраст недостаточный. Точные значения разработчик проверит специальной программой-пипеткой. WCAG 2.0 для обычного текста требует соотношение не ниже 4,5 к 1.
- Текст на фотографиях. Заголовок поверх поля или стада нужен на однотонной подложке. Меняется кадр, а читаемость должна остаться.
- Выделение мышью. Попробуйте выделить цену или адрес. Если не выделяются, это картинка, и её не прочтёт ни программа озвучивания, ни поиск.
- Заголовки. Страница должна делиться на разделы, например «Мясо», «Яйцо», «Доставка». Они оформляются заголовками, а не просто жирным шрифтом.
Как проверить ссылки: клавиатура и названия
Нажимайте клавишу Tab, начиная с верха страницы. Фокус должен переходить по ссылкам и кнопкам в логичном порядке, а текущий элемент должен быть заметно выделен рамкой или цветом. Если выделения нет, посетитель теряется. Меню, которое раскрывается только при наведении мыши, часто не открывается с клавиатуры и неудобно на сенсорных экранах.
Затем прочитайте только тексты ссылок, без окружающих абзацев. «Здесь», «Подробнее», «Скачать» мало что говорят. Лучше писать «Условия доставки по району», «Прайс-лист на яйцо и птицу (PDF)». Для файлов указывайте формат и примерный размер: на мобильном интернете это важно.
Отдельно проверьте PDF. Если прайс отсканирован как изображение, он недоступен. Откройте файл и попробуйте выделить строку. Лучше продублировать цены на самой странице.
Проверка за 15 минут: список для владельца
- Страница читается при увеличении до 200%.
- Цены, адрес и телефон набраны текстом, а не вставлены картинкой.
- Серый и светлый текст на светлом фоне не используется.
- Табуляцией можно дойти до каждой ссылки и кнопки формы заказа.
- У активной ссылки есть видимое выделение.
- Названия ссылок понятны без окружающего текста.
- У полей формы («Имя», «Телефон», «Что заказать») есть подписи, а не только серые подсказки внутри поля.
- На телефоне страницу можно увеличить щипком, масштабирование не запрещено.
- Файлы PDF открываются и в них выделяется текст.
Что поручить разработчику и как принять работу
Сформулируйте задачу по пунктам списка и попросите проверить сайт ещё в программе экранного чтения, например в бесплатной NVDA для Windows, и в нескольких браузерах. Для картинок с товарами должны быть краткие описания в атрибуте alt, например «Сыр твёрдый, головка 2 кг». Декоративные фото, вроде заката над полем, описания не требуют.
При приёмке повторите проверки из списка сами: они занимают немного времени и сразу показывают, что осталось недоделанным. Делайте это после каждого заметного обновления сайта, особенно когда меняете прайс или сезонный ассортимент.
