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

17

Від автора: Web Accessibility Initiative Accessible Rich Internet Applications Suite або WAI-ARIA, або просто ARIA – набір інструментів і керівних принципів щодо підвищення доступності контенту і додатків. Зокрема технологія включає набір атрибутів для HTML елементів, які вставляють в них семантичну інформацію, считываемую допоміжними технологіями.

ARIA може бути дуже корисним інструментом, однак потрібно знати, як і коли використовувати її. Тому я склав 5 правил, які варто врахувати при використанні ARIA в HTML.

1. Використовуйте семантичний HTML5 замість ARIA

«Якщо є можливість використовувати вбудований HTML елемент або атрибут із семантикою і потрібним вам поведінкою, використовуйте його. Не міняйте призначення елементів і не додавайте ARIA ролі, стану або властивості для досягнення доступності.»

Перше правило використання ARIA в HTML – постарайтеся не використовувати ARIA в HTML (якщо в ньому немає крайньої необхідності). Є широкий ряд семантичних HTML5 елементів з неявним значенням, схожих з чітко прописаними значеннями через ARIA.

По можливості необхідно використовувати семантичні елементи HTML замість ARIA атрибутів.

Не створюйте кнопку з допомогою div і ARIA ролі:

Click Me

Це неправильно. Потрібно використовувати тег button:

Click Me

2. Не міняйте значення семантичних елементів з допомогою ARIA ролей

«Не міняйте нативну семантику, якщо в цьому немає крайньої необхідності.»

Як я вже говорив, безліч семантичних HTML елементів мають неявно задані значення. Якщо ми використовуємо button, наприклад, то юзер агент розуміє, що це інтерактивний елемент (взаємодія відбувається через клік, клавішу enter або пробіл), запускає якусь взаємодію на сторінці. З іншого боку, якщо ми використовуємо тег , юзер агент зрозуміє, що взаємодія з цим елементом (клік або клавіша enter) приведе на іншу сторінку чи іншу частину сторінки.

Безліч елементів мають неявную семантику, яку не рекомендується змінювати з допомогою ARIA ролей.

Heading Button

Неправильний метод. Замість зміни семантики елемента потрібно використовувати відповідний тег:

Heading Button

Кращий спосіб. В крайньому випадку, можна застосувати ARIA роль елементу без значення.

Heading Button

3. Інтерактивні ARIA елементи повинні бути доступними у всіх сенсах

«Всі інтерактивні ARIA елементи повинні мати управління з клавіатури.»

ARIA роль на елементі не змінює його змісту. Якщо нам потрібно перетворити div у button, необхідно вручну додати можливості взаємодії, властиві button.

У посібнику до ARIA є список можливостей для кожного елемента. Наприклад, правильна кнопка повинна задовольняти наступним вимогам:

повинна натискатися курсором;

повинна натискатися за допомогою клавіші enter;

повинна натискатися з допомогою пропусків.

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

4. Використовуйте відповідні ролі для видимих елементів з фокусом

«Не використовуйте role=»presentation» або aria-hidden=»true» на видимих елементах з фокусом.»

ARIA атрибут role=»presentation» вказує, що елемент можна використовувати тільки у візуальних цілях, з ним можна взаємодіяти. Атрибут aria-hidden=»true» говорить, що елемент повинен бути невидимим.

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

Click Me
Click Me

Неправильний метод. Ці атрибути необхідно застосовувати до невидимих елементів, а також до елементів без взаємодії.

Don’t Click Me
Don’t Click Me

5. Інтерактивні елементи повинні мати доступні імена

«Всі інтерактивні елементи повинні мати доступні імена.»

Елементи, з якими можна взаємодіяти, наприклад, кнопки та посилання повинні мати доступні імена». Доступні імена визначаються властивістю accessible name у Accessibility API. Якщо значення валидное, значить, ім’я доступно.

Доступне ім’я елемента можна визначити, виходячи з його типу. Наприклад, инпуты форми зазвичай отримують доступне ім’я зв’язаного з ними лейблу label (див. додавання лейблів до елементів форм).

Username
Password

Інші елементи, наприклад, кнопки та посилання можуть отримати доступні імена з текстового контенту або атрибута label (див. HTML для скринридеров).