9.7: WAI-ARIA- Ініціатива доступності Web - Доступні багаті Інтернет-додатки

WAI-ARIA - це, мабуть, найбільш значуща технологія веб-доступності, яка з'явилася з моменту впровадження WCAG 1.0. Це дозволяє розробникам веб-додатків або користувальницької веб-інтерактивності визначати конкретні ролі, стани та властивості для користувальницьких взаємодій, які допоміжні технології здатні зрозуміти. Хоча WAI-ARIA орієнтована насамперед на розробників, інші повинні хоча б розуміти, де і коли вона звикає.

WAI-ARIA - це специфікація W3C, яка визначає набір атрибутів, які можуть бути використані в елементах HTML для додавання семантичної інформації. Наприклад, розробник може захотіти створити навігаційне меню, часто використовуючи розмітку списку HTML для структурування пунктів меню та JavaScript, щоб контролювати, які елементи меню відображати в будь-який момент часу. Без використання WAI-ARIA таке меню може бути доступним в тому сенсі, що користувач AT міг переміщатися по його елементам і відкривати пункти меню, але вони будуть оголошені АТ як набір вкладених списків. Додавши ролі меню ARIA до цих елементів списку, AT оголосить їх як частини меню, незалежно від того, відкриті вони чи закриті, чи є у них підміню тощо.

Під час аудиту користувацької веб-інтерактивності, програма для читання з екрана, наприклад ChromeVox, повинна використовуватися для навігації інструментом або віджетом, щоб визначити, чи використовувався WAI-ARIA для додавання ролей, станів та властивостей до функції. Ви також можете вивчити код за допомогою інструмента Inspect в різних браузерах, щоб побачити, що ARIA використовується для роботи з інструментом і спостерігати динамічне оновлення ARIA, як стан і властивості змінюються. У аудиторських звітах можна давати рекомендації щодо використання ARIA, щоб зробити елементи більш значущими, тим самим більш корисними для користувачів AT. Зверніться до Рекомендації 4.1.2 (рівень А).

Повна специфікація WAI-ARIA і WAI-ARIA авторські практики можна знайти на веб-сайті W3C. Принаймні скануйте ці документи, щоб ознайомитися з їх змістом, щоб ви могли повернутися до них у своїх перевірках під час надання рекомендацій, пов'язаних з ARIA.

Інструментарій: додайте ці два документи в закладки, щоб додати їх до свого набору інструментів.

• Доступні багаті Інтернет-додатки (WAI-ARIA 1.1)
• WAI-ARIA Авторські практики

WAI-ARIA в дії

Нижче наведено HTML-уривок з великого головного меню навігації, яке було відзначено WAI-ARIA. Розмітка містить основні атрибути ARIA, які використовуються для створення основного меню, що використовується в AT. Прочитайте коментарі у полі нижче та вивчіть розмітку, яку вона описує, щоб розвинути розуміння того, як використовується WIA-ARIA.

Технічні: Приклад головного меню, створеного з HTML невпорядкованою розміткою списку.

Перший рядок розмітки нижче створює контейнер навколо меню, надає йому роль навігації, описується текстом у елементі menu_keys span нижче, на який посилається за допомогою aria-describedby, і робиться клавіатура фокусується за допомогою tabindex="0". При доступі за допомогою екранного зчитувача він оголошує себе як навігацію та описує користувачеві, як переміщатися по меню.

<div role="navigation" aria-describedby="menu_keys" tabindex="0">
<span id="menu_keys" style="font-size:0;">
 Main Menu: Use arrow keys to move left and right and 
 up and down through menus
</span>

Саме меню є основним вкладеним невпорядкованим списком. JavaScript впроваджує ARIA динамічно. URL-адресам надається роль панелі меню, елементам списку надається роль menuitem. Якщо виникає вкладений список (який є підміню) aria-haspopout встановлюється у значення true, щоб вказати читачеві з екрана, що є підменю. Для aria-activeDescendent встановлюється ідентифікатор батьківського елемента підменю, який наразі має фокус.

<ul id="nav" role="menubar" aria-describedby="menukeys">
<li role="menuitem">Home </li>
<li id="activeItem" role="menuitem" aria-haspopout="true">
  Courses and Programs
  <ul role="menubar" aria-activedescendant="activeItem">
	<li role="menuitem" aria-haspopout="true">Areas of Interest
	  <ul>
            <li role="menuitem">Information Technology</li>
		<li role="menuitem">Communication and Media</li>
		<li role="menuitem">Business Systems and Strategies</li>
		…
	 </ul>
	</li>
   …
  </ul>
</li>
…
</ul>
</div>

