Атрибути ARIA

Короткий неофіційний довідник з прикладами.

№ Назва Можливі значення Що робить Приклад в коді Приклад в інтерфейсі
1 aria-label текст Забезпечує короткий текстовий опис елемента, коли відсутня видима текстова мітка.

⚠️ Пригнічує (ігнорує) видимий текст елемента!
<button aria-label="Закрити вікно">x</button>
2 aria-labelledby id іншого елемента Містить id текстового елемента, який слугує текстовою міткою для поточного елемента.

⚠️ Пригнічує (ігнорує) видимий текст елемента!

⚠️ При поєднанні з атрибутом aria-label пригнічує (ігнорує) його!
<div id="label-name">Ваше ім'я</div>
<input type="text" aria-labelledby="label-name">
Ваше ім'я
3 aria-describedby id іншого елемента Вказує елемент, який описує поточний елемент. Опис, як правило, детальніший за той, що надається в атрибутах aria-label / aria-labelledby.

Може поєднуватися з атрибутами
aria-label / aria-labelledby.
<div id="label-2">Ваше ім'я</div>
<div id="descr-2" style="display: none">Введіть ваше повне ім'я</div>
<input type="text" aria-labelledby="label-2" aria-describedby="descr-2">
Ваше ім'я
4 aria-busy "true",
"false"		 Вказує, що елемент зайнятий виконанням завдання або оновлюється, тому його стан може змінитися.
<button aria-busy="true">Дія 1</button><br><br>
<button aria-busy="false">Дія 2</button>

5 aria-checked "true",
"false",
"mixed"(?)		 Вказує стан вибору для елементів типу чекбоксів (вибраний, не вибраний або "змішаний").
<div id="checkbox-custom" state="0" role="checkbox" aria-checked="false" tabindex="0">[_]</div>

<script>
document.getElementById("checkbox-custom").addEventListener("click", function() {
    let state = this.getAttribute("state");
    if (state == "1") {
        this.innerText = "[_]";
        this.setAttribute("state", "0");
        this.setAttribute("aria-checked", "false");
    } else {
        this.innerText = "[+]";
        this.setAttribute("state", "1");
        this.setAttribute("aria-checked", "true");
    }
});
</script>
6 aria-controls id іншого елемента Вказує, що елемент керує іншим елементом (наприклад, кнопка керує видимістю деякого контейнера).

Не всі скрінрідери реагують на цей атрибут.
<button aria-controls="menu-1" aria-expanded="false" id="toggle-menu-1">Видимість меню</button>
<ul id="menu-1" style="display: none">
    <li>Елемент 1</li>
    <li>Елемент 2</li>
    <li>Елемент 3</li>
</ul>

<script>
document.getElementById("toggle-menu-1").addEventListener("click", function() {
    let element = document.getElementById("menu-1");
    let state = element.style.display;
    if (state == "block") {
        element.style.display = "none";
        this.setAttribute("aria-expanded", "false");
    } else {
        element.style.display = "block";
        this.setAttribute("aria-expanded", "true");
    }
});
</script>
7 aria-current "true",
"false",
"page",
"step",
"location",
"date",
"time"		 Позначає елемент як поточний, можливе вказання типу елемента
<a href="../some-location-1" aria-current="page">some-location-1</a><br>
<a href="../some-location-2">some-location-2</a>
 some-location-1
some-location-2
8 aria-disabled "true",
"false"		 Вказує, що елемент недоступний для взаємодії, навіть якщо візуально це не очевидно.
<button aria-disabled="true">Дія 1</button><br><br>
<button aria-disabled="false">Дія 2</button>

9 aria-expanded "true",
"false",
"undefined"(?)		 Вказує, чи елемент (наприклад, меню або панель) розкритий або згорнутий.
👆 див. попередній приклад
 👆 див. попередній приклад
10 aria-haspopup "false",
"true",
"menu",
"listbox",
"tree",
"grid",
"dialog"		 Вказує, що елемент викликає контекстне меню або подібне.
<button aria-haspopup="false">Дія 1</button><br><br>
<button aria-haspopup="true">Дія 2</button><br><br>
<button aria-haspopup="menu">Дія 3</button><br><br>
<button aria-haspopup="listbox">Дія 4</button><br><br>
<button aria-haspopup="tree">Дія 5</button><br><br>
<button aria-haspopup="grid">Дія 6</button><br><br>
<button aria-haspopup="dialog">Дія 7</button>











11 aria-hidden "true",
"false"		 Вказує, чи елемент повинен бути прихований від асистивних технологій (скрінрідерів).

