html5 - son - todas las etiquetas de html y sus atributos
¿Cuál es la diferencia entre los atributos HTML ''ocultos'' y ''aria-ocultos''? (4)
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
.
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
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.
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/…
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();