Як ефективно працювати з ARIA в HTML5

26

Від автора: ARIA розшифровується як «Accessible Rich Internet Applications» і допомагає зробити ваш сайт більш доступним для людей з обмеженими можливостями, такими як слух або порушення зору. Давайте розберемося як ми, розробники можемо полегшити життя за допомогою цього інструменту.

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

Ролі ARIA

ARIA ролі додаються до розмітку як атрибути. З їх допомогою задається тип елемента і його призначення. Код нижче задає елемент як банер:

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

This website was built by Georgie.

А попередження буде виглядати так:

Please upgrade to the latest version of your browser for the best experience.

Наступний приклад мій улюблений, він використовується тільки в тому випадку, коли елемент потрібен тільки для презентації. Якщо уявити, що хтось зайшов на сайт через який-небудь скрін рідер, подумайте про елементах, які користувачі не захочуть читати. Один приклад, це коли елемент може містити в собі тільки візуальну декорацію чого-небудь або він просто порожній із зображенням або фоновим кольором.

ARIA атрибути

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

Значення станів пов’язано зі зміною результату інтерфейсу взаємодії.

Значення властивості майже не змінюються.

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

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

Address

Можна зробити те ж саме з figure.

Як ефективно працювати з ARIA в HTML5
We saw the opera Barber of Seville here!

На W3C можна докладно прочитати про підтримуваних станах і властивостях.

Правила ARIA

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

Використовуйте семантичні елементи HTML скрізь де можливо

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

. Зараз же ми можемо замінити звичайний div на nav, і більше не потрібно додавати атрибут role=»navigation», так як він вже неявно вказано. Перевірити, чи потрібен конкретного тегу ARIA атрибут або немає, можна W3C таблиці.

В одного тега тільки одна роль

Один тег не повинен містити кілька ARIA ролей. Визначення role: «Основний індикатор типу. Дана семантична асоціація дозволяє інструментів представляти і підтримувати взаємодію з об’єктом таким чином, щоб взаємодія відповідало очікуванням користувача від роботи з іншими об’єктами цього типу.»

HTML елемент не може мати дві ролі. Всі ролі тим чи іншим чином мають семантичне значення, і слідуючи з визначення вище, тег не може бути двох типів одного об’єкту одночасно. Ви можете зробити одночасно кнопку і заголовок? Ні, це буде або одне, або інше. Вибирайте ролі так, щоб вони найкращим чином описували функцію вашого елемента.

Не змінюйте вбудовану семантику

До семантичних тегам не потрібно застосовувати додатковий атрибут role, так як він переписує рідну семантику тега. Наприклад:

Друге правило застосування ARIA свідчить, що якщо необхідно, то потрібно використовувати вкладений HTML елемент.

Purchase this e-book

Використовуйте якомога більше семантичних елементів

Якщо подумати про завданнях того, що ви створюєте, то можна зрозуміти, які елементи краще підійдуть замість div та span. Це приходить з часом. Для практики можна звертатися до what elements are available. Один з моїх улюблених прикладів це blockquote, про який часто забувають. Є схожі теги, які виконують ті ж завдання:

q – використовується для рядковий цитат. Пряма цитата когось всередині параграфа тексту.

cite – використовується для цитування назв творчих робіт в тексті, наприклад, віршів.

Приклад використання двох обох тегів:

In The Love Song of J. Alfred Prufock by T. S. Eliot, the clinical imagery of the line Like a patient etherized upon a table suggests themes of loneliness.

Існує безліч тегів, про які ви, можливо, і не знаєте, серед яких є і частина нових. Так що переконайтеся, що ви знаєте їх можливості!

Атрибут alt

Про даний атрибут дуже часто забувають, а він може надати найбільший вплив на доступність розмітки, особливо для скрін рідерів. Він з’явився в HTML2 і описувався так: «Текст, який замінює зображення, наприклад, з-за помилок обробки чи уподобань користувача.»

З-за помилок обробки чи уподобань користувача. Незалежно від проблем із завантаженням зображення («помилка обробки»), у користувачів з порушеним зором немає і переваг. У них просто від природи проблеми з переглядом зображення. У визначенні нічого не говориться про доступність. Там сказано, що зображення може не завантажитися, як годиться, і користувачу надається можливість відключити завантаження зображень взагалі. Хоча ми з вами і живемо в світі, де останнім дуже складно повірити, ми все ж не знаємо, що на іншому кінці дроту займається користувач. Тому необхідно надати користувачеві інші варіанти.

Люди часто пишуть у тегу alt світлини з їх собакою, що грає в парку «собака», до прикладу. Але, на жаль, такий текст не відображає візуальне представлення зображення для слбовидящих. Приклад нижче набагато доступніше:

Як ефективно працювати з ARIA в HTML5

Зверніть увагу, що атрибут alt не виконує ті ж завдання, що і figcaption – завдання alt надати альтернативний текст зображення, а figcaption – підпис до малюнка. Для того ж прикладу можна додати такий підпис:

Isn’t Bobby cute?

Приклад семантичного HTML і ARIA, звертаємо увагу на доступність

Якщо поглянути на приклад, який я показував вище в статті, то можна помітити, що в прикладі:

використовується семантичний HTML для зображення і його підпису

використовується відповідний тег cite

додається відповідний текст alt

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

Як ефективно працювати з ARIA в HTML5
We saw the opera Barber of Seville here!

Висновок

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