Щоб побачити меню в дії, перегляньте наступне відео. Уважно слухайте, як меню оголошує ChromeVox.

Відео: Головна навігація WIA-ARIA

Елемент YouTube був виключений з цієї версії тексту. Ви можете переглянути його онлайн тут: https://pressbooks.library.ryerson.ca/pwaa/?p=1512

Меню у відео вище використовує доступні сценарії меню MooTools для введення відповідних атрибутів ARIA, коли вони потрібні. На щастя, багато поширених взаємодій, таких як меню, акордеони та панелі вкладок, наприклад, мають скрипти з відкритим кодом, доступні для швидкого додавання у відповідну ARIA.

Інструментарій: Закладка з відкритим вихідним кодом WAI-ARIA Приклади, які використовуються в семінарах ARIA для розробників в Університеті Райерсона. Ці приклади можна посилатися під час надання рекомендацій, де ARIA потрібна для аудиту доступності веб-сторінок.

Коли використовувати ARIA

Хоча ARIA є необхідністю для розробників, які створюють власну інтерактивність для Інтернету, бувають випадки, коли вона повинна і не повинна використовуватися.

Чи використовують ARIA:

• Коли HTML використовується нестандартним способом (наприклад, роблячи прапорець з div)
• Коли потрібна навігація по сторінках (використовуйте орієнтири ARIA)
• При створенні веб-віджетів, таких як повзунки, Datepickers, спливаючі підказки, панелі вкладок, акордеони тощо.

Не використовуйте ARIA:

• Коли є спосіб створити таку ж інтерактивність за допомогою стандартного HTML
• Коли HTML використовується стандартним способом (наприклад, HTML-форма не потребує ролі = «форма» додається, оскільки вона має цю роль за замовчуванням)

Основні атрибути ARIA

Технічні: Ось деякі атрибути WAI-ARIA, які використовуються часто і відносно легко зрозуміти.

арія - описується

Цей атрибут дуже корисний для додавання інструкцій або описів веб-елементів для користувачів AT. У наведеному вище прикладі меню aria-describedby використовується для надання інструкцій щодо використання меню, у цьому випадку посилання на прихований елемент span, що містить опис навігації за допомогою клавіатури.

Він також може бути використаний для надання додаткової інформації про певну функцію, наприклад, опису формату поля форми пароля. Якщо пароль повинен містити цифри, літери та спеціальні символи, цей текст може розташовуватися після поля пароля в елементі span та через його атрибут ID, на який посилається за допомогою aria-describedby у елементі введення поля пароля. З прикладом розмітки нижче, програма читання з екрана оголосить мітку для поля пароля, а потім формат для пароля. Без посилання на елемент span format ця інформація може залишитися непоміченою користувачами AT.

<label for="pass">Password</label>
<input type="password" id="pass" aria-describedby="format">
<span id="format">
 must contain numbers, letters, and special characters
</span>

aria-live проти оповіщення ролі

Атрибут aria-live, який часто називають живим регіоном, повинен використовуватися в місцях, де інформація динамічно оновлюється на сторінці, без перезавантаження самої сторінки. В іншому випадку користувачі AT навряд чи помітять, що відбуваються зміни. Атрибут aria-live можна встановити на «ввічливий», як показано у фрагменті коду нижче, і в цьому випадку програма читання з екрана буде чекати перерви у виході екрана для читання вмісту. Або aria-live може бути встановлений на «напористий», і в цьому випадку читач з екрана буде перервати все, що читається, щоб прочитати зміни в реальному регіоні. Живі регіони корисні для таких речей, як новинні канали (наприклад, Twitter або новинні сайти), програми чату в прямому ефірі, потоки соціальних медіа, обертові банери або інші види автоматичного оновлення інформації.

<div id="news_feed" aria-live="polite">
 //updating content goes here
</div>

З іншого боку, атрибут role="alert», який часто називають попередженням ARIA, є особливим типом напористої живої області, який слід використовувати в місцях, де подається зворотній зв'язок. Якщо, наприклад, обов'язкове поле у формі залишилося порожнім, а відразу під полем вводиться повідомлення про помилку для позначення помилки (як це в фрагменті коду нижче), ці типи повідомлень зворотного зв'язку є хорошими кандидатами для оповіщень ARIA. В іншому випадку такі повідомлення можуть залишитися непоміченими користувачами AT. Або, після успішного подання форми для реєстрації, наприклад, повідомлення, яке з'являється на сторінці після надсилання форми із зазначенням успішної реєстрації, також буде хорошим кандидатом на попередження ARIA.

<div id="username_feedback" role="alert">
 <p style="color:red;">Username field cannot be empty.</p>
