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

142

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

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

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

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

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

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

  • 2
    Глядя на ресурс, который вы связали, кажется, что aria-label может использоваться, если вы не хотите показывать всплывающую подсказку, предоставляемую атрибутом title: В тех случаях, когда видимая метка или видимая подсказка нежелательны, авторы МОГУТ устанавливать доступные имя элемента с использованием aria-label
  • 5
    FYI ARIA = Доступные многофункциональные интернет-приложения
Показать ещё 1 комментарий
Теги:
assistive-technology

3 ответа

179
Лучший ответ

Это атрибут, предназначенный для помощи вспомогательных технологий (например, экранных считывателей), прикрепляет ярлык к анонимному 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 явно сообщает им, что будет делать кнопка.

Поделиться
  • 3
    Спасибо за объяснение, но как он услышит близко? Что я могу сделать в своем браузере (Chrome), чтобы услышать это? И как слепой человек может выбрать эту кнопку, если он не знает, где она находится?
  • 1
    Я думаю, что расширение как ChromeVox было бы хорошим началом? Я никогда не использовал это все же. Они работают, читая экран вслух пользователю, принимая подсказки из HTML (например, h1 должен быть выделен больше, чем p , a - это явно ссылка , форма` указывает куда-то для ввода информации, aria-* дают дополнительные подсказки что делают элементы и т. д.).
Показать ещё 4 комментария
21

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

Если 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>
Поделиться
8

Если вы хотите знать, как 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 могут перейти с читатель экрана fangs addin

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

Надеюсь, теперь у вас получилось хорошо!

Поделиться
  • 1
    Важным моментом является то, что атрибут title игнорируется даже при первой кнопке. Больше информации: silktide.com/…
  • 2
    Это все еще так? Еще лучше предоставить title или aria-label ?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню