Супервозможность тестирования доступности

---
name: accessibility-testing-superpower
description: |
  Выполняет аудит соответствия WCAG и исправление доступности веб-приложений.
  Используй при: 1) Аудите интерфейса на соответствие WCAG 2.1/2.2 2) Исправлении проблем экранного диктора или клавиатурной навигации 3) Правильной реализации шаблонов ARIA 4) Проверке цветового контраста и визуальной доступности 5) Создании доступных форм или интерактивных компонентов
---

# Процесс тестирования доступности

## Конфигурация

- **Уровень WCAG**: ${wcag_level:AA}
- **Проверяемый компонент**: ${component_name:Page}
- **Стандарт соответствия**: ${compliance_standard:WCAG 2.1}
- **Минимальный балл Lighthouse**: ${lighthouse_score:90}
- **Основной экранный диктор**: ${screen_reader:NVDA}
- **Тестовый фреймворк**: ${test_framework:jest-axe}

## Дерево решений аудита

```
Получен запрос по доступности
|
+-- Новый компонент / страница?
|   +-- Сначала автоматическое сканирование: axe-core, Lighthouse
|   +-- Проверка клавиатурной навигации
|   +-- Проверка объявлений экранного диктора
|   +-- Проверка цветового контраста
|
+-- Нужно исправить существующее нарушение?
|   +-- Определи критерий успешности WCAG
|   +-- Проверь, решает ли проблему семантический HTML
|   +-- Применяй ARIA, только когда HTML недостаточно
|   +-- Проверь исправление с помощью вспомогательной технологии
|
+-- Аудит соответствия?
    +-- Автоматическое сканирование: обнаруживает примерно 30% проблем
    +-- Список ручных проверок
    +-- Документирование нарушений по серьёзности
    +-- Создание плана исправления
```

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

### Классификация серьёзности

| Серьёзность | Влияние | Примеры | Срок исправления |
|----------|--------|----------|--------------|
| Критическая | Полностью блокирует доступ | Нет клавиатурного фокуса, пустые кнопки, нет alt у функциональных изображений | Немедленно |
| Серьёзная | Значительные барьеры | Плохой контраст, нет подписей формы, нет ссылок пропуска блоков | В течение спринта |
| Умеренная | Использование затруднено, но возможно | Непоследовательная навигация, неясные сообщения об ошибках | Следующий выпуск |
| Незначительная | Неудобство | Избыточный альтернативный текст, небольшие проблемы порядка заголовков | Бэклог |

### Частые нарушения и исправления

**Отсутствует доступное имя**
```html
<!-- Violation -->
<button><svg>...</svg></button>

<!-- Fix: aria-label -->
<button aria-label="Close dialog"><svg>...</svg></button>

<!-- Fix: visually hidden text -->
<button><span class="sr-only">Close dialog</span><svg>...</svg></button>
```

**Связь подписи с полем формы**
```html
<!-- Violation -->
<label>Email</label>
<input type="email">

<!-- Fix: explicit association -->
<label for="email">Email</label>
<input type="email" id="email">

<!-- Fix: implicit association -->
<label>Email <input type="email"></label>
```

**Нарушение цветового контраста**
```
Минимальные соотношения (WCAG ${wcag_level:AA}):
- Обычный текст (<${large_text_size:18}px или <${bold_text_size:14}px полужирный): ${contrast_ratio_normal:4.5}:1
- Крупный текст (>=${large_text_size:18}px или >=${bold_text_size:14}px полужирный): ${contrast_ratio_large:3}:1
- Компоненты интерфейса и графика: 3:1

Инструменты: WebAIM Contrast Checker, DevTools браузера
```

**Видимость фокуса**
```css
/* Never do this without alternative */
:focus { outline: none; }

/* Proper custom focus */
:focus-visible {
  outline: ${focus_outline_width:2}px solid ${focus_outline_color:#005fcc};
  outline-offset: ${focus_outline_offset:2}px;
}
```

## Система принятия решений ARIA

```
Нужно передать информацию вспомогательной технологии?
|
+-- Может ли это сделать семантический HTML?
|   +-- ДА: используй HTML (<button>, <nav>, <main>, <article>)
|   +-- НЕТ: переходи к ARIA
|
+-- Какой тип ARIA нужен?
    +-- Роль: ЧТО это за элемент? (role="dialog", role="tab")
    +-- Состояние: в каком состоянии? (aria-expanded, aria-checked)
    +-- Свойство: какая связь? (aria-labelledby, aria-describedby)
    +-- Живая область: динамическое содержимое? (aria-live="${aria_live_mode:polite}")
```

### Шаблоны ARIA для распространённых виджетов

**Раскрытие: показать / скрыть**
```html
<button aria-expanded="false" aria-controls="content-1">
  Show details
</button>
<div id="content-1" hidden>
  Content here
</div>
```

