Контрольный список соответствия Shopify ADA (2026 г.)

В Законе об американцах с ограниченными возможностями веб-сайты не упоминаются. Оно было написано в 1990 году, когда у большинства людей не было электронной почты. Но суды последовательно постановляют, что Раздел III ADA, запрещающий дискриминацию в «местах общественного пользования», применяется к магазинам электронной коммерции, и против продавцов Shopify по этому поводу все чаще подаются в суд. Если вы продаете онлайн в США, это не гипотетический риск.

Это контрольный список, который мы используем при проверке доступности магазина Shopify. Это не сделает вас пуленепробиваемым — ничего не делает — но закроет пробелы, которые адвокаты истцов ищут в первую очередь.

Что на самом деле требует ADA (официального стандарта нет)

Вот что сбивает людей с толку: сама ADA не называет технический стандарт для веб-сайтов. Конгресс никогда не обновлял закон об Интернете, а Министерство юстиции заявило, что Раздел III применяется к интернет-магазинам без официального принятия конкретного набора правил.

На практике этот пробел восполняетсяWCAG (Руководство по обеспечению доступности веб-контента) 2.1 или 2.2, уровень AA. Это не закон, но это то, на что снова и снова ссылаются мировые соглашения, инструкции Министерства юстиции и судебные постановления. Если ваш магазин соответствует требованиям WCAG 2.2 AA, вы соответствуете тому, по чему вас будет оценивать каждая сторона в судебном процессе — истец, ответчик и судья.

Прежде чем начать, стоит знать еще две вещи:

• Закон ЕС о доступности теперь подлежит отдельному исполнению(с июня 2025 г.) для предприятий, осуществляющих продажи в ЕС, со своими собственными требованиями, в общих чертах сопоставляемыми с WCAG. Если вы осуществляете доставку европейским клиентам, этот контрольный список охватывает большую часть тех же вопросов.
• Соответствие не является бинарным.Вы не «сдаете» ADA так же, как сдаете экзамен по вождению. Вы уменьшаете свою уязвимость, устраняя реальные барьеры, и продолжаете снижать ее по мере того, как обнаруживаете новые.

Контрольный список Shopify по обеспечению соответствия ADA

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

1. Изображения и медиа

• Каждое изображение продукта имеет описательный альтернативный текст — не «IMG_2481.jpg», не название продукта, повторяющееся без каких-либо полезных деталей, а описание, на основании которого может действовать слепой покупатель («темно-синий шерстяной свитер с круглым вырезом, сложенный, на сером фоне»).
• Декоративные изображения (текстуры фона, разделители) имеют пустые атрибуты alt (alt=""), поэтому программы чтения с экрана пропускают их вместо того, чтобы читать имя файла вслух.
• Любое видео на вашем сайте имеет субтитры. Любая аудиозапись имеет расшифровку.

2. Цвет и контраст

• Основной текст имеет коэффициент контрастности не менее 4,5:1 на фоне; для большого текста (18pt+) требуется соотношение 3:1. Бесплатные инструменты проверки контрастности подтвердят это за считанные секунды по цветовой палитре вашей темы.
• Значки распродаж, ярлыки «распродано» и ошибки в бланках зависят не только от цвета. На красной этикетке «нет в наличии» также должно быть слово «нет в наличии» — пользователи с дальтонизмом не могут отличить красный от зеленого.
• Текст-заполнитель в полях формы — не единственная метка. Текст-заполнитель исчезает после заполнения поля и часто полностью не соответствует требованиям контрастности.

3. Навигация с помощью клавиатуры

• Каждый интерактивный элемент — ссылки навигации, фильтры, «Добавить в корзину», переключатели количества, ящик корзины, поля оформления заказа — доступен и доступен только с помощью клавиш Tab и Enter, без мыши.
• Фокус виден. Когда вы нажимаете Tab на кнопку или ссылку, появляется четкий визуальный контур, показывающий, где вы находитесь. Многие темы убирают это из соображений эстетики.outline: noneи никогда не заменяйте его.
• Модальные окна и ящики корзины корректно улавливают фокус — вкладка переключается внутри открытого модального окна, а не для содержимого страницы, скрытого за ним, — и Escape закрывает их.

4. Формы и оформление заказа

• Каждый вход имеет<label>программно привязаны к нему, а не просто визуально размещены рядом. Программы чтения с экрана объявляют метку, когда поле получает фокус; без связи ничего полезного не сообщают.
• Сообщения об ошибках являются конкретными («Введите действительный почтовый индекс») и объявляются программам чтения с экрана при их появлении, а не просто отображаются красным текстом.
• Работа с кассой начинается с использования клавиатуры и программы чтения с экрана. Это единственный поток, который стоит протестировать с наибольшей ценностью — он также критичен для дохода, поэтому ошибки здесь стоят вам продаж даже до того, как они будут стоить вам судебного иска.

