Что такое ария и как ее использовать?

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

В приведенном вами примере вы совершенно правы, вы должны установить атрибут 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>

Ответ 3

Если вы хотите знать, как 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..

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

Ответ 4

Предпосылка:

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">

Ответ 5

Атрибут title отображает всплывающую подсказку, когда мышь наводит курсор на элемент. Хотя это отличное дополнение, оно не помогает людям, которые не могут пользоваться мышью (из-за ограничений мобильности), или людям, которые не видят эту подсказку (например, людям с нарушениями зрения или людям, использующим программу чтения с экрана).

Таким образом, внимательный подход здесь будет обслуживать всех пользователей. Я бы добавил атрибуты title и aria-label (для разных типов пользователей и разных типов использования сети).

Вот хорошая статья, которая подробно объясняет aria-label