Каковы эти атрибуты: `aria-labelledby` и` aria-hidden`

Ответ 1

HTML5 ARIA - это то, что вы ищете. Он может использоваться в вашем коде даже без начальной загрузки.

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

Чтобы быть точным для вашего вопроса, вот что ваши атрибуты называются состояниями ARIA и моделью

aria-labelledby. Идентифицирует элемент (или элементы), который маркирует текущий элемент.

aria-hidden (state): указывает, что элемент и все его потомки не отображаются или не воспринимаются каким-либо пользователем, как реализовано автор.

Ответ 2

Основными потребителями этих свойств являются пользовательские агенты, такие как считыватели экрана для слепых. Таким образом, в случае с модальным бутстрапом модальный div имеет role="dialog". Когда читатель экрана заметит, что a div становится видимым, у которого есть эта роль, он будет говорить на этикетке для этого div.

Существует много способов маркировки вещей (и нескольких новых с ARIA), но в некоторых случаях целесообразно использовать существующий элемент как метку (семантику) без использования тега <label> HTML. С HTML-модалами метка обычно представляет собой заголовок <h>. Таким образом, в модальном случае Bootstrap вы добавляете aria-labelledby=[IDofModalHeader], и программа чтения с экрана будет говорить об этом заголовке, когда появится модальный текст.

Вообще говоря, программа чтения с экрана будет замечать, когда элементы DOM становятся видимыми или невидимыми, поэтому свойство aria-hidden часто избыточно и, вероятно, может быть пропущено в большинстве случаев.

Ответ 3

aria-hidden="true" будет скрывать декоративные элементы, такие как значки глификона, от экранных читателей, которые не имеют значимого произношения, чтобы не создавать путаницы. Хорошая вещь - дело хорошей практики.

Ответ 4

ARIA не изменяет функциональность, она только изменяет представленные роли/свойства пользователям экрана. Панель инструментов WebAIMs WAVE определяет роли ARIA на странице.

Ответ 5

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

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

ария-скрытый:

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

Атрибут aria-hidden используется со значениями true, false.

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

<i class = "fa fa-books" aria-hidden = "true"></i>

Использование aria-hidden = "true" в <i> скрывает контент для пользователей программы чтения с экрана без визуальных изменений в приложении.

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

Атрибут 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">

aria-labelledby также может использоваться для объединения двух меток для пользователей программ чтения с экрана

Подход 2:

<span id = "de"> Billing Address </span>

<span id = "sd"> First Name </span>

<input type = "text" aria-labelledby = "de sd">