twitter-bootstrap - que - aria-label w3schools
Cuáles son estos atributos: `aria-labelledby` y` aria-hidden` (4)
Usando el modo Bootstrap, he visto muchos atributos de aria , pero nunca supe cómo usarlos.
¿Alguien sabe en qué casos usar estos atributos? Busqué en Google, simplemente no encontré ninguna respuesta directa.
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 de ARIA en la página.
Los principales consumidores de estas propiedades son los agentes de usuario, como los lectores de pantalla para personas ciegas. Entonces, en el caso de un Bootstrap modal, el div modal tiene role="dialog" . Cuando el lector de pantalla advierta que se hace visible un div que tiene este rol, pronunciará la etiqueta para ese div .
Hay muchas formas de etiquetar cosas (y algunas nuevas con ARIA), pero en algunos casos es apropiado usar un elemento existente como etiqueta (semántica) sin usar la <label> HTML <label> . Con los modales HTML, la etiqueta suele ser un encabezado <h> . Así que en el caso modal de Bootstrap, agregas aria-labelledby=[IDofModalHeader] , y el lector de pantalla pronunciará ese encabezado cuando aparezca el modal.
En términos generales, un lector de pantalla notará cada vez que los elementos DOM se vuelven visibles o invisibles, por lo que la propiedad aria-hidden suele ser redundante y probablemente se puede omitir en la mayoría de los casos.
El atributo HTML5 ARIA es lo que estás buscando. Puede ser utilizado en su código incluso sin bootstrap.
Las aplicaciones de Internet enriquecidas accesibles (ARIA) definen maneras de hacer que el contenido web y las aplicaciones web (especialmente aquellas desarrolladas con Ajax y JavaScript) sean más accesibles para las personas con discapacidades.
Para ser precisos para su pregunta, esto es lo que sus atributos se denominan como estados y modelo de atributo 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.
aria-hidden="true" ocultará los elementos decorativos, como los íconos de glifón, de los lectores de pantalla, que no tienen una pronunciación significativa para no causar confusiones. Es una buena cosa hacer como una buena práctica.