Обзор
Хотя WooCommerce изначально учитывает требования доступности, многое зависит от владельца магазина. Именно вы отвечаете за то, насколько удобно и понятно пользоваться сайтом всем посетителям.
В этой статье собраны практические советы, которые помогут улучшить доступность контента, дизайна и пользовательских доработок.
Во многих странах интернет-магазины обязаны соответствовать стандартам доступности. Это не только улучшает пользовательский опыт, но и помогает соблюдать законодательство, например ADA и European Accessibility Act. Чаще всего ориентируются на стандарт WCAG 2.2 уровня AA.
Добавляйте понятный alt-текст к изображениям
Указывайте описательный альтернативный текст для изображений товаров и других визуальных элементов. Это помогает пользователям экранных читалок понять, что изображено и зачем оно нужно.
Не оставляйте alt пустым, если изображение несёт смысловую нагрузку. Если изображение декоративное, alt можно оставить пустым, чтобы его пропускали экранные читалки. Изображения товаров и кликабельные изображения всегда должны иметь описание.
Понятно подписывайте поля форм
Если вы добавляете собственные формы (например, через расширения), убедитесь, что:
- У каждого поля есть видимая и программная подпись (label).
- Вы не используете только placeholder — он исчезает при вводе.
Подписи должны чётко объяснять назначение поля. Подсказки размещайте рядом с полем. Ошибки должны быть связаны с полями через ARIA-атрибуты и озвучиваться экранными читалками.
Используйте тему с поддержкой доступности
Тема сильно влияет на доступность сайта. Рекомендуется выбирать темы с отметкой accessibility-ready в каталоге WordPress.
Такие темы проходят проверку на соответствие стандартам: навигация с клавиатуры, контрастность цветов и другие требования WCAG.
Если вы используете тему не из WordPress.org, запросите у разработчика отчёт о доступности (Accessibility Conformance Report) или аналогичную документацию.
Минимизируйте анимации и автозапуск
Избегайте автоматического воспроизведения слайдеров, видео и анимаций, если пользователь не может их остановить или отключить. Это может вызывать дискомфорт.
Анимации должны учитывать настройку «Уменьшение движения» в операционной системе пользователя.
- Windows 11: Параметры → Специальные возможности → Визуальные эффекты → Эффекты анимации
- macOS: Системные настройки → Универсальный доступ → Дисплей → Уменьшение движения
Проверяйте сайт на практике
Используйте автоматические инструменты и ручное тестирование:
- Проверьте сайт только с клавиатуры: используйте Tab для навигации и Enter для действий. Убедитесь, что можно искать товары, добавлять их в корзину и оформлять заказ без мыши.
- Используйте инструменты проверки, например WAVE, axe DevTools или плагины WordPress, такие как Accessibility Checker.
- Увеличьте масштаб страницы до 200% и 400% — убедитесь, что всё остаётся читаемым и элементы не перекрываются.
- Протестируйте сайт с экранными читалками, например NVDA (Windows) или VoiceOver (Mac).
Известные ограничения и как их учитывать
Обратите внимание на распространённые проблемы:
- Сторонние расширения: не все из них соответствуют требованиям доступности. Проверяйте перед использованием.
- Пользовательские блоки: при разработке соблюдайте семантический HTML и рекомендации по доступности.
- Кастомные доработки: собственный код (JS/CSS) может ухудшить доступность. После изменений обязательно тестируйте сайт.
- Если вы настраиваете цвета, проверяйте контраст. Например, текст на кнопке должен хорошо читаться на фоне. Желательно предупреждать пользователей в админке, если выбраны плохие сочетания.
Инструменты и ресурсы
- Руководство по доступности WordPress
- WAVE
- axe DevTools
- NVDA
- VoiceOver
- Accessibility Checker для WordPress
Обратная связь
Мы будем рады вашим предложениям и отзывам. Если вы нашли проблемы с доступностью или хотите предложить улучшения, свяжитесь с поддержкой или напишите на accessibility@woocommerce.com.