</div>

ролі та орієнтири

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

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

Якщо використовуються орієнтири, всі області сторінки повинні міститися в межах цільового регіону. Ці регіони, введені ще в розділі 2 (2.4.1 Забезпечити способи навігації), знову представлені тут:

Повний список знакових ролей:

• банер: пов'язаний з областю заголовка сторінки. На сторінці повинен бути лише один орієнтир банера.
• комплементарний: Розділ вмісту, який доповнює основний вміст, але також зберігає своє значення при відокремленні від основного змісту. Часто використовується з регіоном, що містить рекламу або промо-елементи, вирівняні по правій частині сторінки. Там може бути кілька областей, визначених як взаємодоповнюючі.
• contentinfo: Містить вміст, який зазвичай знаходиться у нижньому колонтитулі сторінки, як-от заяви про авторські права та конфіденційність. На сторінці повинен бути лише один орієнтир вмісту.
• форма: Містить елементи введення форми, які можуть бути відредаговані і відправлені користувачем. Кілька елементів можуть мати роль форми.
• Головна: Основний зміст сторінки. На сторінці повинен бути лише один основний орієнтир.
• навігація: сукупність навігаційних посилань, що використовуються для навігації по сайту або сторінці. З рольовою навігацією може бути кілька елементів.
• пошук: інструмент пошуку.
• застосування: являє собою унікальний функціональний блок, і команди клавіатури обробляються додатком, а не браузером або самою допоміжною технологією. Вбудований програвач фільмів, віджет календаря або інше спеціальне програмне забезпечення, вбудоване у веб-вміст, є прикладами, де може бути використана роль програми. Цю роль слід використовувати економно, оскільки це може створити певну плутанину для користувачів екранного читання, коли ключові команди починають працювати по-іншому.

табуіндекс

Хоча атрибут HTML tabindex існує з HTML4, для використання з конкретними елементами HTML, з HTML5 він може бути використаний з будь-яким елементом для додавання фокусу клавіатури до елементів, які зазвичай не отримують фокус, використовуючи tabindex="0".

У коді для меню вище ви помітите tabindex у відкриваючому елементі div. Зазвичай divs не отримують фокусування клавіатури. У випадку з меню, додавання фокусу до контейнера div потрібно для читання опису, на який посилається aria-describedby. Коли div отримає фокус, програма читання екрана оголосить «Головне меню: використовуйте клавіші зі стрілками для переміщення вліво і вправо і вгору і вниз по меню».

арія розширена

Розгорнутий арією стан використовується для меню, у яких є перемикачі для відкриття та закриття підменю, а також для інформування користувачів AT, чи має пункт меню підменю, і чи відкрито це підменю чи ні.

Наступна розмітка знаходиться з бічного меню, з перемиканнями для відкриття та закриття розділів меню. Ви помітите, що aria-expanded встановлено значення true, що вказує на AT, що після цього елемента відкрито підменю. Якщо підменю було закрито, aria-expanded буде встановлено на false, динамічно оновлюється JavaScript, який керує інтерактивністю бічного меню.

<span id="acc_tab_2170"
 class="navtoggler active"
 tabindex="0"
 aria-expanded="true"
 role="tab"
 aria-selected="false">
 Archived Calendars
</span>

арія етикетка

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

Хорошим прикладом випадку, коли може використовуватися aria-label, є пошукова форма. Ці форми зазвичай не включають елемент етикетки.

<form>
 <input type="text" id="search" aria-label="Enter search terms" />
</form>

aria - позначений

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

Розглянемо наступну таблицю, в якій вміст комірок заголовка містить мітки для кожного поля введення форми в стовпці нижче. У розмітці, яка слідує за малюнком, ви можете побачити, як aria-labelledby використовувався для присвоєння значень у комірках заголовка як міток для кожного елемента форми.

Ім'я	Електронна пошта	Увійти
Джон Сміт	[e-mail]	коваль

Малюнок: Таблиця, яка використовується для компонування форми введення даних.

<table>
 <tr>
   <th id="name_label">Name</th>
   <th id="email_label">Email</th>
   <th id="login_label">Login</th>
 </tr>
 <tr>
   <td><input type="text" id="name" aria-labelledby="name_label"/></td>
   <td><input type="text" id="email" aria-labelledby="email_label"/></td>
   <td><input type="text" id="loginl" aria-labelledby="login_label"/></td>
 </tr>
…
</table>

Якщо є можливість використовувати елемент label над використанням aria-labelledby, тоді слід використовувати label. Якщо для одного елемента введення використовуються і label, і aria-labelledby, aria-labelledby перевизначає мітку.