Ефективне використання aria в html5

Попередня ◈ Наступна

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

Один із способів використання цього стандарту - додавання ARIA в розмітку HTML. Ви напевно знайомі з семантичними елементами HTML такими як nav. button або header. Легко зрозуміти, для чого можна використовувати ці елементи. Вони дають більше сенсу вмісту сторінки і ми можемо використовувати комбінацію цих елементів і ARIA в розмітці. Однак для спільного їх використання варто враховувати кілька речей.

Ролі ARIA додаються в розмітку HTML як атрибути. Вони визначають тип елемента і вказують мету, якої він служить. У наступному прикладі елемент ідентифікується як банер:

Ще один приклад: тут роль повідомляє відомості про те, що елемент містить інформацію про вміст сторінки.

Оповіщення буде виглядати так:

role = "alert" повноцінно працює з елементами, динамічно додаються в DOM або при зміні відображення, наприклад, з display: none to display: block

Елементи span (як і div) в більшості випадків не потребують надання role = "presentation", так як не є об'єктами в дереві доступності браузера (accessibility tree). Але для семантичних елементів типу h1 - h6 це має сенс.

атрибути ARIA

Атрибути ARIA трохи відрізняються від ролей ARIA. Вони також додаються в розмітку, але існує вже певний діапазон атрибутів ARIA. Всі атрибути використовують префікс aria- і діляться на дві групи: стану і властивості.

  • Значення атрибутів-станів змінюються в результаті взаємодії з користувачем.
  • Значення атрибутів-властивостей, як правило, залишаються незмінні.

Приклад ARIA атрибута-стану це aria-checked. використовуваний в таких елементах як чекбокси і радиокнопки.

Насправді використання атрибута ARIA в нативної радіо-кнопці зайве, зв'язування input type = "radio" і aria-checked проводиться автоматично.

Зразок атрибута-властивості це aria-label. Цей атрибут використовується, коли мітка елемента форми не видима на сторінка (це може бути продиктовано дизайном або просто не матиме сенсу). Для випадків, коли текст мітки бачимо, підходить атрибут aria-labelledby. Він використовується також як і попередній, значення цього атрибута збігається зі значення id мітки.

Це також можна зробити в елементі figure.

Правила ARIA

Перш ніж кидатися в атаку, запам'ятайте, що з кількох причин не варто додавати ARIA до кожного елементу.

Намагайтеся максимально використовувати семантичні елементи HTML

Семантика ARIA за замовчуванням посилається на семантику, яка застосовується до елементів в браузері. Такі елементи як nav. article і button мають уже закладеними ролями role = "navigation". role = "article" і role = "button" відповідно. До появи семантичних елементів HTML було поширена розмітка по типу

Попередня ◈ Наступна