Посетители сайта кейтеринга часто открывают его с телефона на ярком солнце, увеличивают шрифт или пользуются только клавиатурой. Некоторые слушают страницу программой чтения с экрана. Если меню, цены и кнопка заявки им недоступны, заказ уходит к другой компании. Ниже описано, как проверить текст и ссылки самостоятельно, не будучи разработчиком.
Что именно проверяем
Нужны три проверки. Первая: можно ли прочитать текст при слабом контрасте, на маленьком экране и при увеличении. Вторая: доступны ли все ссылки и кнопки без мыши. Третья: понятно ли, куда ведёт ссылка, если прочитать её отдельно от окружающего текста. В качестве ориентира возьмите международные рекомендации WCAG 2.0 уровня AA. Это не юридическое требование к вашему сайту, а удобная шкала для проверки.
Условный пример: страница «Фуршет на 40 человек»
Представим типичную страницу. Вверху большая фотография закусок, поверх неё светло-серый заголовок. Состав меню оформлен картинкой, потому что так красиво смотрится в макете. Ниже двенадцать карточек, и в каждой ссылка «Подробнее». В конце стоит кнопка «Заказать», сделанная так:
<div class='btn' onclick='openForm()'>Заказать</div>
<a href='/files/menu2013.pdf'>Скачать</a>Здесь сразу три проблемы. Кнопка из div не получает фокус с клавиатуры. Слово «Скачать» не говорит, что именно скачивается. Меню в картинке нельзя увеличить без потери чёткости, скопировать в письмо коллегам или прочитать программой экрана.
Контраст и размер текста
Для обычного текста WCAG 2.0 рекомендует соотношение контраста не ниже 4,5:1, для крупного (от 18 пунктов или 14 жирных) не ниже 3:1. Измерить его можно бесплатной программой Colour Contrast Analyser: пипеткой берёте цвет текста и фона, она показывает результат. Отдельно проверьте текст поверх фотографий блюд. Фон там неравномерный, и надёжнее положить под текст сплошную или полупрозрачную подложку.
Затем увеличьте масштаб страницы в браузере до 200%. Текст не должен налезать на соседние блоки, а цены и названия позиций не должны обрезаться. Меню, цены и условия доставки держите обычным HTML-текстом, а не картинкой. Если вы публикуете состав блюд, то и он должен оставаться читаемым текстом.
Ссылки, которые понятны без окружения
Пользователи программ чтения часто просматривают список всех ссылок страницы. Двенадцать одинаковых «Подробнее» в таком списке бесполезны. Замените их на «Состав банкетного меню», «Условия выездного обслуживания», «Меню фуршета на 40 человек». Если слова нужно оставить короткими, добавьте скрытое от глаз пояснение или текст в атрибуте aria-label.
Для файлов указывайте формат и объём: «Скачать меню фуршета, PDF, 2 МБ». Ссылка, открывающаяся в новом окне, должна об этом предупреждать. Не выделяйте ссылки в тексте только цветом: подчёркивание помогает тем, кто плохо различает оттенки. Телефон оформляйте ссылкой tel:, чтобы на смартфоне по нему можно было позвонить в одно касание.
Проверка с клавиатуры за десять минут
Отложите мышь и пройдите страницу клавишей Tab, а Shift+Tab вернёт назад. Посмотрите на три вещи:
- виден ли на каждой ссылке и кнопке фокус, то есть рамка или подсветка; часто её убирает правило outline: none;
- идёт ли фокус в логичном порядке: меню, содержимое, форма заявки;
- срабатывают ли Enter на ссылках и пробел на кнопках.
Отдельно пройдите форму заявки. У каждого поля (дата мероприятия, число гостей, телефон) должна быть подпись, связанная с ним через label, а не только подсказка внутри поля, которая исчезает при вводе. Выпадающий календарь должен позволять ввести дату руками. Сообщение об ошибке пишите текстом рядом с полем, а не одной красной рамкой.
Короткий проверочный список
- Контраст основного текста не ниже 4,5:1, в том числе на фото.
- При масштабе 200% ничего не перекрывается и не пропадает.
- Меню, цены и условия набраны текстом, а не картинкой.
- У фотографий блюд есть краткое описание в атрибуте alt; у декоративных картинок он пустой.
- Нет повторяющихся ссылок «Подробнее» и «Здесь».
- Кнопки сделаны элементами button или a, а не div.
- Фокус виден, порядок перехода логичен.
- У полей формы есть подписи, ошибки описаны словами.
- Файлы подписаны форматом и размером.
С чего начать исправления
Составьте таблицу: страница, проблема, где встречается. Исправляйте сначала шаблоны: шапку, карточку блюда, форму заявки. Одна правка там уберёт ошибку сразу на десятках страниц. Затем переведите меню из картинок в текст. Проверку стоит повторять после каждого редизайна и после загрузки нового меню, ведь именно при обновлении содержимого в текст чаще всего возвращаются картинки и безликие ссылки. Если доступность влияет на заказы, это можно записать в техническое задание подрядчику отдельным пунктом.
