Ответы:
Атрибут 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">