Відповіді:
Атрибут HTML5 ARIA - це те, що ви шукаєте. Він може бути використаний у вашому коді навіть без завантажувальної програми.
Доступні додатки для багатого доступу до Інтернету (ARIA) визначають способи зробити веб-контент та веб-додатки (особливо ті, розроблені за допомогою Ajax та JavaScript) більш доступними для людей з обмеженими можливостями.
Щоб бути точним для вашого питання, ось, що ваші атрибути називаються станами та моделлю атрибутів ARIA
aria-labelledby: Ідентифікує елемент (або елементи), який мітить поточний елемент.
aria-hidden (state): Вказує на те, що елемент та всі його нащадки не видно або сприймаються користувачем, як реалізовано автором.
Основними споживачами цих властивостей є користувацькі агенти, такі як зчитувачі екрана для незрячих людей. Так що у випадку з Bootstrap модальним divє role="dialog". Коли екранний зчитувач помітить, що зображення divстає видимим, яке виконує цю роль, він промовить мітку для цього div.
Існує маса способів позначення речей (і декількох нових за допомогою ARIA), але в деяких випадках доцільно використовувати наявний елемент як мітку (семантичний), не використовуючи <label>тег HTML. За допомогою модалів HTML мітка зазвичай є <h>заголовком. Таким чином, у модальному випадку Bootstrap ви додасте aria-labelledby=[IDofModalHeader], і зчитувач екрана заговорить цей заголовок, коли з'явиться модальний.
Взагалі, зчитувач екрана помічає кожного разу, коли елементи DOM стають видимими чи невидимими, тому aria-hiddenвластивість часто є надмірною і, ймовірно, може бути пропущено у більшості випадків.
aria-hidden="true"приховає декоративні елементи, такі як піктограми гліфікону, від читачів екрану, які не мають змістовної вимови, щоб не викликати плутанини. Це приємно робити, як справа належної практики.
ARIA не змінює функціональність, вона лише змінює представлені ролі / властивості користувачам зчитувача екрану. Панель інструментів WAVE WebAIM визначає ролі ARIA на сторінці.
Aria використовується для покращення користувацького досвіду користувачів із вадами зору. Користувачі з вадами зору орієнтуються через програми, використовуючи програмне забезпечення для зчитування екрана, наприклад, JAWS, NVDA, .. Під час навігації через додаток програмне забезпечення для читання екрана оголошує вміст для користувачів. Aria можна використовувати для додавання вмісту в код, який допомагає користувачам екранного читача зрозуміти роль, стан, мітку та призначення елемента керування
Арія візуально нічого не змінює. (Арія теж боїться дизайнерів).
прихована арія:
Атрибут aria-hidden використовується для приховування вмісту для користувачів із вадами зору, які переходять через додаток за допомогою зчитувачів екрану (JAWS, NVDA, ...).
прихований арія атрибут використовується зі значеннями true, false.
Як використовувати:
<i class = "fa fa-books" aria-hidden = "true"></i>використання aria-hidden = "true" <i>приховує вміст для користувачів зчитування екрана без візуальних змін у програмі.
aria-label
атрибут aria-label використовується для передачі мітки користувачам читачів екрана. Зазвичай поле пошуку не має візуальної мітки (завдяки дизайнерам). aria-label можна використовувати для передачі мітки управління користувачам зчитувача екрану
Як використовувати:
<input type = "edit" aria-label = "search" placeholder = "search">Візуальних змін у застосуванні немає. Але читачі екрану можуть зрозуміти мету управління
aria-labelbedby
Для передачі етикетки використовується як 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">