Respuestas:
El atributo ARIA HTML5 es lo que estás buscando. Se puede usar en su código incluso sin bootstrap.
Las aplicaciones de Internet enriquecidas accesibles (ARIA) definen formas de hacer que el contenido web y las aplicaciones web (especialmente las desarrolladas con Ajax y JavaScript) sean más accesibles para las personas con discapacidades.
Para ser precisos para su pregunta, aquí es cómo se llaman sus atributos como estados y modelo de atributos ARIA
aria-labelledby: Identifica el elemento (o elementos) que etiqueta el elemento actual.
aria-hidden (state): Indica que el elemento y todos sus descendientes no son visibles ni perceptibles para ningún usuario tal como lo implementó el autor.
Los principales consumidores de estas propiedades son agentes de usuario, como lectores de pantalla para personas ciegas. Entonces, en el caso de un modal Bootstrap, el modal divtiene role="dialog". Cuando el lector de pantalla advierte que se divhace visible el que tiene este papel, dirá la etiqueta para eso div.
Hay muchas maneras de etiquetar cosas (y algunas nuevas con ARIA), pero en algunos casos es apropiado usar un elemento existente como etiqueta (semántico) sin usar la <label>etiqueta HTML. Con los modales HTML, la etiqueta suele ser un <h>encabezado. Entonces, en el caso modal de Bootstrap, agrega aria-labelledby=[IDofModalHeader], y el lector de pantalla hablará ese encabezado cuando aparezca el modal.
En general, un lector de pantalla notará cada vez que los elementos DOM se vuelven visibles o invisibles, por lo que la aria-hiddenpropiedad es con frecuencia redundante y probablemente se puede omitir en la mayoría de los casos.
aria-hidden="true"ocultará elementos decorativos como iconos de glifos de los lectores de pantalla, que no tienen una pronunciación significativa para no causar confusiones. Es bueno hacer una buena práctica.
ARIA no cambia la funcionalidad, solo cambia los roles / propiedades presentados a los usuarios de lectores de pantalla. La barra de herramientas WAVE de WebAIM identifica los roles ARIA en la página.
Aria se utiliza para mejorar la experiencia del usuario de usuarios con discapacidad visual. Los usuarios con discapacidad visual navegan a través de la aplicación utilizando un software lector de pantalla como JAWS, NVDA, ... Mientras navegan por la aplicación, el software lector de pantalla anuncia el contenido a los usuarios. Aria se puede usar para agregar contenido en el código que ayuda a los usuarios de lectores de pantalla a comprender el rol, el estado, la etiqueta y el propósito del control
Aria no cambia nada visualmente. (Aria también le tiene miedo a los diseñadores).
aria-hidden:
El atributo aria-hidden se usa para ocultar contenido para usuarios con discapacidad visual que navegan por la aplicación utilizando lectores de pantalla (JAWS, NVDA, ...).
El atributo aria-hidden se usa con valores verdadero, falso.
Cómo utilizar:
<i class = "fa fa-books" aria-hidden = "true"></i>usando aria-hidden = "true" en el <i>contenido oculto para los usuarios de lectores de pantalla sin cambio visual en la aplicación.
etiqueta aria
El atributo aria-label se usa para comunicar la etiqueta a los usuarios del lector de pantalla. Por lo general, el campo de entrada de búsqueda no tiene una etiqueta visual (gracias a los diseñadores). aria-label se puede usar para comunicar la etiqueta de control a los usuarios de lectores de pantalla
Cómo utilizar:
<input type = "edit" aria-label = "search" placeholder = "search">No hay cambio visual en la aplicación. Pero los lectores de pantalla pueden entender el propósito del control
aria-labelledby
Tanto aria-label como aria-labelledby se utilizan para comunicar la etiqueta. Pero aria-labelledby se puede usar para hacer referencia a cualquier etiqueta ya presente en la página, mientras que aria-label se usa para comunicar la etiqueta que no se visualiza
Enfoque 1:
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">aria-labelledby también se puede usar para combinar dos etiquetas para usuarios de lectores de pantalla
Enfoque 2:
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">