TL;DR

WCAG — гайдлайн для створення доступного додатку.

Рівень WCAG AA — мінімальний стандарт, якого ви маєте дотримуватися, зокрема відповідно до законодавства США та ЄС з 2025 року.

AOM (Accessibility Object Model) — семантична модель, яку використовують програми для читання з екрана (Screen readers).

Використовуйте семантичні HTML-елементи (header, footer, article тощо), якщо це можливо.

Порядок заголовків (H1…H7) важливий для доступності.

Надавайте перевагу нативним HTML-елементам: button, input, checkbox, radio тощо.

Якщо дизайн вимагає використання ненативних або несемантичних компонентів, використовуйте атрибут role. Документація.

Якщо ви змінюєте роль елемента через role, його поведінка має відповідати ролі. Наприклад, role="button" повинен активуватись при натисканні Enter або пробілу (Space), причому поведінка пробілу за замовчуванням (перехід на наступну сторінку) має бути відключена.

Мінімальний рівень контрастності для WCAG — AAA.

Інструменти тестування, як Lighthouse чи AXE, не гарантують реальної доступності вашого додатка. Вони перевіряють лише контрастність і наявність тегів/атрибутів під час ініціалізації, але не охоплюють якість цих атрибутів і, головне, навігацію клавіатурою.

Storybook допоможе тестувати доступність завдяки можливості перевірки стану кожного компонента.

Особистий досвід: 100% у Lighthouse = лише 20% реальної роботи. Решта 80% зусиль зазвичай іде на реалізацію навігації клавіатурою.

Tab та Shift+Tab повинні дозволяти доступ до всіх інтерактивних частин додатка. Усі елементи, з якими можна взаємодіяти, мають мати tabindex=0.

Фокусовані елементи мають бути візуально виділені. CSS-властивість outline — чудовий інструмент для цього.

Skip to main content — корисна функція, яка дозволяє швидко перейти до основного контенту сторінки.

Focus Trap — обов’язковий для модальних вікон або випадаючих меню, щоб користувачі не втрачали фокус.

Юзабіліті та доступність (Usability & Accessibility) тісно пов’язані. Думайте про зручність використання при проєктуванні клавіатурної навігації.

Автотести для клавіатурної навігації — обов’язкові! Зламати цю функціональність легко, але помітити проблему складно.

Реалізувати доступність додатка складно та дорого, але це покращує SEO, вашу карму та забезпечує юридичну безпеку!