Что такое ария и как ее использовать?
Несколько часов назад я прочитал об атрибуте 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
