iiuniversitet.ruЦентр обучения нейросетямОткрыть каталог

Аудит доступности дизайна

Проверяет дизайн или страницу по стандарту WCAG 2.1 AA: контраст, клавиатуру, размер кнопок, экранные читалки; даёт список исправлений.

СкиллAnthropicClaudeApache-2.0Загрузить архив в ClaudeПроверка не требуется
Скачать на русскомОригинал на английском (архив)Источник ↗
Что делает
Проверяет дизайн или страницу по стандарту WCAG 2.1 AA: контраст, клавиатуру, размер кнопок, экранные читалки; даёт список исправлений.
Когда брать
Перед передачей дизайна в разработку или перед запуском страницы, чтобы убедиться, что ею смогут пользоваться все.
Пример запроса
Проверь доступность этой страницы заказа: контраст текста, клавиатура и размер кнопок.
Нужно подключить
Figma, трекер задач

Входит в плагин design. В Cowork и Claude Code можно поставить плагин целиком.

Как включить

  1. Нажмите «Скачать на русском» и сохраните архив.
  2. В Claude откройте Настройки → Capabilities → Skills → Upload skill и выберите архив.
  3. Включите скилл переключателем.
Для терминала

Распакуйте архив и положите папку accessibility-review в ~/.claude/skills/. Файл SKILL.md должен лежать внутри этой папки.

Текст

---
name: accessibility-review
description: Проведи аудит доступности по WCAG 2.1 AA для дизайна или страницы. Запускай по фразам «проверь доступность», «проверь a11y», «это доступно?» или когда перед передачей в разработку нужно проверить дизайн на цветовой контраст, навигацию с клавиатуры, размер областей касания или поведение программ экранного чтения.
argument-hint: "<Figma URL, URL, or description>"
---

/accessibility-review

Если встретишь незнакомые подстановки или нужно проверить, какие инструменты подключены, смотри [CONNECTORS.md](../../CONNECTORS.md).

Проведи аудит дизайна или страницы на соответствие требованиям доступности WCAG 2.1 AA.

Использование

/accessibility-review $ARGUMENTS

Проверь доступность: @$1

Краткий справочник по WCAG 2.1 AA

Воспринимаемость

  • 1.1.1 У нетекстового содержимого есть альтернативный текст
  • 1.3.1 Информация и структура переданы семантически
  • 1.4.3 Коэффициент контрастности >= 4,5:1 (обычный текст), >= 3:1 (крупный текст)
  • 1.4.11 Контраст нетекстовых элементов >= 3:1 (компоненты интерфейса, графика)

Управляемость

  • 2.1.1 Вся функциональность доступна с клавиатуры
  • 2.4.3 Логичный порядок фокуса
  • 2.4.7 Видимый индикатор фокуса
  • 2.5.5 Область касания >= 44x44 CSS-пикселей

Понятность

  • 3.2.1 Предсказуемость при получении фокуса (без неожиданных изменений)
  • 3.3.1 Определение ошибки (опиши ошибку)
  • 3.3.2 Подписи или инструкции к полям ввода

Надёжность

  • 4.1.2 Имя, роль и значение для всех компонентов интерфейса

Частые проблемы

  1. Недостаточный цветовой контраст
  2. Нет подписей у полей форм
  3. Нет доступа к интерактивным элементам с клавиатуры
  4. Нет альтернативного текста у значимых изображений
  5. Ловушки фокуса в модальных окнах
  6. Нет ориентиров ARIA (landmarks)
  7. Автовоспроизводимые медиа без элементов управления
  8. Ограничения по времени без возможности продлить

Подход к проверке

  1. Автоматическое сканирование (выявляет около 30% проблем)
  2. Навигация только с клавиатуры
  3. Проверка программами экранного чтения (VoiceOver, NVDA)
  4. Проверка цветового контраста
  5. Увеличение до 200% — не ломается ли вёрстка?

Результат

## Аудит доступности: [Название дизайна/страницы]
**Стандарт:** WCAG 2.1 AA | **Дата:** [Дата]

### Сводка
**Найдено проблем:** [X] | **Критических:** [X] | **Серьёзных:** [X] | **Незначительных:** [X]

### Находки

#### Воспринимаемость
| № | Проблема | Критерий WCAG | Серьёзность | Рекомендация |
|---|-------|---------------|----------|----------------|
| 1 | [Проблема] | [1.4.3 Контраст] | 🔴 Критическая | [Исправление] |

#### Управляемость
| № | Проблема | Критерий WCAG | Серьёзность | Рекомендация |
|---|-------|---------------|----------|----------------|
| 1 | [Проблема] | [2.1.1 Клавиатура] | 🟡 Серьёзная | [Исправление] |

#### Понятность
| № | Проблема | Критерий WCAG | Серьёзность | Рекомендация |
|---|-------|---------------|----------|----------------|
| 1 | [Проблема] | [3.3.2 Подписи] | 🟢 Незначительная | [Исправление] |

#### Надёжность
| № | Проблема | Критерий WCAG | Серьёзность | Рекомендация |
|---|-------|---------------|----------|----------------|
| 1 | [Проблема] | [4.1.2 Имя, роль, значение] | 🟡 Серьёзная | [Исправление] |

