UX-доступність та інтерфейси для всіх

1) Навіщо це важливо

Юридично та етично: інтерфейс не повинен виключати людей з порушеннями зору, слуху, моторики, когнітивних особливостей.
Бізнес-ефект: більше користувачів, вище конверсія і утримання, краще SEO і якість коду.
Операційно: доступність - це процес, а не «випадковий фікс».

2) Основи та принципи (POUR)

Perceivable (Сприйманість): контраст, тексти-альтернативи, субтитри.
Operable (Керованість): все доступно з клавіатури, видимий фокус, пауза/стоп анімацій.
Understandable (Зрозумілість): передбачувана навігація, ясні помилки, прості формулювання.
Robust (Надійність): коректна семантика HTML/ARIA, сумісність з асистивними технологіями.

3) Семантика, заголовки і ARIA

Семантична розмітка перш ARIA: '<button>','< nav>','< form>','< table>'- за призначенням.
Ієрархія заголовків: один'< h1>'на сторінку, далі логічна структура'< h2>'-'< h3>'.
Landmarks: '<header>','< main>','< aside>','< footer>','< nav>'- допомагають скрінрідерам.
ARIA тільки при необхідності: `role`, `aria-label`, `aria-describedby`, `aria-expanded`, `aria-live`.
Стани/помилки через'aria-invalid','aria-errormessage'.

4) Клавіатура і фокус-менеджмент

Повна керованість клавіатурою: 'Tab/Shift + Tab'- порядок,'Enter/Space'- активувати,'Esc'- вихід.
Видимий фокус завжди; не відключати outline.
Пастки фокусу: в модалках - циклічний фокус, повернення фокусу на джерело після закриття.
Приховані елементи не повинні потрапляти в таб-порядок ('display:none`, `aria-hidden="true"`).
Скіп-посилання: «Перейти до основного вмісту» - на початку сторінки.

5) Колір, контраст і типографіка

Контраст тексту: не менше 4. 5:1 для звичайного тексту і 3:1 для великого.
Не покладатися тільки на колір: дублюйте іконкою/патерном/підписом.
Розмір клікабельних цілей: мінімум 40-48 px, достатні поля навколо.
Шрифти: читаються гарнітури, міжрядковий 1. 4–1. 6, довжина рядка 45-90 знаків.

6) Рух, анімації та епілептогенний спалах

Поважайте системний прапор prefers-reduced-motion - додавайте спрощені анімації/відключайте паралакс.
Уникайте мерехтінь> 3 раз/сек.
Всі авто-рухи повинні мати Pause/Stop/Hide.

7) Форми, помилки і валідація

Явно зв'язуйте мітки і поля: `<label for="id">`.
Плейсхолдер - не мітка.
Повідомлення про помилки поруч з полем і у зведенні помилок вгорі; зв'язуйте через'aria-describedby'.
Пояснюйте формат введення, приклад, маску; вказуйте одиниці і валюту.
Не скидайте заповнені поля при помилці; зберігайте фокус на проблемному полі.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) Компоненти та інтерактив: патерни

Кнопки vs посилання: дія ='< button>', перехід ='< a>'.
Таби/акордеони: стрілки навігації,'aria-controls','aria-selected'.
Модалки/діалоги: 'role = «dialog»','aria-modal = «true»', пастка фокусу,'Esc'закриває.
Tooltip/Popover: доступність по клавіатурі, таймаути не заважають читанню.
Drag & Drop: альтернативи - кнопки «перемістити вгору/вниз», клавіатурні стрілки; події не тільки мишею.

9) Медіа: відео/аудіо/графіки

Відео: субтитри, розшифровка (transcript), альтернативна доріжка аудіо-описів (AD).
Аудіо: текстова розшифровка.
Графіки/діаграми: текстове резюме («що важливо»), таблиця даних, описові підписи осей.
Живі області: 'aria-live = «polite «/» assertive »'- обережно, щоб не« кричати» занадто часто.

10) Таблиці та списки

11) i18n, локалі та RTL

Атрибут'lang'на html-корені; локальні формати чисел/дат/валют.
RTL підтримка (арабська/іврит): дзеркалювання іконок, порядок навігації, курсорів.
Уникайте вшитих в іконки слів (текст повинен бути перекладним).
Прості формулювання, уникати жаргону; глосарій термінів.

