Розробка VPAT — шаблону звіту про доступність
VPAT (Voluntary Product Accessibility Template) — стандартний документ, що описує відповідність продукту стандартам Section 508 (США) або EN 301 549 (Європа). Є обов'язковим для продажу програмного забезпечення державним установам США та великим корпораціям з політиками закупівель.
Версії VPAT
| Версія | Стандарт | Коли використовувати |
|---|---|---|
| VPAT 2.4 WCAG | WCAG 2.1/2.2 | Міжнародні проекти |
| VPAT 2.4 508 | Section 508 | Держсектор США |
| VPAT 2.4 EU | EN 301 549 | Європейський ринок |
| VPAT 2.4 INT | Усі три | Універсальний |
Шаблони VPAT доступні на сайті IT Industry Council (itic.org).
Структура VPAT
VPAT складається з таблиць за кожним розділом WCAG. Для кожного критерію вказується рівень підтримки:
| Рівень підтримки | Значення |
|---|---|
| Supports | Повністю відповідає |
| Partially Supports | Часткова відповідність з обмеженнями |
| Does Not Support | Не відповідає |
| Not Applicable | Критерій не застосовується до продукту |
| Not Evaluated | Не перевірялося |
Процес підготовки VPAT
Крок 1: Аудит продукту
Проводиться систематичне ручне тестування з екранними читалками (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari) та автоматизованими інструментами (axe-core, WAVE).
Крок 2: Заповнення критеріїв
Для кожного WCAG Success Criterion (всього 78 для рівня AA в 2.1):
1.1.1 Non-text Content (Level A)
Criteria: Supports
Remarks: All images have appropriate alt text. Decorative images
use empty alt="" attribute. Complex charts include
long description via aria-describedby.
Крок 3: Документування обмежень
1.4.3 Contrast (Minimum) (Level AA)
Criteria: Partially Supports
Remarks: Most text meets 4.5:1 contrast ratio requirement.
Exception: placeholder text in form fields uses #9ca3af
on white background (2.7:1 ratio). Fix planned in Q2 2025.
Workaround: Users can use browser high contrast mode.
Автоматизована генерація чернетки
// scripts/generate-vpat-draft.js
// На основі звіту axe-core створюємо чернетку VPAT
const WCAG_CRITERIA = require('./wcag-criteria.json'); // Список усіх критеріїв
async function generateVpatDraft(axeReport) {
const violations = new Set(axeReport.violations.map(v => v.tags).flat()
.filter(t => t.startsWith('wcag')));
const draft = WCAG_CRITERIA.map(criterion => ({
id: criterion.id,
title: criterion.title,
level: criterion.level,
support: violations.has(criterion.wcag_tag) ? 'Partially Supports' : 'Supports',
remarks: violations.has(criterion.wcag_tag)
? `Automated testing found issues: ${axeReport.violations.filter(v => v.tags.includes(criterion.wcag_tag)).map(v => v.description).join('; ')}`
: 'No issues detected in automated testing. Manual verification recommended.',
}));
// Генеруємо Markdown
return draft.map(c =>
`### ${c.id} ${c.title} (Level ${c.level})\n\n**${c.support}**\n\n${c.remarks}\n`
).join('\n');
}
Чернетка потребує обов'язкової ручної перевірки — автоматика охоплює близько 40% критеріїв.
Що зазвичай перевіряється вручну
- Навігація клавіатурою (Tab/Shift+Tab/Enter/Space/Escape/стрілки)
- Сумісність з NVDA, JAWS, VoiceOver
- Масштабування 200% та 400% без втрати функціональності
- Режим високого контрасту Windows
- Анімації при
prefers-reduced-motion - Тайм-аути сеансу та попередження
Терміни
Аудит продукту, заповнення VPAT 2.4 та його ревю: 5–10 робочих днів залежно від складності продукту.