Skip to main content

Які основні типи ARIA-атрибутів існують?

HTMLJunior~2 хв читання
Запропонувати правку

У специфікації WAI-ARIA (Accessible Rich Internet Applications) існує три основні типи атрибутів, кожен з яких відповідає за свою роль у забезпеченні доступності інтерфейсу. Вони допомагають екранним читачам та іншим допоміжним технологіям розуміти сенс, стан і взаємозв'язок елементів.

1. Ролі (roles) - визначають що це за елемент

Роль повідомляє, яку функцію виконує елемент: кнопку, вкладку, діалог, меню, список тощо. Це особливо важливо, якщо використовується кастомна верстка на <div> чи <span> замість нативних HTML-тегів.

Приклади:

html
<div role="button">Submit</div> <div role="dialog">...</div> <ul role="listbox"> <li role="option">Warsaw</li> </ul>

Приклади поширених ролей:

  • role="button" - кнопка
  • role="link" - посилання
  • role="checkbox" - прапорець
  • role="dialog" - модальне вікно
  • role="menu" / role="menuitem" - навігаційне меню
  • role="alert" - важливе сповіщення

2. Стани (states) - описують поточний стан елемента

Ці атрибути динамічні: їхні значення можуть змінюватися в процесі роботи інтерфейсу. Вони повідомляють користувачу, що зараз відбувається: елемент активний, розкритий, обраний тощо.

Приклади:

html
<button aria-pressed="true">Favorite</button> <div aria-expanded="false">Menu</div> <li aria-selected="true">Warsaw</li> <input type="checkbox" aria-checked="false">

Часто використовувані стани:

  • aria-checked - чи позначений прапорець
  • aria-expanded - чи розкритий елемент (акордеон, меню)
  • aria-pressed - чи натиснута кнопка-перемикач
  • aria-selected - чи обраний пункт
  • aria-hidden - чи прихований елемент від скринридерів

3. Властивості (properties) - описують характеристики та зв'язки елементів

Ці атрибути не залежать від стану, вони задають додаткову інформацію: описи, зв'язки, ролі, групи. За їх допомогою можна "пов'язати" елементи між собою, додати текстові пояснення та контекст.

Приклади:

html
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-text"> <h2 id="dialog-title">Confirmation</h2> <p id="dialog-text">Are you sure you want to delete the file?</p> </div>

Часто використовувані властивості:

  • aria-label - короткий текстовий опис елемента
  • aria-labelledby - пов'язує елемент із заголовком (за id)
  • aria-describedby - пов'язує з описом
  • aria-controls - вказує, яким елементом керує цей елемент
  • aria-live - повідомляє, що вміст усередині оновлюється динамічно (наприклад, повідомлення чату)

4. (додатково) Атрибути ARIA Live Region

Використовуються для динамічних оновлень контенту, коли потрібно повідомити користувача про нові зміни без перезавантаження сторінки. Приклад:

html
<div aria-live="polite">Loading complete</div>

Значення:

  • off - читач не повідомляє про зміни;
  • polite - повідомляє, коли користувач завершить поточну операцію;
  • assertive - повідомляє негайно (для помилок, попереджень).

Підсумкова таблиця:

ТипЩо робитьПриклади
roleВизначає тип елементаrole="button", role="dialog"
state (стан)Показує поточний стан елементаaria-checked, aria-expanded, aria-selected
property (властивість)Додає опис, контекст і зв'язкиaria-label, aria-labelledby, aria-describedby, aria-controls

Висновок:

ARIA-атрибути бувають трьох типів:

  1. Ролі (role) - хто це;
  2. Стани (aria-* state) - що зараз відбувається;
  3. Властивості (aria-* property) - які є зв'язки та описи.

Разом вони роблять інтерфейс зрозумілим для скринридерів, доступним для клавіатури та відповідним стандартам WCAG.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку