WCAG тестер: бесплатная проверка по WCAG 2.2 AA

WCAG тестер открывает веб-страницу и проверяет её код по Web Content Accessibility Guidelines — международному руководству по доступности веб-контента для людей с инвалидностью. Введите выше адрес одной страницы: мы откроем её в настоящем браузере, запустим автоматические проверки WCAG 2.2 уровней A и AA и покажем каждую найденную ошибку вместе с критерием, к которому она относится, и подсказкой, как её исправить. Это бесплатно, без регистрации и занимает примерно минуту. Это автоматическая проверка, а не полный аудит, и не юридическая консультация.

Что вы увидите в результате

Результат — это список проблем, найденных на странице, начиная с самых серьёзных. Для каждой проблемы есть:

• объяснение простым языком: что она значит для ваших посетителей;
• элемент на странице (селектор, фрагмент кода и, где возможно, скриншот);
• как её исправить, с советами для Shopify, WooCommerce, PrestaShop и Shoptet;
• ссылка на карточку правила с критерием успеха WCAG и пунктом EN 301 549.

Результат показывается на языке этой страницы, так что его можно переслать владельцу магазина или клиенту, который не читает по-английски.

Что проверяет WCAG тестер

Тестер запускает axe-core — открытую библиотеку правил от Deque Systems, на которой построено большинство инструментов проверки доступности, — и сопоставляет каждую находку с карточкой из нашей библиотеки правил. Типичные находки: изображения без альтернативного текста (1.1.1), текст со слишком низким контрастом (1.4.3), ссылки и кнопки без доступного имени (2.4.4 и 4.1.2), поля формы без подписи, не указанный язык страницы (3.1.1) и слишком маленькие области нажатия (2.5.8).

В таблице ниже — все 55 критериев успеха WCAG 2.2 уровней A и AA и наши автоматические правила, которые проверяют часть каждого из них. Критерий, к которому привязаны правила, автоматизирован лишь частично: правила ловят типичные ошибки, но не могут оценить всё, чего требует критерий.

Для 22 из 55 критериев успеха WCAG 2.2 уровней A и AA в нашей библиотеке есть хотя бы одна автоматическая проверка. Остальные отмечены «ручная проверка»: их должен проверить человек.

Чего не найдёт ни один автоматический тест

Исследования по-разному оценивают, какую долю проблем доступности находит автоматика (тест GOV.UK, исследование Deque), но сходятся в одном: далеко не все. Машина видит, что у изображения есть альтернативный текст, но не может понять, имеет ли он смысл. Она видит стиль фокуса, но не может оценить, логичен ли порядок фокуса.

После автоматической проверки проверьте вручную:

1. Клавиатура: до каждой ссылки, кнопки и поля можно дойти клавишей Tab, нажать их клавишей Enter или пробелом и нигде не застрять (2.1.1, 2.1.2, 2.4.3, 2.4.7).
2. Масштаб и перекомпоновка: увеличьте страницу до 200 % и 400 %; ничего не должно обрезаться или требовать горизонтальной прокрутки (1.4.4, 1.4.10).
3. Экранный диктор: прослушайте страницу в NVDA, VoiceOver или TalkBack; заголовки, кнопки и сообщения об ошибках в формах должны быть понятны (1.3.1, 3.3.1, 4.1.3).
4. Формы и оформление заказа: ошибитесь намеренно; сообщение об ошибке должно говорить, что не так и как это исправить (3.3.1, 3.3.3).
5. Медиа: у видео нужны субтитры, и ничего не должно само воспроизводить звук (1.2.2, 1.4.2).

Наш чек-лист WCAG 2.2 подробно разбирает каждый из этих шагов для интернет-магазинов.

Что нового в WCAG 2.2

