Сайт профессиональной ассоциации состоит в основном из текста: устав, стандарты, протоколы, реестр членов, анонсы мероприятий, порядок оплаты взносов. Если текст трудно прочесть, а ссылки непонятны, это мешает и людям с нарушениями зрения, и членам старшего возраста, и тем, кто открывает страницу с телефона при плохом освещении. Ниже описан порядок проверки, который можно пройти вместе с подрядчиком.
С каких страниц начинать проверку
Не нужно сразу проверять весь сайт. Начните со страниц, где посетитель выполняет действие: вступление, проверка статуса члена, оплата взноса, регистрация на мероприятие, скачивание документов. Для каждой смотрим четыре вещи: контраст и размер шрифта, структуру заголовков, назначение ссылок и доступность файлов. Ориентиром удобно взять критерии WCAG 2.2 уровня AA: на них можно сослаться в техническом задании.
Условный пример: страница «Реестр членов и вступление»
Представим вымышленную страницу. Под заголовком идёт абзац серым шрифтом 13 px на светло-сером фоне. Ниже три блока со ссылками «Подробнее», «Скачать» и «Здесь». Справа таблица реестра с колонками «ФИО», «Город», «Статус», причём статус «действует» выделен зелёным, а «приостановлен» красным, без слов. В конце лежит PDF с заявлением, сделанный сканированием бумажного бланка.
Что здесь не так:
- серый текст на светлом фоне может не дотягивать до контраста 4,5:1;
- три одинаковых «Подробнее» в списке ссылок экранного диктора неразличимы;
- статус передан только цветом, и человек с нарушением цветовосприятия его не отличит;
- скан не читается программами экранного доступа и не позволяет выделить текст.
Исправленный вариант: тёмный текст размером около 16 px, ссылки «Условия вступления в ассоциацию» и «Скачать заявление о вступлении (PDF)», статус словом в ячейке, заявление в текстовом PDF или прямо на странице.
Как проверить контраст и размер текста
Инструменты разработчика в браузере показывают коэффициент контраста при наведении пипетки на текст. Для обычного текста нужно не менее 4,5:1, для крупного текста и границ полей формы не менее 3:1. Проверяйте не только основной текст, но и подписи к полям, подсказки внутри полей, текст на баннерах и ссылки в подвале.
Затем увеличьте масштаб страницы до 200% и отдельно поменяйте размер шрифта в настройках браузера. Текст не должен обрезаться или налезать на соседние блоки, а читать абзацы не должно требовать горизонтальной прокрутки. Чаще всего ломаются широкие таблицы реестра и меню с множеством пунктов.
Как проверить, что ссылки понятны
Прочитайте подряд только тексты ссылок на странице или откройте их список в экранном дикторе. Если из текста не ясно, куда ведёт каждая ссылка, перепишите её. «Здесь» и «Подробнее» лучше заменить названием раздела или документа.
Дальше пройдите страницу клавишей Tab, не трогая мышь. Фокус должен быть хорошо заметен, порядок переходов логичен, а выпадающее меню не должно «запирать» курсор. Ссылка должна отличаться от обычного текста не только цветом, например подчёркиванием. Если ссылка открывает файл или новую вкладку, скажите об этом в тексте: «Протокол собрания (PDF, 2 МБ)».
Что проверить в документах: уставы, протоколы, стандарты
Откройте PDF и попробуйте выделить в нём слово мышью. Если не получается, это скан, и его нужно распознать или заменить. В нормальном документе есть заголовки, указан язык, а у таблиц размечена строка с названиями колонок. Самые важные сведения (порядок вступления, сроки и способ оплаты взноса, процедура обращения в комиссию) лучше публиковать на странице в HTML, а PDF оставлять как дополнение. Указывайте дату редакции документа и убирайте устаревшие копии, чтобы по ссылкам не открывались разные версии.
Короткий проверочный список
- Контраст основного текста, подписей и ссылок не ниже 4,5:1.
- При масштабе 200% страница читается без потери содержимого.
- Заголовки идут по порядку (h1, h2, h3) и описывают содержание разделов.
- Тексты ссылок понятны вне окружения и не повторяются для разных адресов.
- Все ссылки и кнопки доступны с клавиатуры, фокус виден.
- Статусы, ошибки и обязательные поля обозначены не только цветом.
- У файлов указаны формат, размер и дата редакции, PDF содержат выделяемый текст.
Результаты удобно вести в таблице: страница, проблема, как воспроизвести, кто исправляет, срок. Автоматические проверки находят лишь часть замечаний, поэтому ручной проход по ключевым страницам обязателен.
