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

Question

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

несколько часов назад я читал о aria-label

2474 3

html5 assistive-technology

3 ответов:

Comments

Ничего не найдено.

Olly Hodgson · Accepted Answer · 2014-02-26 13:50:15

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

тут <label> элемент:
<label for="fmUserName">Your name</label>
<input id="fmUserName">
The <label> явно указывает пользователю ввести свое имя в

Adam · Accepted Answer · 2018-01-17 05:07:00

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

Moumit · Accepted Answer · 2016-05-30 16:29:55

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

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

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