Accessibility Inspector выполняет автоматическую проверку соответствия WCAG 2.1 Level AA на любой веб-странице и формирует категоризированный отчёт о проблемах доступности. Выявляйте недостаточный contrast ratio, отсутствие alt text у изображений, неправильное использование ARIA role и атрибутов, незаполненные метки форм, проблемы с keyboard navigation и отсутствующие landmark-регионы — с подсветкой каждого элемента одним кликом.
Веб-доступность — не опция, а юридическое требование во многих странах, и она жизненно важна для 15% мирового населения, живущего с ограниченными возможностями. Тем не менее проблемы доступности остаются невидимыми при обычной разработке и тестировании. Кнопка может выглядеть нормально, но быть полностью недоступна для screen reader, потому что это стилизованный div без атрибута role. Текст может хорошо читаться для вас, но нарушать требования к contrast ratio для пользователей со слабым зрением. Accessibility Inspector автоматически обнаруживает такие скрытые проблемы. Он проверяет десятки критериев WCAG 2.1 Level AA, включая contrast ratio (минимум 4.5:1 для обычного текста, 3:1 для крупного), отсутствие alt text у изображений, незаполненные метки у полей форм, неправильное использование ARIA role и атрибутов, отсутствие landmark-структуры документа (nav, main, footer) и индикаторов фокуса клавиатуры. Каждая проблема содержит затронутый элемент, конкретный нарушенный критерий WCAG и рекомендацию по исправлению. Нажмите на любую проблему, чтобы подсветить элемент на странице.
Выполняет автоматические проверки по критериям успеха WCAG 2.1 Level AA, включая категории воспринимаемости, управляемости, понятности и надёжности. Для каждой проверки отображается конкретный критерий (например, 1.4.3 Contrast, 1.1.1 Non-text Content) и статус «пройдено/не пройдено».
Вычисляет contrast ratio между цветом текста и цветом фона для каждого текстового элемента на странице. Отмечает элементы с показателем ниже 4.5:1 для обычного текста или 3:1 для крупного текста (18px+ или 14px+ полужирный). Показывает фактическое соотношение и минимально необходимое.
Сканирует каждый элемент img, svg и элементы с image role. Отмечает отсутствующие атрибуты alt, пустой alt у декоративных изображений и чрезмерно общий alt text («image», «photo»). Предлагает, нужен ли каждому изображению описательный alt, пустой alt (декоративный) или role="presentation".
Проверяет неправильное использование ARIA role (role на неподходящих элементах), отсутствие обязательных атрибутов ARIA (например, aria-label на кнопках с иконками), дублирующиеся ID, на которые ссылается aria-labelledby, и отсутствие landmark-регионов (нет main, нет nav). Рекомендует семантические HTML-альтернативы.
Убеждается, что каждое поле формы (text, email, password, checkbox, select) имеет связанную метку — через элемент label с соответствующими атрибутами for/id, aria-label или aria-labelledby. Поля без меток недоступны для screen reader.
Проблемы разделены на Ошибки (необходимо исправить — блокируют доступ), Предупреждения (желательно исправить — потенциальные барьеры) и Пройденные (подтверждённая доступность). Количество ошибок отображается на видном месте. Нажмите на любую проблему, чтобы подсветить затронутый элемент на странице.
Перед запуском новой страницы или функции запустите Accessibility Inspector, чтобы выявить проблемы на раннем этапе. Отсутствие alt text, незаполненные поля форм и нарушения контраста легко исправить в процессе разработки, но дорого устранять в продакшене.
Многие страны требуют соответствия WCAG 2.1 Level AA (ADA в США, EAA в ЕС). Запустите инспектор на своих публичных страницах, чтобы выявить пробелы в соответствии до того, как они станут юридическими рисками.
Включите проверку доступности в процесс QA. После визуального и функционального тестирования запустите Accessibility Inspector, чтобы убедиться, что реализация не вносит регрессий в доступность.
Запустите инспектор на текущем сайте во время командной встречи, чтобы показать реальные проблемы доступности. Визуальная подсветка и чёткие объяснения помогают разработчикам понять, как выглядит доступная разметка и почему это важно.
Проверяйте страницы со сторонними виджетами, встроенным контентом или пользовательским HTML. Эти источники часто вносят проблемы доступности (отсутствие alt text, нарушения контраста), за которые вы как владелец страницы всё равно несёте ответственность.
Откройте плавающую панель DevSuite Pro и нажмите иконку Accessibility Inspector. Инструмент сканирует DOM страницы на наличие проблем доступности.
Отображается категоризированный отчёт с Ошибками (красный), Предупреждениями (жёлтый) и Пройденными (зелёный). Каждый раздел содержит конкретные проблемы с указанием затронутых элементов и ссылками на критерии WCAG.
Нажмите на любую проблему, чтобы подсветить затронутый элемент на странице цветной рамкой и прокрутить до него. Связь между отчётом и элементом DOM устанавливается мгновенно.
Каждая проблема содержит конкретную рекомендацию: «Добавьте alt text с описанием содержимого изображения», «Увеличьте contrast ratio цвета шрифта до минимум 4.5:1», «Добавьте элемент label с атрибутом for='email'».
Внесите изменения в код, перезагрузите страницу и запустите аудит снова. Количество ошибок должно уменьшаться по мере устранения проблем. Стремитесь к нулевому количеству ошибок.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
