html5 - son - todas las etiquetas de html y sus atributos

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

Question

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 el atributo aria-hidden y hidden aria-hidden .

Answer 1

Diferencia semántica

De acuerdo con 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 se está utilizando para declarar que otras partes de la página reutilizarán el contenido. 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 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 , que la mayoría de la tecnología de asistencia destaca, y los elementos con aria-hidden="false" definitivamente estarán expuestos al árbol. Los elementos sin el atributo aria-hidden 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.

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 atributo hidden 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, hidden sería el truco. Sin embargo, no use hidden solo porque desea este efecto. Pregúntese si hidden es semánticamente correcto primero (ver arriba). Si hidden no es semánticamente correcto, pero aún desea ocultar visualmente el elemento, puede utilizar otras técnicas como CSS.

Y, suponiendo que la tecnología de asistencia de un usuario cumpla con las especificaciones ARIA, no expondrá un elemento con aria-hidden="true" al usuario. Esto sería útil para "estilo visual", por ejemplo, iconos, imágenes, etc., que no es esencial para que el usuario consuma.

Diferencia sintáctica

Por último, hay una diferencia en la 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> ) No recomendaría hidden="true" porque alguien que lea / actualice su código podría inferir que hidden="false" tendría el efecto contrario, que es simplemente incorrecto.

aria-hidden , por el contrario, 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 (predeterminado)", elimine el atributo por completo.

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

Answer 2

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 atributo hidden es nuevo en HTML5 y le dice a los navegadores que no muestren el elemento. La propiedad aria-hidden 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.

Answer 3

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 paciellogroup.com/blog/2012/05/… . Debería responder a todas sus preguntas.

Nota: ARIA significa aplicaciones de Internet enriquecidas accesibles

Fuentes: paciellogroup.com/blog/2012/05/…

Answer 4

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();