Що таке етикетка aria і як я повинен її використовувати?

321

Кілька годин тому я прочитав про атрибут aria-label , який:

Визначає значення рядка, яке позначає поточний елемент.

Але, на мою думку, саме цим titleатрибутом слід було займатися. Я заглянув далі в Мережу розробників Mozilla, щоб отримати кілька прикладів та пояснень, але єдине, що я знайшов, - це

<button aria-label="Close" onclick="myDialog.close()">X</button>

Що не дає мені жодної етикетки (тому я припускаю, що я неправильно зрозумів цю ідею). Я спробував це тут у jsfiddle .

Отже, моє запитання: навіщо мені це потрібно aria-labelі як я повинен його використовувати?

html assistive-technology

— Сальвадор Далі
джерело

3

Дивлячись на ресурсі ви пов'язані, здається , що aria-labelможе бути використано , якщо ви не хочете , щоб показати підказку , наданий атрибутом заголовка: В тих випадках , коли видима мітка або видима підказка небажана, автори можуть встановити доступне ім'я з елемент, що використовує арію-етикетку

— Фабріціо Кальдеран,

13

fyi ARIA = Доступні додатки для багатого Інтернету

— Ерік Д'Суза,

Хтось знає, чи доцільно використовувати aria-label для більш описового <h1> тексту, коли фактичний видимий текст усередині елемента <h1> занадто короткий, і не бажано, щоб весь текст був видимим? У прикладах у цій нитці мітка може бути використана. Але етикетки не застосовуються до заголовків, тому я прошу

— HelloWorld

Єдине відповідне подібне, про що ви просите, - це "longdesc" властивість (лише для зображень), якій потрібна додаткова інформація - не можу уявити, що буде текст для тексту, як це завжди має бути описовим у будь-якому випадку. - @HelloWorld

— Джеймі Патерсон

427

Це атрибут, розроблений, щоб допомогти допоміжної технології (наприклад, зчитувачі екрану) прикріпити мітку до анонімного HTML-елемента.

Отже, є <label>елемент:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

<label>Явно вказує користувачу ввести своє ім'я в inputполе де id="fmUserName".

aria-labelробить те ж саме, але це для тих випадків, коли не практично або бажано мати labelекран на екрані. Візьмемо приклад MDN :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

Більшість людей зможуть візуально зробити висновок, що ця кнопка закриє діалогове вікно. Сліпа людина, що використовує допоміжну технологію, може просто почути "X", прочитане вголос, що не означає багато без візуальних підказок. aria-labelявно повідомляє їм, що буде робити кнопка.

— Оллі Ходжсон
джерело

4

Дякую за пояснення, але як він почує близько? Що я можу зробити у своєму браузері (хром), щоб почути це? І як незрячий може вибрати цю кнопку, якщо він не має уявлення, де це?

— Сальвадор Далі

1