В WCAG 2.2 появилось шесть новых критериев успеха уровней A и AA — среди них 2.4.11 «Фокус не скрыт», 2.5.7 «Перетаскивание», 2.5.8 «Размер цели» и 3.3.8 «Доступная аутентификация», — а критерий 4.1.1 «Синтаксический анализ» исключён. Из новых критериев наши автоматические правила проверяют только 2.5.8 «Размер цели»; для остальных нужен человек. Подробнее — в статье про EN 301 549 V4.1.1 и WCAG 2.2.

Чем он отличается от WAVE, Lighthouse и axe DevTools

Это хорошие инструменты, а Lighthouse и axe DevTools работают на том же движке axe-core. Разница в том, что происходит после проверки:

• результат объясняет каждую проблему владельцу бизнеса, а не только разработчику;
• он доступен на семи языках;
• каждое правило сопоставлено с EN 301 549 — европейским стандартом, на который опираются законы о доступности;
• с подпиской те же проверки проходят по каждой странице сайта каждую неделю, и вы видите, что изменилось.

Для проверки прямо в браузере, за логином или на тестовой версии сайта используйте наше расширение для браузера (Chrome, Edge, Firefox). Для WordPress и WooCommerce есть плагин WordPress, который показывает проблемы рядом с каждой страницей и каждым товаром.

WCAG, EN 301 549 и закон

Сам по себе WCAG не закон, но законы на него ссылаются. В Европейском союзе Европейский акт о доступности (EAA) опирается на гармонизированный стандарт EN 301 549, раздел которого о веб-контенте перенимает критерии успеха WCAG уровня AA. Акт вводят в действие национальные законы: BFSG в Германии, закон о доступности продуктов и услуг в Польше, закон № 424/2023 Sb. в Чехии и закон 232/2022 в Румынии. В США обычным ориентиром в рамках ADA служит WCAG 2.1 или 2.2 уровня AA.

Акт распространяется только на услуги для потребителей (B2C) в определённых секторах и не касается микропредприятий. Прежде чем беспокоиться о законе, проверьте, касается ли он вас. Результат тестера — не заявление о соответствии, но он пригодится как исходные данные для раздела об известных ограничениях в вашем заявлении о доступности.

Проверяйте каждую страницу каждую неделю

Одна страница — это только выборка. Проблемы обычно повторяются в шаблонах — карточки товаров, корзина, оформление заказа — и возвращаются после обновлений темы. С подпиской Pandus каждую неделю проверяет все страницы вашего сайта, присылает понятный отчёт и сообщает, когда появляются новые проблемы. Веб-студии получают отчёты под своим брендом.

Частые вопросы

Что такое WCAG тестер?

Инструмент, который открывает веб-страницу и проверяет её код по критериям успеха WCAG. Он находит проблемы, которые машина может надёжно обнаружить: отсутствующий альтернативный текст, низкий контраст, кнопки без названия.

Тестер бесплатный? Нужно ли регистрироваться?

Да, он бесплатный, и регистрация не нужна. Email указывать не обязательно. Чтобы защититься от злоупотреблений, число проверок в час ограничено, а результат для одного и того же адреса хранится 24 часа. Проверяйте только сайты, на которые у вас есть право: свой сайт или сайт клиента с его согласия.

Тестер проверяет по WCAG 2.2 или WCAG 2.1?

По WCAG 2.2 уровней A и AA. WCAG 2.2 включает все критерии версии 2.1, кроме исключённого 4.1.1 «Синтаксический анализ».

Может ли автоматический тестер подтвердить соответствие WCAG?

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

Какой уровень нужен: A, AA или AAA?

Уровень AA — на него опираются EN 301 549, Европейский акт о доступности и национальные законы. AAA строже, и эти законы его не требуют. Если вам нужно проверить только цвета, воспользуйтесь проверкой контраста.

Это официальный валидатор W3C?

Нет. У W3C нет официального валидатора WCAG. Наш тестер построен на axe-core и собственных карточках правил. Если у вас интернет-магазин и вам важнее покупатели, чем номера критериев, начните с бесплатной проверки доступности сайта: это та же проверка, но результат объяснён для владельцев бизнеса.