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 es la diferencia entre el atributo aria-hidden
y hidden
.
ARIA (Accessible Rich Internet Applications) define una forma de hacer que los contenidos y las aplicaciones web sean más accesibles para las personas con discapacidad.
El atributo hidden
es nuevo en HTML5 e indica a los navegadores que no deben mostrar el elemento. La propiedad aria-hidden
indica a los lectores de pantalla si deben ignorar el elemento. Consulta la documentación de w3 para obtener más detalles:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
El uso de estas normas puede facilitar el uso de la web a los discapacitados.
Un atributo oculto es un atributo booleano (Verdadero/Falso). Cuando se utiliza este atributo en un elemento, se elimina toda la relevancia de ese elemento. Cuando un usuario ve la página html, los elementos con el atributo oculto no deben ser visibles.
Ejemplo:
<p hidden>You can't see this</p>
Los atributos Aria-hidden indican que el elemento y TODOS sus descendientes siguen siendo 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>
Echa un vistazo a esto. Debería responder a todas tus preguntas.
Nota: ARIA son las siglas de Accessible Rich Internet Applications (Aplicaciones de Internet ricas y accesibles).
Fuentes: Grupo Paciello
Según HTML 5.2:
Cuando se especifica en un elemento, [el atributo hidden
] indica que el elemento aún no es, o ya no es, directamente relevante para el estado actual de la página, o que está siendo utilizado para declarar contenido que será reutilizado por otras partes de la página en lugar de ser accedido directamente por el usuario.
Algunos ejemplos son una lista de pestañas en la que algunos paneles no están expuestos, o una pantalla de inicio de sesión que desaparece después de que el usuario se conecte. Me gusta llamar a estas cosas "temporalmente relevantes", es decir, que son relevantes en función del tiempo.
Por otra parte, ARIA 1.1 dice:
El estado aria-hidden
indica si un elemento está expuesto a la API de accesibilidad.
En otras palabras, los elementos con aria-hidden="true"se eliminan del [**árbol de accesibilidad**](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree), lo que la mayoría de las tecnologías de asistencia respetan, y los elementos con
aria-hidden="false"quedarán definitivamente expuestos al árbol. Los elementos sin el atributo aria-hidden
están en el estado "indefinido (por defecto)", lo que significa que los agentes de usuario deben exponerlo al árbol en función de su representación. Por ejemplo, un agente de usuario puede decidir eliminarlo si su color de texto coincide con el color de fondo.
Ahora vamos a comparar la semántica. Es apropiado utilizar hidden
, pero no aria-hidden
, para un elemento que todavía no es "temporalmente relevante", pero que podría llegar a serlo en el futuro (en cuyo caso se utilizarían scripts dinámicos para eliminar el atributo hidden
). A la inversa, es apropiado utilizar aria-hidden
, pero no hidden
, en un elemento que siempre es relevante, pero con el que no se quiere saturar la API de accesibilidad; tales elementos podrían incluir "adornos visuales", como iconos y/o imágenes que no son esenciales para el consumo del usuario.
La semántica tiene efectos predecibles en los navegadores/agentes de usuario. La razón por la que hago una distinción es que el comportamiento del agente de usuario es recomendado, pero no requerido por las especificaciones.
El atributo hidden
debería ocultar un elemento de todas las presentaciones, incluyendo impresoras y lectores de pantalla (asumiendo que estos dispositivos respetan las especificaciones HTML). Si quiere eliminar un elemento del árbol de accesibilidad así como de los medios visuales, hidden
servirá para ello. Sin embargo, no utilices hidden
solo porque quieres este efecto. Pregúntate primero si hidden
es semánticamente correcto (ver arriba). Si hidden
no es semánticamente correcto, pero todavía quieres ocultar visualmente el elemento, puedes utilizar otras técnicas como CSS.
Los elementos con `aria-hidden="true" no están expuestos al árbol de accesibilidad, por lo que, por ejemplo, los lectores de pantalla no los anunciarán. Esta técnica debe usarse con cuidado, ya que proporcionará experiencias diferentes a los distintos usuarios: los agentes de usuario accesibles no los anunciarán/renderizarán, pero siguen siendo renderizados en los agentes visuales. Esto puede ser algo bueno cuando se hace correctamente, pero tiene el potencial de ser abusado.
Por último, hay una diferencia de sintaxis entre los dos atributos.
hidden
es un atributo booleano, lo que significa que si el atributo está presente es verdadero -independientemente del valor que pueda tener- y si el atributo está ausente es falso. Para el caso verdadero, la mejor práctica es no usar ningún valor (<div hidden>...</div>
), o el valor de cadena vacía (<div hidden="">...</div>
). Yo no recomendaría hidden="true"porque alguien que lea/actualice su código podría inferir que
hidden="false"tendría el efecto contrario, lo cual es simplemente incorrecto.
Por el contrario, aria-hidden
es un atributo enumerado, que permite uno de una lista finita de valores. Si el atributo aria-hidden
está presente, su valor debe ser "true" o
"false". Si desea el estado "indefinido (por defecto", elimine el atributo por completo.
Más información: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content