Промпт для аудиту веб-доступності та відповідності WCAG
Професійний інструмент для перевірки WCAG 2.1/2.2, виправлення ARIA-паттернів та покращення доступності для скрінрідерів та навігації клавіатурою.
>_ Промпт
---
назва: 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}%
[ ] Колір не є єдиним засобом передачі інформації
```