⚠️ Не працює на кнопках!
<div aria-hidden="true">прихований текст</div><br>
<button aria-hidden="true" id="button-hidden">(не)прихована кнопка</button>
12 aria-invalid "true",
"false",
"grammar",
"spelling"		 Вказує, що поточний стан введеного значення не відповідає вимогам валідації.
<input type="text" aria-label="Поле 1" aria-invalid="true" ><br><br>
<input type="text" aria-label="Поле 2" aria-invalid="false">

13 aria-live "off",
"polite",
"assertive"		 Вказується на елементі, вміст якого скрінрідер має озвучувати автоматично після оновлення (зміни) цього вмісту, навіть якщо користувач не сфокусований на цьому елементі.
<div id="counter" aria-live="off">0</div>

<script>
let count = 1;
const countMax = 5;
const counter = document.getElementById("counter");

setInterval(function() {
    counter.textContent = count;
    count++;
    if (count > countMax) {
        count = 1;
    }
}, 1000);
</script>
0
14 aria-modal "true",
"false"		 Вказує, що елемент є модальним вікном і користувач не може взаємодіяти з іншим контентом, поки це вікно не буде закрите.
<div role="dialog" aria-modal="true">
Це модальне вікно.<br><br>
<button>Зрозуміло</button>
</div>
Це модальне вікно.
15 aria-multiselectable "true",
"false"		 Вказує, чи дозволяється вибір кількох елементів у списку.

Скрінрідер NVDA не бачить різниці між значеннями цього атрибута.
<ul id="list-2" role="listbox" aria-multiselectable="true" tabindex="0" aria-label="Деякий список">
    <li role="option" aria-selected="true" tabindex="0">Елемент 1 ✔</li>
    <li role="option" aria-selected="true" tabindex="0">Елемент 2 ✔</li>
    <li role="option" aria-selected="false" tabindex="0">Елемент 3</li>
</ul>
  • Елемент 1 ✔
  • Елемент 2 ✔
  • Елемент 3
16 aria-orientation "horizontal",
"vertical"		 Вказує орієнтацію елемента, наприклад, для повзунків або вкладок.

Не всі скрінрідери реагують на цей атрибут.
<div role="tablist" aria-orientation="horizontal">
    <button role="tab">Гориз 1</button>
    <button role="tab">Гориз 2</button>
    <button role="tab">Гориз 3</button>
</div>
<br><br>
<div role="tablist" aria-orientation="vertical">
    <button role="tab">Верт 1</button><br>
    <button role="tab">Верт 2</button><br>
    <button role="tab">Верт 3</button>
</div>




17 aria-pressed "true",
"false",
"mixed"		 Вказує стан кнопки типу toggle (натиснута, відпущена, або змішаний стан).
<button aria-pressed="true">Дія 1</button><br><br>
<button aria-pressed="false">Дія 2</button><br><br>
<button aria-pressed="mixed">Дія 3</button>



18 aria-readonly "true",
"false"		 Вказує, що елемент доступний для перегляду, але не для редагування.

Для input-ів має сенс, якщо поєднувати з відповідною властивістю disabled.
<input type="text" aria-label="Поле 1" aria-readonly="true" value="Не можна редагувати" readonly><br><br>
<input type="text" aria-label="Поле 2" aria-readonly="false" value="Можна редагувати">

19 aria-relevant "additions",
"removals",
"text",
"all"		 Вказує, які саме зміни вмісту елемента слід оголошувати скрінрідером: додавання, видалення, зміни тексту чи всі зміни. Потрібно поєднувати з атрибутом aria-live.
<div aria-live="polite" aria-relevant="additions">1</div>
1
20 aria-required "true",
"false"		 Вказує, що введення в цьому полі є обов'язковим для завершення процесу або форми.
<input type="text" aria-label="Поле 1" aria-required="true" value="Імейл"><br><br>
<input type="text" aria-label="Поле 2" aria-required="false" value="Телефон">

21 aria-selected "true",
"false"		 Вказує, чи вибрано елемент зі списку.
<ul id="list-1" role="listbox" aria-multiselectable="false" tabindex="0" aria-label="Деякий список">
    <li role="option" aria-selected="true" tabindex="0">Елемент 1 ✔</li>
    <li role="option" aria-selected="false" tabindex="0">Елемент 2</li>
    <li role="option" aria-selected="false" tabindex="0">Елемент 3</li>
</ul>
  • Елемент 1 ✔
  • Елемент 2
  • Елемент 3
22 aria-valuemax число Визначає максимальне значення для повзунка або іншого елемента з діапазоном значень.
<input type="range" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="Рівень">
23 aria-valuemin число Визначає мінімальне значення для повзунка або іншого елемента з діапазоном значень.
<input type="range" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="Рівень">
24 aria-valuenow число Вказує поточне значення повзунка або іншого елемента з діапазоном значень.
<input type="range" aria-valuenow="50" min="0" max="100" aria-label="Рівень">