Я думаю, розширення типу ChromeVox було б гарним місцем для початку? Я ніколи цього не використовував. Вони працюють, читаючи екран вголос користувачеві, беручи підказки з HTML (наприклад, h1слід підкреслити більше, ніж a p, aце чітко , форма посилання " вказує десь для введення інформації, aria-*атрибути дають подальші підказки щодо того, що роблять елементи тощо) .

— Оллі Ходжсон

2

У цьому конкретному випадку я додав би його до заголовка attribute. Немає шкоди для показу підказки "побачити" користувачів, коли вони наведіть курсор на X.

— GolezTrol

3

Окрім ChromeVox, є NVDA . Обидва досить прості в установці та запуску і досить важко освоюються.

— ivarni

1

@SalvadorDali - лише для інформації. у мобільних сліпих може ввімкнути інструмент доступності, як для мобільних пристроїв Android, це TalkBack, а для iOS-телефонів - VoiceOver. використовуючи це, сторінка отримує читання за рядком.

— Rahul J. Rane

71

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

Якщо aria-label це єдиний інструмент, який використовується допоміжними технологіями (як, наприклад, зчитувачі екранів), він не підтримується у веб-переглядачах і не впливає на них. Це не допоможе більшості людей, на які спрямований WCAG (крім користувачів зчитувачів екрану), наприклад, особам з порушеннями інтелекту.

"X" недостатньо, щоб дати інформацію про дії, керовані кнопкою (подумайте про когось, що не має комп'ютерних знань). Це може означати "закрити", "видалити", "скасувати", "зменшити", дивний хрест, каракулі, нічого.

Незважаючи на те, що W3C, здається, рекламує aria-labelскоріше, що titleатрибут тут: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 у подібному прикладі, ви можете бачити, що технологія підтримка не включає стандартні браузери: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

Насправді aria-labelв цій точній ситуації можна використовувати більше контексту для дії:

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

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>

— Адам
джерело

35

Якщо ви хочете дізнатися, як aria-labelвам практично допомагає .. то виконайте кроки ... ви отримаєте це самостійно ..

Створіть сторінку html, що має код нижче

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

Тепер вам потрібен емулятор зчитування віртуальних екранів, який буде працювати в браузері, щоб помітити різницю. Таким чином, користувачі браузера Chrome можуть встановлювати розширення chromevox, а користувачі mozilla можуть додавати додаток для читання екранів із іклами

Закінчивши встановлення, покладіть навушники у вуха, відкрийте сторінку html та зробіть фокус на обох кнопках (натисканням на вкладку) по одному .. і ви зможете почути .. фокусування на first x button.. скаже вам лише x button.. але у випадку second x button.. ви почуєтеback to the page button лише ..

Я сподіваюся, що ви це добре отримали зараз !!

— Муміт
джерело

1

Важливим моментом є те, що titleатрибут ігнорується навіть на першій кнопці. Більше інформації: silktide.com/…

— Sphinxxx

2

Це все-таки так? Ще краще надати або title і aria-label ?

— Камафезер

2

Це саме те, що я хотів. Мені просто хотілося побачити і почути, як це працює в реальному світі і чи chromevoxпрацює як принадність, і буду читати поля, позначені арією. Дякую.

— Радж Раджешвар Сінгх Ратхор

7

Необхідна умова:

Aria використовується для покращення користувацького досвіду користувачів із вадами зору. Користувачі з вадами зору орієнтуються через програми, використовуючи програмне забезпечення для зчитування екрана, наприклад, JAWS, NVDA, .. Під час навігації за допомогою програми програмне забезпечення для читання екрана оголошує вміст для користувачів. Aria можна використовувати для додавання вмісту в код, який допомагає користувачам екранного читача зрозуміти роль, стан, мітку та призначення елемента керування

Арія візуально нічого не змінює. (Арія теж боїться дизайнерів).

aria-label

атрибут aria-label використовується для передачі мітки користувачам читачів екрана. Зазвичай поле пошуку не має візуальної мітки (завдяки дизайнерам). aria-label можна використовувати для передачі мітки управління користувачам зчитувача екрану

Як користуватись:

<input type="edit" aria-label="search" placeholder="search">

Візуальних змін у застосуванні немає. Але читачі екрану можуть зрозуміти мету управління

aria-labelbedby

Для передачі етикетки використовується як aria-label, так і aria-labelledby. Але aria-labelledby може використовуватися для посилання на будь-яку мітку, яка вже є на сторінці, тоді як aria-label використовується для передачі мітки, яку я не відображається візуально

Підхід 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Підхід 2:

aria-labelledby також можна використовувати для комбінування двох міток для користувачів зчитувачів екрана

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

— ndioewbnc
джерело

3

titleАтрибут відображає підказку , коли миша ширяє елемент. Хоча це чудове доповнення, воно не допомагає людям, які не можуть користуватися мишею (через порушення мобільності) або людям, які не бачать цієї підказки (наприклад, людям з вадами зору або людям, які використовують зчитувач екрана).

Таким чином, розумним підходом було б обслуговувати всіх користувачів. Я додав би titleі aria-labelатрибути (які обслуговують різні типи користувачів та різні типи використання Інтернету).

Ось гарна стаття, яка пояснює aria-label поглиблено

— lucalanca
джерело