Что такое aria-label и как мне его использовать?

322

Несколько часов назад я прочитал об атрибуте aria-label , который:

Определяет строковое значение, которое маркирует текущий элемент.

Но, по моему мнению, это то, что titleатрибут должен был делать. Я посмотрел дальше в Mozilla Developer Network, чтобы получить некоторые примеры и объяснения, но единственное, что я нашел, было

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

Который не дает мне никакого ярлыка (поэтому я предполагаю, что неправильно понял идею). Я попробовал это здесь, в jsfiddle .

Итак, мой вопрос: зачем мне это aria-labelи как мне его использовать?

html assistive-technology

— Сальвадор Дали
источник

3

Глядя на ресурс, который вы связали, кажется, что aria-labelего можно использовать, если вы не хотите показывать всплывающую подсказку, предоставляемую атрибутом title: В тех случаях, когда видимая метка или видимая подсказка нежелательны, авторы МОГУТ установить доступное имя элемент с использованием 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>`

Большинство людей смогут визуально сделать вывод, что эта кнопка закроет диалог. Слепой человек, использующий вспомогательные технологии, может просто услышать, как «Х» читается вслух, что мало что значит без визуальных подсказок. aria-labelявно говорит им, что будет делать кнопка.

— Олли ходжсон
источник

4

Спасибо за объяснение, но как он услышит близко? Что я могу сделать в своем браузере (Chrome), чтобы услышать это? И как слепой человек может выбрать эту кнопку, если он не знает, где она находится?

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

1

Я думаю, что расширение как ChromeVox будет хорошим началом? Я никогда не использовал это все же. Они работают, читая экран вслух для пользователя, принимая подсказки из HTML (например, h1следует подчеркнуть больше, чем a p, aясно, что , форма ссылки` указывает где-то для ввода информации, aria-*атрибуты дают дополнительные ключи к тому, что делают элементы и т. Д.) ,

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

2

В этом конкретном случае я бы добавил его в заголовок attribute. Нет вреда в отображении всплывающей подсказки, чтобы «видеть» пользователей, когда они

— наводят

3

В дополнение к ChromeVox есть NVDA . Оба довольно просты в установке и запуске и довольно сложны в освоении.

— ivarni

1

@SalvadorDali - только для информации. в мобильном слепом человеке может включить инструмент доступности, как для мобильных Android, это TalkBack, а для мобильных телефонов iOS это VoiceOver. с помощью этой страницы страница читается построчно.

— Рахул Дж. Рэйн

71

В приведенном вами примере вы совершенно правы, вам нужно установить атрибут title.

Если aria-labelэто инструмент, используемый вспомогательными технологиями (например, программами чтения с экрана), он не поддерживается в браузерах и не оказывает на них никакого влияния. Это не окажет никакой помощи большинству людей, на которых ориентируется WCAG (кроме пользователей программ чтения с экрана), например, людям с ограниченными интеллектуальными возможностями.

Буква «Х» не является достаточной для предоставления информации о действии, выполняемом кнопкой (подумайте о человеке, не имеющем компьютерных знаний). Это может означать «закрыть», «удалить», «отменить», «уменьшить», странный крест, каракули, ничего.

Несмотря на то, что 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>

Теперь вам нужен эмулятор чтения с виртуального экрана, который будет запускаться в браузере, чтобы увидеть разницу. Таким образом, хромовые пользователи браузера могут установить ChromeVox расширение и пользователи Mozilla может идти с клыками экраном читателя AddIn

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

Я надеюсь, что вы получили это хорошо сейчас !!

— Moumit
источник

1

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

— Sphinxxx

2

Это все еще так? Еще лучше , чтобы обеспечить либо title и aria-label ?

— Kamafeather

2

Это именно то, что я хотел. Я просто хотел увидеть и услышать, как это работает в реальном мире и chromevoxработает как очарование и будет читать поля, помеченные арией. Спасибо.

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

7

Необходимое условие:

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

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

ария-этикетка

Атрибут aria-label используется для передачи метки пользователям программы чтения с экрана. Обычно в поле ввода поиска отсутствует визуальная метка (спасибо дизайнерам). aria-label может использоваться для передачи метки управления пользователям программы чтения с экрана

Как пользоваться:

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

В приложении нет визуальных изменений. Но программы чтения с экрана могут понять цель управления

ария-labelledby

Как 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
источник