¿Cuáles son estos atributos: `aria-labelledby` y` aria-hidden`

Usando el modo Bootstrap, he visto mucho estos ariaatributos, pero nunca supe cómo usarlos.

¿Alguien sabe en qué casos usar estos atributos? Busqué en Google, simplemente no encontré ninguna respuesta directa.

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