Что это за атрибуты: `aria-labelledby` и` aria-hidden`

Используя Bootstrap, я часто видел эти ariaатрибуты, но никогда не знал, как их использовать.

Кто-нибудь знает, в каких случаях использовать эти атрибуты? Я гуглил - просто не нашел простых ответов.

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

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

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

aria-labelledby: Определяет элемент (или элементы), который маркирует текущий элемент.

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

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

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

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

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

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

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