Промпт для аудиту веб-доступності та відповідності WCAG

---
назва: accessibility-testing-superpower
опис: |
  Виконує аудит відповідності WCAG та усунення проблем доступності для веб-додатків.
  Використовуйте коли: 1) Аудит UI на відповідність WCAG 2.1/2.2 2) Виправлення проблем зі скрінрідерами або навігацією клавіатурою 3) Коректне впровадження паттернів ARIA 4) Огляд колірного контрасту та візуальної доступності 5) Створення доступних форм або інтерактивних компонентів
---

# Робочий процес тестування доступності (Accessibility)

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

- **Рівень 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

### Класифікація критичності

| Критичність | Вплив | Приклади | Термін виправлення |
|----------|--------|----------|--------------|
| Critical | Повністю блокує доступ | Відсутній фокус клавіатури, порожні кнопки, немає alt для функціональних зображень | Негайно |
| Serious | Серйозні бар'єри | Поганий конраст, відсутні лейбли форм, немає skip-лінків | Протягом спринту |
| Moderate | Складно, але можливо користуватися | Непослідовна навігація, незрозумілі повідомлення про помилки | Наступний реліз |
| Minor | Незручність | Зайвий alt-текст, незначні проблеми з порядком заголовків | Беклог |

### Типові порушення та виправлення

**Відсутність доступного імені (accessible name)**
```html
<!-- Порушення -->
<button>...</button>

<!-- Виправлення: aria-label -->
<button aria-label="Закрити діалог">...</button>

<!-- Виправлення: візуально прихований текст -->
<button><span class="sr-only">Закрити діалог</span>...</button>
```

**Зв'язок лейбла форми**
```html
<!-- Порушення -->
<label>Email</label>


<!-- Виправлення: явний зв'язок -->
<label for="email">Email</label>


<!-- Виправлення: неявний зв'язок -->
<label>Email </label>
```

**Помилка контрастності кольорів**
```
Мінімальні коефіцієнти (WCAG ${wcag_level:AA}):
- Звичайний текст (<${large_text_size:18}px або =${large_text_size:18}px або >=${bold_text_size:14}px жирний): ${contrast_ratio_large:3}:1
- UI компоненти та графіка: 3:1

Інструменти: WebAIM Contrast Checker, browser DevTools
```

**Видимість фокусу**
```css
/* Ніколи не робіть так без альтернативи */
:focus { outline: none; }

/* Правильний кастомний фокус */
:focus-visible {
  outline: ${focus_outline_width:2}px solid ${focus_outline_color:#005fcc};
  outline-offset: ${focus_outline_offset:2}px;
}
```

## ARIA Decision Framework

```
Потрібно передати інформацію асистивним технологіям?
|
+-- Чи може це зробити семантичний HTML?
|   +-- ТАК: Використовуйте HTML (<button>, <nav>, <main>, <article>)
|   +-- НІ: Переходьте до ARIA
|
+-- Який тип ARIA потрібен?
    +-- Role: Чим Є цей елемент? (role="dialog", role="tab")
    +-- State: Який стан? (aria-expanded, aria-checked)
    +-- Property: Який зв'язок? (aria-labelledby, aria-describedby)
    +-- Live region: Динамічний контент? (aria-live="${aria_live_mode:polite}")
```

### ARIA паттерни для звичайних віджетів

**Disclosure (показати/приховати)**
```html
<button aria-expanded="false" aria-controls="content-1">
  Показати деталі
</button>
<div id="content-1" hidden>
  Контент тут
</div>
```

**Інтерфейс табів**
```html
<div role="tablist" aria-label="${component_name:Налаштування}">
  <button role="tab" aria-controls="panel-1" id="tab-1">
    Загальні
  </button>
  <button role="tab" aria-controls="panel-2" id="tab-2">
    Приватність
  </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>
```

## Чек-лист навігації клавіатурою

```
[ ] Усі інтерактивні елементи доступні через Tab
[ ] Порядок фокусу відповідає візуальному/логічному порядку
[ ] Фокус видимий на всіх елементах
[ ] Немає пасток клавіатури (завжди можна вийти через Tab)
[ ] Skip link як перший елемент у фокусі
[ ] Escape закриває модальні вікна/випадаючі списки
[ ] Стрілки навігують всередині віджетів (таби, меню, сітки)
[ ] Enter/Space активують кнопки та посилання
```

## Тестування скрінрідером

### Перевірка оголошень

| Елемент | Що має оголошувати |
|---------|-----------------|
| Button  | Роль + ім'я + стан ("Підтвердити, кнопка") |
| Link    | Ім'я + "посилання" ("Головна сторінка, посилання") |
| Image   | Alt-текст АБО "decorative" (пропустити) |
| Heading | Рівень + текст ("Заголовок рівня 2, Про нас") |
| Error   | Повідомлення про помилку + зв'язок з полем |

## Інтеграція автоматизованого тестування

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

test('${component_name:component} доступний', async () => {
  const { container } = render();
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});
```

## Чек-лист верифікації

Перед завершенням роботи над доступністю:

```
Автоматизоване тестування:
[ ] axe-core повідомляє про нуль порушень
[ ] Lighthouse accessibility >= ${lighthouse_score:90}
[ ] HTML валідатор пройдено

Тестування клавіатурою:
[ ] Повне виконання завдання без миші
[ ] Видимий фокус у будь-який час
[ ] Логічний порядок табуляції

Тестування скрінрідером:
[ ] Протестовано з (${screen_reader:NVDA})
[ ] Весь контент оголошується правильно
[ ] Динамічні оновлення оголошуються

Візуальне тестування:
[ ] Коефіцієнти контрастності перевірено (${contrast_ratio_normal:4.5}:1 мін)
[ ] Працює при масштабі ${zoom_level:200}%
[ ] Колір не є єдиним засобом передачі інформації
```