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.

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.

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

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

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