Доступность сайта помогает посетителям получать доступ к контенту и выполнять действия с помощью разных средств. Это руководство поможет Вам адаптировать проверки клавиатурной навигации, контраста, альтернативного текста, форм и читаемости на основе WCAG к сайту Вашего бизнеса.
Посетитель может не суметь открыть меню с клавиатуры, услышать название поля формы или различить цену из-за низкого контраста. Такие препятствия могут помешать потенциальным клиентам отправить запрос, записаться на приём или завершить покупку.
Доступность сайта помогает людям с разными возможностями и условиями использования выполнять действия на Вашем сайте. Это касается не только посетителей, использующих программы экранного доступа. Временная травма, яркий солнечный свет, маленький экран или медленное соединение тоже влияют на удобство доступа.
Что доступность сайта даёт Вашему бизнесу?
WCAG — международные рекомендации по обеспечению доступности веб-контента. WCAG 2.2 задаёт общие критерии проверки для дизайнеров, редакторов и разработчиков. Многие компании выбирают уровень AA как первоначальный ориентир для своего сайта.
- Воспринимаемость: Посетитель должен иметь возможность воспринимать текст, изображения и медиаконтент разными способами.
- Управляемость: Посетитель должен иметь возможность выполнить любую задачу с помощью мыши, клавиатуры или вспомогательных технологий.
- Понятность: Заголовки, инструкции и сообщения об ошибках должны ясно направлять пользователя.
- Надёжность: Код должен корректно взаимодействовать с браузерами и вспомогательными технологиями.
Эти принципы относятся не столько к отдельным страницам, сколько к компонентам. В первую очередь проверьте повторяющиеся элементы: меню, всплывающие окна, поиск, фильтры и формы. Правовые требования оцените отдельно с учётом Вашей отрасли и договорных обязательств.
Само по себе указание уровня AA не является достаточным подтверждением для заявления о доступности. Сохраняйте результаты тестирования по страницам и компонентам. Включайте в эти записи каждую новую функцию.
Определите охват проверки по пути посетителя
Не начинайте с проверки всех страниц сразу. Выберите типовые сценарии, исходя из задачи посетителя. Для компании в сфере услуг важны форма запроса предложения, ссылка для звонка и запись на приём. Для интернет-магазина — поиск товаров, фильтрация, корзина и оформление заказа.
Например, при запросе предложения посетитель открывает страницу услуги, изучает пакет и отправляет форму. В этом сценарии заголовки, ссылки, поля выбора и сообщения об ошибках должны работать согласованно. Проверить только форму недостаточно.
Для каждого сценария отметьте точки начала, принятия решения и завершения. Сгруппируйте страницы, использующие один шаблон. Так Вы сможете оценить, как ошибка в одном компоненте влияет на весь сайт.
Не ограничивайтесь главной страницей. Результаты поиска, пустая корзина и страница ошибки тоже могут прервать сценарий. Отдельно протестируйте настройку предпочтений в отношении файлов cookie.
- Адрес страницы и название компонента.
- Действие, которое посетитель хочет выполнить.
- Устройство или вспомогательная технология, при использовании которых возникает препятствие.
- Соответствующий критерий WCAG и приоритет исправления.
- Ответственный, критерий приёмки и плановая дата.
В новых проектах включите эти пункты в бриф на веб-дизайн . Это позволит командам дизайна и разработки работать по единым критериям приёмки.
Выполните все действия с помощью клавиатуры
Люди, которые не используют мышь, перемещаются по странице с помощью клавиатуры. Проверка клавиатурной навигации — один из быстрых способов ручного аудита доступности. Обновите страницу и выполните целевое действие, используя только Tab, Shift+Tab, Enter, Пробел и Esc.
Особенно внимательно проверяйте нестандартные компоненты. Любой элемент, который выглядит как кнопка, должен выполнять соответствующее действие и с клавиатуры. Фокус не должен переходить на невидимый или скрытый элемент.
Обеспечьте видимость фокуса и логичный порядок переходов
У каждого элемента, способного получать фокус, должен быть хорошо заметный индикатор. Порядок переходов должен соответствовать порядку чтения на экране. Уведомление о файлах cookie или закреплённое окно чата не должно перекрывать индикатор фокуса.
- Выберите цвет фокуса, который хорошо отличается от фона.
- Сравните порядок переходов фокуса с визуальным порядком элементов.
- Убедитесь, что при загрузке страницы фокус не переходит на невидимые элементы.
Обеспечьте возврат фокуса во всплывающих компонентах
Раскрывающиеся меню, вкладки и модальные окна — диалоговые окна поверх страницы — требуют отдельной проверки. Enter и Пробел должны активировать кнопки. Esc должен закрывать всплывающий слой. Пока модальное окно открыто, фокус должен оставаться внутри него. После закрытия фокус должен возвращаться на кнопку, открывшую окно.
Сделайте ссылку «Перейти к основному содержимому» первой точкой клавиатурной навигации. Она должна становиться видимой при получении фокуса. Для элементов, выполняющих действие по нажатию, используйте button — элемент кнопки. Не ограничивайтесь добавлением обработчика клика к div — универсальному контейнеру.
Проверка цветового контраста и читаемости
Цвет не должен быть единственным способом передачи информации. Не отмечайте ошибочное поле только красной рамкой: добавьте текст ошибки, значок или пояснение рядом с названием поля. Применяйте тот же подход к информации о наличии товара, скидках и обязательных полях.
Измеряйте контраст для каждого компонента
Для уровня AA ориентируйтесь на контраст не ниже 4,5:1 для обычного текста и не ниже 3:1 для крупного. Также проверьте контраст 3:1 для значимых границ кнопок, границ полей формы и графических значков.
Проверяйте контраст отдельно в дизайн-макете и на работающей странице. Прозрачные слои, фоновые изображения и тёмная тема могут изменить итоговый вид. Не полагайтесь только на цветовой код в файле дизайна.
Увеличьте масштаб браузера до 200%. Проверьте, не накладывается ли текст друг на друга и не появляется ли необходимость в горизонтальной прокрутке. В ссылках внутри текста не используйте только отличие по цвету: добавьте подчёркивание или другой визуальный признак.
Разделяйте текст заголовками. Пишите короткими абзацами. Обеспечьте возможность использовать межстрочный интервал не менее 1,5 без потери содержимого. Не размещайте текст в тесных блоках с фиксированной высотой.
Передайте назначение изображения альтернативным текстом
Программа экранного доступа передаёт функцию или содержание изображения через альтернативный текст. Он не должен описывать каждый пиксель. Его задача — сообщить то, что посетитель должен понять благодаря изображению.
Выбирайте подход в зависимости от типа изображения
- Информативное изображение: Кратко опишите тему и контекст.
- Функциональный значок: Назовите действие, которое запускает значок.
- Декоративное изображение: Используйте пустой альтернативный текст, чтобы программа экранного доступа не озвучивала лишнюю информацию.
- График или схема: Объясните основной вывод в тексте. При необходимости представьте данные списком.
Если изображение содержит текст, продублируйте его на странице. Не заменяйте альтернативный текст именем файла или набором ключевых слов. При загрузке информативных изображений не оставляйте поле альтернативного текста пустым.
Дайте редактору возможность выбрать назначение изображения. Для декоративных изображений система должна сохранять пустой альтернативный текст. В описании изображения товара укажите отличительные сведения: цвет, модель или состав комплекта. Не повторяйте одну и ту же информацию для каждого изображения.
Проверьте подписи полей и обработку ошибок в формах
Формы обратной связи, запроса предложения и оплаты важны для бизнес-задач. У каждого поля ввода должна быть понятная подпись. Текст-подсказка внутри поля не заменяет её: он исчезает, когда пользователь начинает вводить данные.
Давайте полям понятные названия
- Свяжите поля имени, электронной почты и телефона с label — элементом подписи поля.
- Объединяйте радиокнопки и флажки в fieldset — группу полей.
- Используйте legend — заголовок группы — для пояснения набора вариантов.
- Обозначайте обязательные поля не только звёздочкой, но и текстом.
- Задайте атрибут автозаполнения для полей имени, адреса и телефона.
Дополняйте сообщение об ошибке способом её исправления
После отправки формы ясно укажите, в каком поле возникла проблема. Не ограничивайтесь красным цветом или значком восклицательного знака. Покажите сводку ошибок над формой и переведите на неё фокус. Сохраните введённые данные, кроме пароля.
Ссылки на текст KVKK, предварительную информацию и договор также должны открываться с клавиатуры. Название ссылки должно указывать, какой документ она откроет.
В сценариях с вводом адреса, выбором доставки и оплатой картой на сайтах электронной коммерции также проверьте ограничения по времени. Посетитель должен иметь возможность запросить дополнительное время или получить предупреждение до начала действия.
Чек-лист доступности сайта перед публикацией
Автоматические инструменты обнаруживают некоторые проблемы в коде, но не могут самостоятельно оценить порядок фокуса или контекст текста. В каждом релизе сочетайте автоматическую проверку с ручным тестированием и реальными сценариями задач.
- Проверьте язык страницы, порядок заголовков и переход к основному содержимому.
- Формулируйте текст каждой ссылки так, чтобы её назначение было понятно и без окружающего текста.
- Проверьте порядок переходов по Tab, видимость фокуса и поведение клавиши Esc.
- Измерьте контраст текста, компонентов и цветовых обозначений состояний.
- Проверьте альтернативные тексты изображений.
- Проверьте субтитры к видео и текстовые расшифровки аудиоматериалов.
- Отправьте форму с ошибочными и корректными данными. Прослушайте сообщения об ошибках и успешной отправке с помощью программы экранного доступа.
- Протестируйте основной сценарий на мобильном экране, при большом масштабе и как минимум с одной программой экранного доступа.
Для каждой обнаруженной проблемы назначьте ответственного, приоритет и срок исправления. В первую очередь устраняйте препятствия, блокирующие основные действия, например работу меню или оплату. Включите правила альтернативного текста и заголовков в руководство для сотрудников, публикующих контент.
Встройте проверку в рабочий процесс
Не откладывайте вопросы доступности до дня публикации. Согласуйте цвета и примеры состояний в дизайн-макете. На этапе разработки проверьте семантический HTML — разметку, отражающую смысл элементов, — и управление с клавиатуры. После публикации регулярно фиксируйте отзывы пользователей.
Такой подход в проектах корпоративного веб-дизайна помогает согласовать решения по контенту, дизайну и разработке вокруг общей цели.
Часто задаваемые вопросы
Что такое WCAG?
WCAG содержит критерии доступности веб-контента. В новых проектах зафиксируйте критерии WCAG 2.2 и целевой уровень AA с самого начала. Включите их в проверки дизайна, разработки и готовности к публикации.
Достаточно ли уровня WCAG AA для сайта бизнеса?
Уровень AA — практичный начальный ориентир для многих сайтов бизнеса. Однако для государственных организаций, финансовых услуг и отдельных договорных проектов могут действовать дополнительные требования. Обсудите применимое законодательство и условия договора с Вашими юристами.
Достаточно ли автоматической проверки доступности?
Нет. Инструменты могут обнаружить недостающие подписи и некоторые проблемы с контрастом. Для оценки клавиатурной навигации, качества описаний и обработки ошибок нужны ручные тесты. Реальный сценарий задачи помогает выявить проблемы, которые автоматические инструменты могут пропустить.
Можно ли сделать существующий сайт доступнее без полного редизайна?
Сначала определите наиболее используемые шаблоны и сценарии целевых действий. Исправление общих компонентов может улучшить сразу несколько страниц. Затем поэтапно проверьте контент и медиаматериалы.
Итоги и следующий шаг
При создании нового сайта или его обновлении включите решения по доступности в план дизайна и разработки с самого начала. Опишите сценарий переходов по Вашему сайту в форме запроса предложения; вместе уточним Ваши цели, приоритеты и технический объём работ.
