Лучшие практики доступности

Во многих странах интернет-магазины обязаны быть доступными для людей с ограниченными возможностями. Как разработчик расширений для WooCommerce, вы напрямую влияете на доступность магазинов, которые используют ваши решения, а также на соблюдение владельцами сайтов требований законодательства.

Эта статья предназначена для разработчиков, которые хотят сделать свои расширения соответствующими стандартам доступности. Рекомендуется, чтобы все расширения WooCommerce следовали этим практикам — это улучшает опыт как владельцев магазинов, так и их клиентов.

Законы о доступности

Примеры законов, требующих доступности сайтов электронной коммерции: Americans with Disabilities Act (ADA) в США и European Accessibility Act (EAA) в странах ЕС. Подобные законы действуют также в Австралии, Канаде, Израиле и других странах.

Если хотите изучить требования в своей стране, воспользуйтесь списком законов о веб-доступности по всему миру.

В большинстве случаев сайты должны соответствовать стандарту WCAG (Web Content Accessibility Guidelines). Чтобы продавцы могли использовать ваше расширение, оно также должно соответствовать этим требованиям.

Если расширение не соответствует WCAG, вы можете получать жалобы от пользователей и даже столкнуться с юридическими рисками.

Руководство по обеспечению доступности веб-контента (WCAG)

WCAG — это международный стандарт, который помогает сделать сайты доступными для всех пользователей, включая людей с ограниченными возможностями.

Он состоит из проверяемых критериев, основанных на четырёх принципах:

Четыре ключевых принципа

• Воспринимаемость
  Контент должен быть доступен для восприятия. Например, изображения должны иметь альтернативный текст, а видео — субтитры.
• Управляемость
  С сайтом должно быть удобно работать с клавиатуры и вспомогательных технологий, без ограничений по времени.
• Понятность
  Интерфейс должен быть логичным, с простым языком и предсказуемой навигацией.
• Надёжность
  Сайт должен корректно работать с различными устройствами и вспомогательными технологиями.

Уровни соответствия

• Уровень A — базовый
• Уровень AA — средний (требуется чаще всего)
• Уровень AAA — максимальный

Обычно требуется соответствие уровню AA, то есть выполнение всех критериев уровней A и AA.

Текущая версия

Актуальная версия — WCAG 2.2.
Рекомендуется ориентироваться на соответствие уровню AA.

Тестирование доступности

Проверяйте расширение на соответствие WCAG на этапе разработки. Это так же важно, как тестирование безопасности или качества кода.

Автоматизированное тестирование

Проще всего начать с автоматических инструментов. Они помогают быстро найти проблемы: отсутствие alt-текста, плохой контраст, непонятные ссылки и т.д.

Accessibility Checker — бесплатный плагин WordPress для проверки. Установите его в тестовой среде и добавьте элементы вашего расширения на страницу — после сохранения он покажет ошибки.

WAVE — ещё один удобный инструмент в виде расширения браузера.

Проверка с клавиатуры

Убедитесь, что расширением можно пользоваться без мыши:

• Все элементы доступны через клавишу Tab
• Фокус перемещается логично
• Работает переход назад (Shift + Tab)
• Нет «ловушек» фокуса
• Есть видимый фокус (не отключайте outline)
• Модальные окна корректно удерживают фокус
• Кнопки работают через Enter и Space
• Ссылки работают через Enter

Проверка при увеличении

Проверьте сайт при масштабировании 200% и 400% — контент не должен ломаться или перекрываться.

Проверка экранными читалками

Используйте:

• VoiceOver (macOS)
• NVDA (Windows)

Проверьте, что:

• Весь контент озвучивается
• У изображений есть описания
• Декоративные изображения игнорируются
• Элементы имеют правильные роли
• Кнопки и ссылки понятны
• Поля форм подписаны
• Состояния элементов озвучиваются
• Сообщения об ошибках и успехе объявляются
• Скрытый контент не читается

Проверка анимаций

• Добавьте возможность остановки автопроигрывания
• Избегайте мигающего контента
• Учитывайте настройку «уменьшение движения»

Как включить:

• Windows 11: Параметры → Специальные возможности → Визуальные эффекты → Эффекты анимации
• macOS: Системные настройки → Универсальный доступ → Дисплей → Уменьшение движения

Тестирование с пользователями

По возможности привлекайте реальных пользователей с ограниченными возможностями. Это помогает выявить проблемы, которые сложно заметить самостоятельно.

Дополнительные рекомендации

Делайте доступным свой сайт

Не забывайте про доступность собственного сайта и документации.

Добавляйте субтитры к видео

Видео должны иметь субтитры и текстовую расшифровку.

Помогайте пользователям

Даже доступное расширение можно настроить неправильно. Используйте безопасные значения по умолчанию и предупреждайте о проблемах (например, плохой контраст цветов).

Отчёт о доступности

Для работы с крупными компаниями может понадобиться отчёт о соответствии (ACR). Он показывает, насколько продукт соответствует стандартам доступности.

Обращайтесь к специалистам

Если нужно ускорить процесс — привлекайте специалистов по доступности. Они помогут найти и исправить проблемы быстрее.

Полезные ресурсы

• WordPress Accessibility Meetup
• WP Accessibility Day
• Требования accessibility-ready для тем WordPress
• Workshop по доступности WordCamp Europe
• Сертификация специалиста по доступности