Перейти к руководству
Accessibility Auditавтор Alireza Rezvani

Accessibility Audit Skill.

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

  • Доступность
  • Дизайн-ревью
  • Фронтенд
Проверка исходного кода · Accessibility AuditSKILL.md
Задача Доступность Результат • Отчёт о проблемах доступности, ранжированных по серьёзности • Примеры кода «до и после», подходящие для фреймворка проекта • Сравнение с первоначальными находками и список оставшихся ручных проверок Перед началом Нужны Python для входящих в набор инструментов, доступ к исходному коду и браузер или вспомогательные технологии для проверки в контексте.
Редакционное резюме · проверенная версия источника 2026-10-07 · не сгенерированный пример

01 Возможности

Превращайте результаты проверки доступности в проверяемые исправления

Процесс «сканирование — исправление — проверка» для доступности с утилитами на Python, справочниками по фреймворкам и шаблонами отчётов.

Процесс на основе источникаНе бенчмарк выполнения

Принцип работы

A11y Audit разбивает работу над доступностью на этапы сканирования, исправления и проверки. В источнике есть интерфейсы сканера на Python и проверки контрастности, категории серьёзности и справочники по исправлениям для конкретных фреймворков. Он помогает превратить расплывчатую просьбу улучшить доступность в ограниченный список элементов и изменений кода.

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

Ожидаемые результаты

  • Отчёт о проблемах доступности, ранжированных по серьёзности
  • Примеры кода «до и после», подходящие для фреймворка проекта
  • Сравнение с первоначальными находками и список оставшихся ручных проверок
Посмотреть пример запроса

От запроса до проверки

  1. 01
    Сканируйте чётко заданную область

    Определите фреймворк и нужные пути к исходному коду. Фиксируйте находки на уровне элементов и отделяйте обнаруженное сканером от ручных наблюдений.

  2. 02
    Исправляйте само взаимодействие

    Отдавайте предпочтение нативным элементам управления, осмысленным меткам и видимому фокусу, а не беспорядочному добавлению атрибутов ARIA.

  3. 03
    Проверяйте в контексте

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

02 Когда использовать

Когда использовать

Нужны Python для входящих в набор инструментов, доступ к исходному коду и браузер или вспомогательные технологии для проверки в контексте.

Хорошо подходит

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

Ограничения, которые нужно учесть

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

Что подготовить

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

03 Важные решения

Важные решения

  1. Исправления остаются прослеживаемыми

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

  2. У автоматизации есть предел

    Полезный отчёт указывает, что было просканировано, что проверено вручную и что осталось непроверенным.

04 Пример задания

Попробуйте узкий запрос

Приведённый ниже пример запроса не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

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

Исходный файл в апстриме
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/engineering-team/a11y-audit/skills/a11y-audit/SKILL.md

Нужны Python для входящих в набор инструментов, доступ к исходному коду и браузер или вспомогательные технологии для проверки в контексте.

Начните с одного результата

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

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

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

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

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Эта запись не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

05 Источник и лицензия

Источник и лицензия

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

Владелец источника
Alireza Rezvani
Репозиторий
alirezarezvani/claude-skills
Лицензия
MIT
Проверенный снимок
2026-10-07 · 19392f7a0826
Редакционное резюме источника
Процесс «сканирование — исправление — проверка» для доступности с утилитами на Python, справочниками по фреймворкам и шаблонами отчётов.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не данные об использовании навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Может ли сканер доказать соответствие WCAG?

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

Поддерживается ли только React?

В источнике есть шаблоны для нескольких веб-фреймворков и обычного HTML. Проверьте, как сканер и справочники поддерживают версию вашего проекта.

Нужно ли назначать ARIA-роль каждому кликабельному элементу?

Не автоматически. Источник, как правило, отдаёт предпочтение нативным семантическим элементам, которые обеспечивают поведение, недостижимое одной лишь ARIA-ролью.

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Исходный файл в апстриме
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/engineering-team/a11y-audit/skills/a11y-audit/SKILL.md