¿Cuál es la diferencia entre los atributos HTML 'ocultos' y 'aria-ocultos'?

256

He estado viendo el atributo aria por todas partes mientras trabajaba con material angular. ¿Alguien puede explicarme qué significa el prefijo aria? Pero lo más importante es que estoy tratando de entender la diferencia entre aria-hiddeny hiddenatributo.

Daniel Kobe
fuente
1
Encontré algunas aclaraciones aquí: paciellogroup.com/blog/2012/05/…
Abdul

Respuestas:

364

ARIA (Accessible Rich Internet Applications) define una forma de hacer que el contenido web y las aplicaciones web sean más accesibles para las personas con discapacidad.

El hiddenatributo es nuevo en HTML5 y le dice a los navegadores que no muestren el elemento. La aria-hiddenpropiedad le dice a los lectores de pantalla si deben ignorar el elemento. Echa un vistazo a los documentos de w3 para más detalles:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

El uso de estos estándares puede facilitar que las personas con discapacidad utilicen la web.

Leo Farmer
fuente
44
Entonces, si solo usa un atributo oculto, ¿el lector de pantalla seguirá leyendo?
Daniel Kobe
40
Correcto. hiddensignifica escondido para todos. aria-hiddensignifica oculto para lectores de pantalla y herramientas similares. Esto es útil para componentes que se usan únicamente para formatear y no contienen contenido real, por ejemplo.
Andrei Bârsan
23
@ AndreiBârsan @DanielKobe Creo que Andrei quiso decir "Incorrecto". (El resto de su comentario es fáctico) hiddendebería evitar que el lector de pantalla acceda al contenido de la etiqueta.
eenblam
66
Su respuesta acerca aria-hiddenes correcta; sin embargo, no dijiste nada sobre hiddendiferenciarlo aria-hidden. Desafortunadamente, esta es la mejor respuesta. Por favor sea más cuidadoso con sus respuestas.
Pegues el
1
Su respuesta explica los efectos de los atributos, pero no su significado . no menciona nada sobre el árbol de accesibilidad o la relevancia temporal de un elemento. lea las especificaciones para más información. [HTML 5.2 , ARIA 1.1 ]
chharvey
41

Un atributo oculto es un atributo booleano (verdadero / falso). Cuando este atributo se usa en un elemento, elimina toda relevancia para ese elemento. Cuando un usuario ve la página html, los elementos con el atributo oculto no deben estar visibles.

Ejemplo:

    <p hidden>You can't see this</p>

Los atributos ocultos de Aria indican que el elemento y TODOS sus descendientes aún están 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 sus preguntas.

Nota: ARIA significa aplicaciones de Internet enriquecidas accesibles

Fuentes: Grupo Paciello

Pulpo desconocido
fuente
26
Esto no es del todo correcto (incluso la documentación oficial es un poco confusa aquí). Un elemento con aria-hidden="true"todavía está visible en el navegador, pero será invisible para las herramientas de accesibilidad, como los lectores de pantalla.
Andrei Bârsan
aria-hiddense utiliza para ocultar el elemento a las personas que usan su sitio web con herramientas de accesibilidad.
Luke Brown
13

Diferencia semántica

De acuerdo con HTML 5.2 :

Cuando se especifica en un elemento, [el hiddenatributo] indica que el elemento aún no es, o ya no es, directamente relevante para el estado actual de la página, o que se está utilizando para declarar que otras partes de la página reutilizarán el contenido como en lugar de ser accedido directamente por el usuario.

Los ejemplos incluyen una lista de pestañas donde algunos paneles no están expuestos, o una pantalla de inicio de sesión que desaparece después de que un usuario inicia sesión. Me gusta llamar a estas cosas "temporalmente relevantes", es decir, son relevantes en función del tiempo.

Por otro lado, ARIA 1.1 dice:

[El aria-hiddenestado] 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 , que honra la mayoría de la tecnología de asistencia, y los elementos con aria-hidden="false"definitivamente estarán expuestos al árbol. Los elementos sin el aria-hiddenatributo están en el estado "indefinido (predeterminado)", 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 su color de fondo.

Ahora comparemos la semántica. Es apropiado usar hidden, pero no aria-hidden , para un elemento que aún no es "temporalmente relevante", pero que podría volverse relevante en el futuro (en cuyo caso usaría scripts dinámicos para eliminar el hiddenatributo). Por el contrario, es apropiado usar aria-hidden, pero no hidden, en un elemento que siempre es relevante, pero con el que no desea saturar la API de accesibilidad; dichos elementos pueden incluir "estilo visual", como iconos y / o imágenes que no son esenciales para el usuario.

Diferencia efectiva

La semántica tiene efectos predecibles en los navegadores / agentes de usuario. La razón por la que hago una distinción es que se recomienda el comportamiento del agente de usuario , pero las especificaciones no lo exigen .

El hiddenatributo debe ocultar un elemento de todas las presentaciones, incluidas las impresoras y los lectores de pantalla (suponiendo que estos dispositivos respeten las especificaciones HTML). Si desea eliminar un elemento del árbol de accesibilidad , así como los medios visuales, hiddensería el truco. Sin embargo, no lo use hidden solo porque desea este efecto. Pregúntese si hiddenes semánticamente correcto primero (ver arriba). Si hiddenno es semánticamente correcto, pero aún desea ocultar visualmente el elemento, puede usar 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á diferentes experiencias a diferentes usuarios: los agentes de usuario accesibles no los anunciarán / mostrarán, pero aún se muestran en agentes visuales. Esto puede ser algo bueno cuando se hace correctamente, pero tiene el potencial de ser abusado.

Diferencia sintáctica

Por último, hay una diferencia en la sintaxis entre los dos atributos.

hiddenes un atributo booleano , lo que significa que si el atributo está presente es verdadero, independientemente del valor que tenga, y si el atributo está ausente, es falso. Para el caso verdadero, la mejor práctica es no usar ningún valor en absoluto ( <div hidden>...</div>) o el valor de cadena vacío ( <div hidden="">...</div>). Yo no recomendaría hidden="true"porque alguien lectura / actualización de su código podría inferir que hidden="false"tendría el efecto contrario, que es simplemente incorrecta.

aria-hidden, por el contrario, es un atributo enumerado , que permite uno de una lista finita de valores. Si el aria-hiddenatributo está presente, su valor debe ser "true"o "false". Si desea el estado "indefinido (predeterminado)", elimine el atributo por completo.


Lectura adicional: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

chharvey
fuente
1
Esta publicación de Paciello Group, 2012 dice: "aria-hidden = false no está mapeado en ningún navegador que admita aria-hidden, por lo tanto, su uso no tiene significado o, en otras palabras, tiene el mismo significado que su ausencia". No estoy seguro si ese sigue siendo el caso, pero agregando como precaución. Me encantaría describir mis estados de vista a11y por separado de mi CSS, pero no estoy seguro de que sea posible con aria-hidden. developer.paciellogroup.com/blog/2012/05/…
RobW
-1

establecer aria-hidden en false y alternarlo en element.show () funcionó para mí.

p.ej

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

y cuando te escondes

$(span).attr('aria-hidden', 'true');
$(span).hide();
Moiz
fuente