Пошук уроків, статей та іншого контенту
Як зробити інтерфейс придатним для використання людьми зі скрінрідерами та лише клавіатурою.
ARIA (Accessible Rich Internet Applications) — набір HTML-атрибутів, що описують роль і стан елемента для допоміжних технологій (скрінрідерів). Але перше й найважливіше правило ARIA — не використовувати її там, де нативний HTML-елемент і так уже дає потрібну поведінку безкоштовно:
<!-- Зайве і крихке: -->
<div role="button" tabindex="0" onclick="submit()">Відправити</div>
<!-- Просто працює саме так із коробки: -->
<button onclick="submit()">Відправити</button><button> і так має роль button, фокусується Tab-ом, активується Enter і Space без жодного додаткового коду — div з роллю відтворює це вручну, і легко забути якийсь із цих аспектів.
<img src="chart.png" alt="Графік зростання користувачів за 2026 рік: з 1000 до 15000" />
<!-- Суто декоративне зображення — порожній alt, а не відсутній атрибут -->
<img src="decorative-line.svg" alt="" />Порожній alt="" (а не повністю відсутній атрибут) — навмисний сигнал скрінрідеру пропустити суто декоративне зображення, не читаючи ім'я файлу вголос. Змістовне зображення потребує опису, що передає інформацію, яку воно несе, а не лише те, що на ньому «зображено».
Кожен інтерактивний елемент (посилання, кнопка, поле форми) має бути досяжним і використовуваним лише клавіатурою Tab/Enter/Space, без миші, — базова вимога доступності для людей, які не можуть чи не хочуть використовувати мишу.
outline: none; для :focus без жодної альтернативної видимої індикації — одна з найпоширеніших CSS-помилок доступності: прибирає єдиний візуальний сигнал того, який елемент зараз у фокусі клавіатурної навігації, роблячи інтерфейс непридатним для використання без миші.
Для справді кастомних компонентів без прямого нативного еквівалента (наприклад, випадаюче меню з довільним оформленням) ARIA-атрибути описують стан, якого HTML сам по собі не передає:
<button aria-expanded="false" aria-controls="menu-list">Меню</button>
<ul id="menu-list" hidden>
<li><a href="/profile">Профіль</a></li>
</ul>aria-expanded повідомляє скрінрідеру, розгорнутий чи згорнутий елемент керування зараз, — інформація, яку зряча людина отримує візуально (стрілка, що обертається), а скрінрідер інакше не отримав би взагалі.
div/span з обробником кліку замість button/a — втрачається вбудована клавіатурна доступність, роль для скрінрідера, і її доводиться відтворювати вручну ARIA-атрибутами та обробкою клавіш.
outline: none без альтернативної видимої індикації фокуса — робить сторінку непридатною для клавіатурної навігації.
alt, що просто повторює ім'я файлу чи каже «зображення» замість опису фактичного змісту — не несе жодної корисної інформації для людини, що використовує скрінрідер.
Перше правило доступності — нативний HTML-елемент (button, a, input) майже завжди кращий за div з ARIA-роллю, відтвореною вручну. alt="" явно позначає декоративне зображення, змістовне — потребує опису переданої інформації. Кожен інтерактивний елемент має лишатись повністю досяжним і використовуваним лише клавіатурою — включно з видимою індикацією фокуса, яку не можна прибирати без заміни.