**Интерфейс вкладок**
```html
<div role="tablist" aria-label="${component_name:Settings}">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    General
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
    Privacy
  </button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</div>
```

**Модальный диалог**
```html
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm action</h2>
  <p>Are you sure you want to proceed?</p>
  <button>Cancel</button>
  <button>Confirm</button>
</div>
```

## Список проверки клавиатурной навигации

```
[ ] Все интерактивные элементы могут получать фокус через Tab.
[ ] Порядок фокуса соответствует визуальному / логическому порядку.
[ ] Фокус виден на всех элементах.
[ ] Нет клавиатурных ловушек: всегда можно выйти через Tab.
[ ] Ссылка пропуска блоков — первый элемент, доступный для фокусировки.
[ ] Escape закрывает модальные окна / раскрывающиеся списки.
[ ] Стрелки обеспечивают навигацию внутри виджетов: вкладок, меню, сеток.
[ ] Enter / пробел активируют кнопки и ссылки.
[ ] Пользовательские сочетания клавиш задокументированы и настраиваемы.
```

### Шаблоны управления фокусом

**Удержание фокуса в модальном окне**
```javascript
// On modal open:
// 1. Save previously focused element
// 2. Move focus to first focusable in modal
// 3. Trap Tab within modal boundaries

// On modal close:
// 1. Return focus to saved element
```

**Динамическое содержимое**
```javascript
// After adding content:
// - Announce via aria-live region, OR
// - Move focus to new content heading

// After removing content:
// - Move focus to logical next element
// - Never leave focus on removed element
```

## Тестирование экранным диктором

### Проверка объявлений

| Элемент | Что должно произноситься |
|---------|-----------------|
| Кнопка | Роль + имя + состояние: «Кнопка Отправить» |
| Ссылка | Имя + «ссылка»: «Ссылка Главная страница» |
| Изображение | Альтернативный текст ИЛИ «декоративное» — пропустить |
| Заголовок | Уровень + текст: «Заголовок уровня 2, О нас» |
| Поле формы | Подпись + тип + состояние + инструкции |
| Ошибка | Сообщение об ошибке + связь с полем |

### Команды тестирования: краткий справочник

**VoiceOver (macOS)**
- VO = Ctrl + Option
- VO + A: прочитать всё.
- VO + Right/Left: перемещение по элементам.
- VO + Cmd + H: следующий заголовок.
- VO + Cmd + J: следующий элемент управления формы.

**${screen_reader:NVDA} (Windows)**
- NVDA + Down: прочитать всё.
- Tab: следующий элемент, доступный для фокусировки.
- H: следующий заголовок.
- F: следующее поле формы.
- B: следующая кнопка.

## Интеграция автоматического тестирования

### axe-core в тестах
```javascript
// ${test_framework:jest-axe}
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('${component_name:component} is accessible', async () => {
  const { container } = render(<${component_name:MyComponent} />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});
```

### Порог Lighthouse CI
```javascript
// lighthouserc.js
module.exports = {
  assertions: {
    'categories:accessibility': ['error', { minScore: ${lighthouse_score:90} / 100 }],
  },
};
```

## Матрица приоритетов исправления

```
Влияние и трудозатраты:
                       Мало усилий       Много усилий
Высокое влияние  | СДЕЛАТЬ СНАЧАЛА  | ПЛАНИРОВАТЬ ДАЛЕЕ   |
                 | альтернативный  | редизайн             |
                 | текст, подписи  | переделка навигации  |
-----------------|-----------------|----------------------|
Низкое влияние   | БЫСТРЫЙ РЕЗУЛЬТАТ| БЭКЛОГ               |
                 | контраст        | желательные функции  |
                 | мелкие правки   | улучшения            |
```

## Проверочный список верификации

Прежде чем отметить работу над доступностью как завершённую:

```
Автоматическое тестирование:
[ ] axe-core сообщает об отсутствии нарушений.
[ ] Доступность Lighthouse >= ${lighthouse_score:90}.
[ ] Валидация HTML проходит: влияет на разбор вспомогательными технологиями.

Проверка клавиатуры:
[ ] Полное выполнение задач без мыши.
[ ] Фокус виден постоянно.
[ ] Логичный порядок Tab.
[ ] Нет ловушек.

Проверка экранного диктора:
[ ] Проверено хотя бы с одним экранным диктором: ${screen_reader:NVDA}.
[ ] Всё содержимое объявляется корректно.
[ ] У интерактивных элементов есть роли / состояния.
[ ] Динамические обновления объявляются.

Визуальное тестирование:
[ ] Соотношения контраста проверены: минимум ${contrast_ratio_normal:4.5}:1.
[ ] Работа при масштабе ${zoom_level:200}%.
[ ] Никакая информация не передаётся только цветом.
[ ] Учитывается prefers-reduced-motion.
```