F-08 · Foundation

Доступність

WCAG 2.2 AA з день нуль. Медицина — підвищений ризик аудиту. Цей розділ — чекліст і правила, а не «опція».

СтандартWCAG 2.2 AA
Тестуванняaxe + screen reader
Темна темаday-1

Чекліст обовʼязкового

Колір / контраст

Контраст ≥ 4.5 : 1 для тексту

  • ≥ 4.5 для тіла 14-18px
  • ≥ 3 для UI > 18px та для іконок ≥ 24px
  • Стан focus / hover мають свій контраст
  • Колір не єдиний носій інформації (статус = колір + іконка + текст)
Клавіатура

Усе доступне Tab + Enter

  • Видимий focus ring (берріш, 4px, .18α)
  • Tab order логічний (DOM = візуальний)
  • Skip-link до main у public
  • Esc закриває модал, повертає focus
  • Cmd/Ctrl+K → command palette (admin)
ARIA / семантика

Native first, ARIA other

  • button для дій, a — для навігації
  • label обʼязковий до кожного input
  • role+aria тільки коли native не вистачає
  • aria-live для toast notifications
  • aria-current="page" в навігації
Touch / motion

Touch ≥ 44 × 44, motion respected

  • min height 44px на mobile (Apple HIG)
  • Hit area ≥ 24px між сусідніми targets
  • prefers-reduced-motion вимикає анімації
  • Auto-play відео ніколи без consent
  • Animation тривалість < 5s
Тексти / мова

UA primary, plain language

  • html lang="uk"
  • Чітка термінологія (ПІБ, БПР, серт. №)
  • Error messages: що сталось + що робити
  • Дати у форматі ДД.ММ.РРРР, локалізовано
  • Числа з пробілами як thousand-sep (1 200)
Форми

Помилки видимі + читаються

  • aria-invalid="true" + aria-describedby="error-id"
  • Помилка під полем, не tooltip
  • Auto-focus на перше error поле при submit
  • required + min/max на native атрибутах
  • autocomplete="given-name" / "family-name" / "tel" → швидше

Тестування

ІнструментЩо ловитьЯк юзати
axe DevToolsСтруктурні issues, ARIA, контрастBrowser ext, run per page
Lighthouse a11ySummary score, low-hanging fruitDevTools → Lighthouse → Accessibility
WAVEКольори, headings hierarchywave.webaim.org
VoiceOver (macOS)Real screen reader experienceCmd+F5
NVDA (Windows)Screen reader на WinFree download
Tab throughKeyboard navTab / Shift+Tab / Enter / Esc
200% zoomResponsive at high zoomBrowser zoom 200%, no horizontal scroll

Що НЕ робити