Доступность с Shopify

Темы и приложения Shopify определяют доступность. Оформление заказа в значительной мере задано Shopify.

Частые места выводов

Цвета темы со слишком низким контрастом, изображения товаров без альтернативного текста, приложения отзывов и всплывающих окон без управления с клавиатуры, мегаменю, которые открываются только при наведении, карусели без паузы. Ядро Shopify обычно не проблема — проблема в теме, приложениях и контенте, созданном в редакторе форматированного текста.

Проверить и выбрать тему

Тема определяет контраст, видимый фокус, структуру заголовков и управление меню и фильтрами с клавиатуры. Критерии перед выбором: пройдите главную страницу, коллекцию и страницу товара клавишей Tab — фокус всегда виден? Меню открывается без мыши? Контраст текста и кнопок не менее 4,5:1? Стандартные темы Online Store 2.0 (Dawn и производные) — надёжная отправная точка; для платных тем помогает тест клавиатурой на демо и запрос у поставщика декларации доступности.

Изображения товаров, варианты и форматированный текст

Дайте каждому изображению товара в админке альтернативный текст, описывающий содержание — не имя файла. То же касается изображений вариантов. Текст, встроенный как графика в значок или баннер («Распродажа», «Только сегодня»), невидим для программ чтения с экрана; используйте настоящий текст. В редакторе форматированного текста описания товара используйте уровни заголовков чисто (не просто увеличивайте текст), а списки — как настоящие списки.

Приложения и встроенные виджеты

Приложения отзывов, всплывающих окон, допродаж и баннера cookie часто вставляют собственные виджеты, которые захватывают фокус клавиатуры, не имеют подписей или показывают наложения без возможности закрыть. Тестируйте каждое приложение отдельно с клавиатуры; приложения слайдеров и обратного отсчёта нуждаются в паузе и не должны ничем мигать. Наложение доступности как приложение не устраняет структурные проблемы и критикуется организациями людей с инвалидностью. При сомнении: удалите приложение.

Оформление заказа: что задаёт Shopify, а что нет

Стандартное оформление заказа Shopify поддерживается Shopify и в значительной степени построено доступно — там у вас мало рычагов. На что вы влияете: расширения оформления и собственные поля (подарочное сообщение, проверка возраста) могут мешать использованию с клавиатуры или программы чтения с экрана, а путь до оформления — корзина, поле промокода, выбор доставки — находится в теме. Протестируйте и эти шаги.

Тестирование и частые вопросы

Быстрый тест: управляйте главной страницей, коллекцией и страницей товара только клавиатурой, увеличьте в браузере до 200%, запустите расширение, например WAVE или axe DevTools. Бесплатное сканирование a11yglass дополнительно проверяет отданный HTML на контраст, альтернативные тексты, подписи, язык и структуру. Нужна ли моему магазину на Shopify декларация доступности? Как правило да — магазин, через который покупают потребители, является электронной коммерцией в смысле BFSG; см. страницу о декларации доступности. Оформление заказа Shopify уже доступно? В значительной степени ответственность Shopify, но расширения могут его сломать. Какая тема доступна? Знака нет — решающим является реализация в конкретном случае.

Чем помогает a11yglass

Бесплатное сканирование проверяет предоставленный HTML и CSS на нарушения WCAG, которые можно распознать автоматически, и называет к каждому выводу критерий успеха и конкретный шаг. Оно находит примерно 20–35 % проблем и не заменяет полной оценки.

Читать дальше

Общая информация по имеющимся знаниям, не юридическая консультация. По отдельному случаю обратитесь в адвокатское бюро, специализирующееся на ИТ-праве.