EMZETT.
Увійти

Emzett Wiki

Доступні сайти: ARIA, фокус і керування з клавіатури

Properties1
tagsfrontend, barrierefreiheit

2 хв читання

Доступні сайти: ARIA, фокус і керування з клавіатури

Коротко: Доступними сторінками можна повністю керувати з клавіатури та через програму читання з екрана; головне правило — спершу використовувати правильні елементи HTML і додавати ARIA лише там, де HTML недостатньо.

Докладніше: Люди користуються сайтами за допомогою програм читання з екрана, лише з клавіатури, голосового керування або у збільшеному вигляді. Доступність допомагає й усім іншим: на яскравому сонці, зі зламаною рукою чи в шумі.

Подробиці

Спершу семантичний HTML

  • <button> для дій, <a href> для навігації, а не <div onclick>.
  • Заголовки <h1>–<h6> у логічному порядку; області через <nav>, <main>, <header>, <footer>.
  • Форми з <label for>; зображення зі змістовним alt (декоративні: alt="").
  • Таблиці з <th> і scope.

Справжній <button> дає обробку клавіатури, фокус і роль безкоштовно.

Клавіатура та фокус

  • Усе, чим можна керувати, має бути досяжним через Tab, Enter/пробіл і клавіші зі стрілками.
  • Видиме кільце фокуса (:focus-visible); ніколи не задавайте просто outline: none.
  • Порядок слідує вихідному коду; використовуйте tabindex="0" помірно, уникайте додатних значень.
  • Діалоги: перемістіть фокус усередину, утримуйте всередині, закривайте за Esc, потім поверніть на елемент, що викликав.
  • Посилання-пропуск («До вмісту») на самому верху.

Правильне використання ARIA

ARIA (Accessible Rich Internet Applications) додає ролі та стани: aria-label, aria-expanded, aria-live (повідомлення про стан), role="dialog". Правила: відсутність ARIA краща за поганий ARIA. ARIA змінює лише те, що оголошують допоміжні технології, але не поведінку; обробку клавіатури потрібно створювати самим. Новий вміст (повідомлення про помилки, спливні сповіщення) оголошуйте в живій області.

Тестування

  • Пройдіться лише з клавіатури.
  • Спробуйте програму читання з екрана (NVDA, VoiceOver, TalkBack).
  • Перевірте контраст (WCAG: 4,5:1 для тексту).
  • Інструменти: Lighthouse, axe; вони знаходять приблизно 30–40 % проблем, решта потребує людей.
  • Юридично важливо: німецький Barrierefreiheitsstärkungsgesetz (BFSG) для багатьох цифрових пропозицій з 28 червня 2025 року.

Див. також: WCAG і кольоровий контраст, Програми читання з екрана та допоміжні технології, Lighthouse і Core Web Vitals