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

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

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

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

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

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