5. Структура и семантика

• Заголовки следуют в логическом порядке (один H1, затем H2, затем H3, вложенные под правый H2) вместо пропуска уровней для визуального размера.
• Существуют ориентирные регионы — заголовок, навигация, основной и нижний колонтитул — поэтому пользователи программ чтения с экрана могут переходить между разделами вместо того, чтобы прослушивать всю страницу сверху вниз.
• Ссылки описывают пункт назначения («Просмотреть политику возврата», а не «нажмите здесь», повторяющееся шесть раз на странице).

6. Сторонние приложения

Это категория, которую большинство продавцов Shopify пропускают. Ваша тема может быть чистой, но виджет обзора, всплывающее окно с предложением, всплывающее окно чата и таймер обратного отсчета, которые вы установили из App Store, часто не таковы — и они загружаются на каждой странице. Аудит каждого установленного приложения индивидуально; одно сломанное всплывающее окно может отменить все остальное.

7. Мобильные сенсорные цели

• Кнопки и ссылки на мобильных устройствах имеют размер не менее 44 × 44 пикселей с достаточным расстоянием, чтобы пользователь с ограниченной мелкой моторикой не нажал не ту кнопку.

Как протестировать свой магазин

Ручная проверка выявляет то, что упускают автоматизированные инструменты, а автоматизированные инструменты выявляют то, что упускает ручная проверка. Используйте оба:

1. Сначала запустите автоматическое сканирование.Нашбесплатный инструмент AccessScanпроверяет вашу домашнюю страницу, страницу продукта и корзину на соответствие правилам WCAG 2.2 A/AA с использованием axe-core и помечает проблемы с ранжированием серьезности примерно за минуту. Это действительно полезная отправная точка, но автоматическое тестирование обычно выявляет только 30–40% реальных препятствий, поэтому рассматривайте чистое сканирование как этап, а не финишную черту.
2. Навигация по сайту осуществляется с помощью только клавиатуры.Отключите мышь от сети на десять минут и попробуйте что-нибудь купить.
3. Выборочная проверка с помощью программы чтения с экрана.VoiceOver поставляется бесплатно на всех Mac и iPhone; NVDA бесплатна для Windows. Вам не обязательно свободно говорить: пять минут на главной странице и оформление заказа быстро выявят очевидные проблемы.
4. Повторяйте тестирование после каждого обновления темы или приложения.Доступность — это не разовый проект. Обновление темы или новое приложение могут незаметно вернуть уже исправленные вами проблемы.

Быстрое предупреждение о виджетах специальных возможностей

В Shopify App Store вы увидите приложения, обещающие мгновенное соответствие ADA посредством установки одного сценария — обычно это небольшой значок специальных возможностей в углу вашего сайта с меню настроек отображения. Это так называемые виджеты-наложения, и они не могут надежно предотвратить судебные иски. Мы написали полную разбивкупочему виджеты наложения специальных возможностей не работают так, как их продают— стоит прочитать перед установкой вместо выполнения контрольного списка выше.

Сколько на самом деле стоит ремонт

Это полностью зависит от того, насколько далеко в данный момент находится ваш магазин. Магазину с чистой, современной темой и несколькими плохо работающими приложениями может потребоваться несколько дней сосредоточенного времени разработчика — маркировка форм, исправление контрастности, аудит приложений. Магазин, построенный на старой, сильно настроенной теме с десятками пробелов в доступности, встроенных в собственный код Liquid, — это более крупный проект, близкий к частичной перестройке темы.

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

Часто задаваемые вопросы

Соответствует ли Shopify ADA по умолчанию?

По умолчанию ни одна платформа не является «совместимой с ADA», включая Shopify. Оформление заказа и основной администратор Shopify проделали работу по обеспечению специальных возможностей, но ваша тема, ваш контент и каждое устанавливаемое вами приложение — это ваша ответственность. Тема Shopify по умолчанию по-прежнему требует применения приведенного выше контрольного списка к вашему конкретному магазину.

Гарантирует ли соблюдение WCAG 2.2 AA, что мне не предъявят иск?

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

Нужна ли мне страница с заявлением о доступности?

Это не требуется по закону, но это хорошая практика. Короткая страница с указанием вашей приверженности обеспечению доступности, перечислением стандартов, на которые вы ориентируетесь (WCAG 2.2 AA), и указанием способа связи для сообщения о препятствиях свидетельствует о добросовестности и дает пользователям возможность использовать другой канал, кроме судебного иска.

Как часто мне следует перепроверять доступность?

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

Будет ли устранение проблем с доступностью замедлять работу моего магазина?

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