Обзор
WooCommerce построен на базе WordPress, который соответствует строгим стандартам доступности.
Плагин WooCommerce наследует эти принципы и добавляет собственные функции доступности, обеспечивая совместимость с вспомогательными технологиями, такими как программы чтения с экрана и навигация с клавиатуры. Ниже описаны основные встроенные возможности.
Во многих странах законодательство требует, чтобы интернет-магазины были доступны для людей с ограниченными возможностями. Это помогает соответствовать требованиям таких законов, как Americans with Disabilities Act (ADA) в США и European Accessibility Act (EAA) в странах ЕС. Рекомендуется также ознакомиться с законами о веб-доступности в вашей стране.
Подробнее можно узнать в руководстве: советы по доступности для магазинов на WooCommerce.
Навигация с клавиатуры
Если используется тема WordPress с поддержкой доступности, WooCommerce обеспечивает полноценную навигацию с клавиатуры:
- Логичный порядок перехода по элементам (Tab) на страницах оформления заказа, корзины и в формах.
- Чёткое отображение активного элемента (фокус).
- Все интерактивные элементы (кнопки, выпадающие списки, переключатели) доступны без мыши.
- Кнопки работают через клавиши Space и Enter, ссылки — через Enter. Модальные окна корректно удерживают фокус.
Обратите внимание: тема оформления может переопределять стили WooCommerce, поэтому важно, чтобы она также поддерживала доступность.
Совместимость с программами чтения с экрана
WooCommerce использует семантический HTML и ARIA-атрибуты, чтобы пользователи экранных читалок могли удобно работать с сайтом:
- Формы и элементы управления имеют понятные подписи.
- Динамические изменения (например, обновление корзины или ошибки) озвучиваются через ARIA live-области.
- Структура страниц построена с использованием заголовков и списков для правильной иерархии.
- Элементы имеют корректные роли: кнопки, ссылки и поля форм распознаются соответствующим образом.
Доступные элементы форм
Формы, особенно на странице оформления заказа, разработаны с учётом доступности:
- Каждое поле связано с понятной меткой (<label>).
- Обязательные поля чётко обозначены, а ошибки отображаются и визуально, и программно.
- Инструкции и группы полей корректно воспринимаются экранными читалками.
Имейте в виду, что темы и сторонние плагины могут нарушать доступность, особенно если изменяют страницу оформления заказа. Проверьте, что метки, индикаторы обязательных полей и сообщения об ошибках остаются на месте.
Сообщения об ошибках и проверка данных
WooCommerce обрабатывает ошибки с учётом доступности:
- Ошибки отображаются рядом с соответствующим полем.
- ARIA-атрибуты связывают сообщения об ошибках с полями ввода.
- Проверка в реальном времени помогает исправлять ошибки без повторной отправки формы.
- Сообщения об успехе и ошибках озвучиваются через экранные читалки.
ARIA-атрибуты и области
ARIA-атрибуты улучшают взаимодействие для пользователей экранных читалок:
- Основные области страницы имеют роли (например, main, navigation, region) и уникальные названия.
- Интерактивные элементы используют состояния ARIA (например, aria-expanded).
- Динамические изменения контента озвучиваются через live-области.
Блоки WooCommerce и редактор сайта
Блоки WooCommerce (каталог товаров, корзина, оформление заказа) также учитывают требования доступности:
- Используется семантический HTML5.
- Поддерживается работа с клавиатуры и экранными читалками.
- Соответствие рекомендациям доступности WordPress.
Некоторые устаревшие блоки могут иметь ограниченную поддержку доступности. Рекомендуется использовать новые блоки и избегать устаревших решений.
Дополнительные аспекты доступности
- Масштабирование: корректная работа при увеличении страницы до 400% без потери функциональности.
- Анимации: учитываются настройки уменьшения движения (prefers-reduced-motion).
- Настройки по умолчанию: соответствуют требованиям контрастности и удобства (WCAG AA).
- Тестирование: проводится с использованием VoiceOver, JAWS и NVDA.
Обратная связь
Если вы столкнулись с проблемами доступности или хотите предложить улучшения, вы можете связаться с поддержкой или написать на accessibility@woocommerce.com.