плагин

a11y-audit — плагин для Claude Code: аудит доступности WCAG 2.2

Q: Как установить a11y-audit в Claude?

Сначала добавьте маркетплейс: `/plugin marketplace add alirezarezvani/claude-skills`. Затем поставьте плагин: `/plugin install a11y-audit@claude-code-skills`.

Ищет и правит нарушения доступности WCAG 2.2 во фронтенд-проектах: React, Next.js, Vue, Angular, Svelte и обычном HTML.

Установить в Claude Code · Через маркетплейс плагинов Все способы и платформы ↓

/plugin marketplace add alirezarezvani/claude-skills
/plugin install a11y-audit@claude-code-skills

Открыть на GitHub

Что делает a11y-audit

Плагин запускает статический сканер по исходникам и находит больше 20 типов нарушений: картинки без alt, поля без меток, пропущенные уровни заголовков, пустые ссылки, tabindex больше нуля, некорректные ARIA-атрибуты. Отдельный скрипт считает контраст пары цветов и проверяет его по порогам AA и AAA. У режима --suggest он подбирает более тёмный или светлый вариант.

Внутри два скрипта на Python: scripts/a11y_scanner.py и scripts/contrast_checker.py. Оба работают на стандартной библиотеке, ставить через pip ничего не нужно. Коды возврата рассчитаны на CI: 0 — чисто, 1 — есть блокирующие замечания. Есть справочники по критериям WCAG 2.2 уровня A и AA, паттернам ARIA и способам правки под конкретные фреймворки.

Слэш-команда /a11y-audit принимает путь к папке. Если в проекте нет Python 3, скрипты не запустятся — это первое, что стоит проверить перед установкой.

Какие задачи решает

найти картинки без alt и пустые ссылки по всему проекту
посчитать контраст текста и фона и подобрать подходящий цвет
проверить разметку на пропущенные уровни заголовков и отсутствие main
поймать ARIA-атрибуты, которые ломают навигацию с клавиатуры
встроить проверку доступности в CI с понятным кодом возврата

Примеры запросов агенту

/a11y-audit ./src
прогони сканер доступности по папке components и покажи блокирующие замечания
проверь контраст #1a1a2e и #ffffff и предложи вариант под AA

Как установить a11y-audit

Через маркетплейс плагинов

/plugin marketplace add alirezarezvani/claude-skills

/plugin install a11y-audit@claude-code-skills

По шагам, с командами для каждой платформы: Плагины Claude Code: маркетплейсы, установка и как собрать свой

Вопросы о a11y-audit

Как установить a11y-audit в Claude?

Сначала добавьте маркетплейс: /plugin marketplace add alirezarezvani/claude-skills. Затем поставьте плагин: /plugin install a11y-audit@claude-code-skills.

Что делает a11y-audit?

Сканирует HTML, JSX, TSX, Vue, Svelte и CSS на нарушения WCAG 2.2 и подсказывает правки под конкретный фреймворк. Отдельно считает контраст цветов.

Нужно ли что-то доустанавливать для работы плагина?

Скрипты написаны на стандартной библиотеке Python, pip-пакеты не требуются. Но Python 3 в системе должен быть.

Исходный текст

a11y-audit · MIT

# A11y Audit — WCAG 2.2 Accessibility Audit & Fix

Audit and fix WCAG 2.2 accessibility issues in any frontend project. Covers React, Next.js, Vue, Angular, Svelte, and plain HTML.

## Quick Start

```bash
# Scan a project
/a11y-audit ./src

# Or use the scripts directly
python3 scripts/a11y_scanner.py ./src
python3 scripts/contrast_checker.py "#1a1a2e" "#ffffff"
```

## Scripts

| Script | Purpose |
|--------|---------|
| `a11y_scanner.py` | Scan HTML/JSX/TSX/Vue/Svelte/CSS for 20+ a11y violations |
| `contrast_checker.py` | WCAG contrast ratio calculator with AA/AAA checks and `--suggest` mode |

Both are stdlib-only — no pip install needed. CI-friendly exit codes (0 = pass, 1 = blocking issues).

## What It Covers

- **Images**: missing alt, empty alt on informative images
- **Forms**: missing labels, orphan labels, missing fieldset/legend
- **Headings**: skipped levels, missing h1, multiple h1s
- **Landmarks**: missing main/nav/skip link
- **Keyboard**: tabindex > 0, click without keyboard handler
- **ARIA**: invalid attributes, aria-hidden on focusable, missing aria-live
- **Color**: contrast ratios below AA thresholds
- **Links**: empty links, "click here" text
- **Tables**: missing headers, missing caption
- **Media**: missing captions, autoplay without controls

## References

- `references/wcag-quick-ref.md` — WCAG 2.2 Level A/AA criteria table
- `references/aria-patterns.md` — ARIA roles, live regions, keyboard patterns
- `references/framework-a11y-patterns.md` — React, Vue, Angular, Svelte fix patterns

## License

MIT

Из того же набора394

Весь набор →