¿Cuál es la diferencia entre los atributos HTML 'ocultos' y 'aria-ocultos'?
He estado viendo el atributo aria por todas partes mientras trabajaba con Angular Material. ¿Alguien puede explicarme qué significa el prefijo aria? pero lo más importante que intento entender es la diferencia entre aria-hidden
y hidden
atributo.
ARIA (Aplicaciones de Internet enriquecidas accesibles) define una forma de hacer que el contenido y las aplicaciones web sean más accesibles para las personas con discapacidades.
El hidden
atributo es nuevo en HTML5 e indica a los navegadores que no muestren el elemento. La aria-hidden
propiedad indica a los lectores de pantalla si deben ignorar el elemento. Eche un vistazo a los documentos de w3 para obtener más detalles:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
El uso de estos estándares puede facilitar el uso de la web para las personas con discapacidad.
Un atributo oculto es un atributo booleano (Verdadero/Falso). Cuando este atributo se utiliza en un elemento, elimina toda relevancia para ese elemento. Cuando un usuario ve la página html, los elementos con el atributo oculto no deberían ser visibles.
Ejemplo:
<p hidden>You can't see this</p>
Los atributos ocultos de Aria indican que el elemento y TODOS sus descendientes todavía son visibles en el navegador, pero serán invisibles para las herramientas de accesibilidad, como los lectores de pantalla.
Ejemplo:
<p aria-hidden="true">You can't see this</p>
Mira esto . Debería responder a todas tus preguntas.
Nota: ARIA significa Aplicaciones de Internet enriquecidas accesibles
Fuentes: Grupo Paciello