### Проверка цветового контраста
| Элемент | Цвет текста | Цвет фона | Соотношение | Требуется | Проходит? |
|---------|-----------|------------|-------|----------|-------|
| [Основной текст] | [цвет] | [цвет] | [X]:1 | 4,5:1 | ✅/❌ |

### Навигация с клавиатуры
| Элемент | Порядок Tab | Enter/Пробел | Escape | Стрелки |
|---------|-----------|-------------|--------|------------|
| [Элемент] | [Порядок] | [Поведение] | [Поведение] | [Поведение] |

### Программа экранного чтения
| Элемент | Как озвучивается | Проблема |
|---------|-------------|-------|
| [Элемент] | [Что говорит программа] | [Проблема, если есть] |

### Приоритетные исправления
1. **[Критическое исправление]** — затрагивает [кого] и блокирует [что]
2. **[Серьёзное исправление]** — улучшает [что] для [кого]
3. **[Незначительное исправление]** — желательно сделать

Если подключены коннекторы

Если подключён ~~design tool:

  • Проверяй значения цветов, размеры шрифтов и области касания прямо в Figma
  • Проверяй роли ARIA и поведение клавиатуры компонентов в спецификации дизайна

Если подключён ~~project tracker:

  • Создавай тикеты по каждой находке по доступности с указанием серьёзности и критерия WCAG
  • Связывай находки с уже существующими эпиками по устранению проблем доступности

Советы

  1. Начни с контраста и клавиатуры — они выявляют самые частые и самые значимые проблемы.
  2. Проверяй настоящими вспомогательными технологиями — мой аудит — хорошее начало, но ручная проверка в VoiceOver/NVDA находит то, чего я не вижу.
  3. Расставляй приоритеты по влиянию — сначала исправляй то, что мешает пользователям, а доработки оставь на потом.

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/knowledge-work-plugins/tree/main/design/skills/accessibility-review, лицензия Apache-2.0. Изменения: перевод на русский язык.

Оригинал на английском 
---
name: accessibility-review
description: Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.
argument-hint: "<Figma URL, URL, or description>"
---

# /accessibility-review

> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).

Audit a design or page for WCAG 2.1 AA accessibility compliance.

## Usage

```
/accessibility-review $ARGUMENTS
```

Audit for accessibility: @$1

## WCAG 2.1 AA Quick Reference

### Perceivable
- **1.1.1** Non-text content has alt text
- **1.3.1** Info and structure conveyed semantically
- **1.4.3** Contrast ratio >= 4.5:1 (normal text), >= 3:1 (large text)
- **1.4.11** Non-text contrast >= 3:1 (UI components, graphics)

### Operable
- **2.1.1** All functionality available via keyboard
- **2.4.3** Logical focus order
- **2.4.7** Visible focus indicator
- **2.5.5** Touch target >= 44x44 CSS pixels

### Understandable
- **3.2.1** Predictable on focus (no unexpected changes)
- **3.3.1** Error identification (describe the error)
- **3.3.2** Labels or instructions for inputs

### Robust
- **4.1.2** Name, role, value for all UI components

## Common Issues

1. Insufficient color contrast
2. Missing form labels
3. No keyboard access to interactive elements
4. Missing alt text on meaningful images
5. Focus traps in modals
6. Missing ARIA landmarks
7. Auto-playing media without controls
8. Time limits without extension options

## Testing Approach

1. Automated scan (catches ~30% of issues)
2. Keyboard-only navigation
3. Screen reader testing (VoiceOver, NVDA)
4. Color contrast verification
5. Zoom to 200% — does layout break?

## Output

```markdown
## Accessibility Audit: [Design/Page Name]
**Standard:** WCAG 2.1 AA | **Date:** [Date]

### Summary
**Issues found:** [X] | **Critical:** [X] | **Major:** [X] | **Minor:** [X]

### Findings

#### Perceivable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |

#### Operable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |

#### Understandable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |

#### Robust
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |

### Color Contrast Check
| Element | Foreground | Background | Ratio | Required | Pass? |
|---------|-----------|------------|-------|----------|-------|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |

### Keyboard Navigation
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|---------|-----------|-------------|--------|------------|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |

### Screen Reader
| Element | Announced As | Issue |
|---------|-------------|-------|
| [Element] | [What SR says] | [Problem if any] |

### Priority Fixes
1. **[Critical fix]** — Affects [who] and blocks [what]
2. **[Major fix]** — Improves [what] for [who]
3. **[Minor fix]** — Nice to have
```

## If Connectors Available

If **~~design tool** is connected:
- Inspect color values, font sizes, and touch targets directly from Figma
- Check component ARIA roles and keyboard behavior in the design spec

If **~~project tracker** is connected:
- Create tickets for each accessibility finding with severity and WCAG criterion
- Link findings to existing accessibility remediation epics

## Tips

1. **Start with contrast and keyboard** — These catch the most common and impactful issues.
2. **Test with real assistive technology** — My audit is a great start, but manual testing with VoiceOver/NVDA catches things I can't.
3. **Prioritize by impact** — Fix issues that block users first, polish later.

Источник: anthropics/knowledge-work-plugins / design / accessibility-review ↗. Ссылка проверена 2026-10-10.

Похожие