12) Час, сесії, капчі та альтернативи

Таймаути - з попередженням і можливістю продовжити.
CAPTCHA: віддайте перевагу альтернативам (питання, невидимі аналізатори ботів, підтвердження поштою/телефоном); якщо використовуєте - текстову альтернативу і не тільки візуальну.
Автентифікація: підтримка менеджерів паролів, «показати пароль», WebAuthn.

13) Доступність для сенсорних і моторних порушень

Жести повинні мати еквіваленти кліку/клавіатурі.
Не вимагайте тривалих утримань/подвійних тапів без альтернативи.
«Pointer cancellation»: дія повинна виконуватися на відпускання, не на «натискання», щоб дати шанс скасувати.

14) Стану, повідомлення та алерти

Використовуйте'role = «status »/» alert»'для динамічних повідомлень.
Не перекривайте фокус «липкими» банерами.
Toast-повідомлення - з паузою при фокусі/hover і доступом з клавіатури.

15) Тест-план (ручний і авто)

• Пройти всі ключові сценарії тільки клавіатурою.
• Перевірити видимість фокусу на кожному елементі.
• Збільшити масштаб до 200% - інтерфейс залишається функціональним без горизонтального скролла.
• Увімкнути системний режим «зменшення руху» - анімації не заважають.
• Пройти сценарій зі скрінрідером (NVDA/VoiceOver), переконатися в правильних ролях/мітках/порядку.

• Лінти доступності на рівні компонентів.
• Перевірка контрасту, альтернативних текстів, порядку заголовків, валідності ARIA.
• Снапшоти семантики (role tree) для критичних екранів.

16) Метрики якості доступності

A11y Coverage: частка компонентів з пройденими чек-листами.
Keyboard-only Pass Rate: відсоток сценаріїв, прохідних клавіатурою.
Contrast Violations/1k елементів.
SR Flow Time: час проходження сценарію зі скрінрідером.
User-feedback: скарги на доступність, час реакції та виправлення.

17) Чек-лист компонента

• Правильна семантика/роль без надлишкової ARIA
• Підписані мітки,'aria-'коректні
• Повна керованість клавіатурою, видимий фокус
• Контраст тексту/іконок/меж в нормі
• Помилки та статки озвучуються скрінрідером
• Повага prefers-reduced-motion
• Розмір клікабельної області ≥ 40-48 px
• Локалізація і RTL не ламають макет

18) Анти-патерни

«Див-кнопки» без ролі/клавіатури.
Приховування фокусу'outline: none'без альтернативи.
Плейсхолдер замість label.
Помилки тільки кольором.
Модалки без пастки фокусу і без'Esc'.
Drag-only без клавіатури.
Довгі автопрокрутки/паралакс без опції відключити.

19) Ролі і процес

A11y-власник в команді (Product/Design/Dev).
Дефінішн-оф-дан (DoD) включає доступність.
Дизайн-рев'ю: перевірка контрасту, фокусу, лейблів.
Код-рев'ю: семантика/ARIA, тест клавіатурою.
Регулярні аудити і план поліпшень.

20) Впровадження за ітераціями

• Семантика/заголовки, контраст, фокус і клавіатура, базові форми і помилки.

• Модалки, таби/акордеони, таблиці/графіки з текстовим резюме, відео-субтитри, знижена анімація.

• Автотести в CI, RTL/i18n, метрики, регулярні аудити, навчання команди.

21) Шаблони та сніпети

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) Міні-FAQ

Чи потрібна окрема «версія для слабозорих»?
Ні, ні. Одна адаптивна, доступна версія для всіх з налаштуваннями.

Чи достатньо перевірити тільки контраст?
Ні, ні. Контраст - лише частина. Потрібні клавіатура, фокус, семантика, форм-помилки, медіа і т.д.

ARIA вирішить все?
ARIA не виправить невірну семантику. Спочатку правильні теги, потім ARIA-уточнення.

Підсумок

Доступність - це системна дисципліна: семантика клавіатура/фокус контраст/колір форми/помилки медіа/графіки тест-план і метрики. Робіть доступність частиною DoD і культури команди - і ваш продукт стане по-справжньому універсальним, надійним і зручним для всіх.