¡Hola!
Esta mini entrada surge por un problema que estaba teniendo con unas animaciones en jQuery.
Resulta que estoy mostrando y ocultando una lista de enlaces usando fadeIn, fadeOut, slideDown y slideUp, dándole un tiempo de animación tanto en mostrar como en ocultar. ¡Estas cosas que a los que veis os molan tanto, que eso de que aparezcan y desaparezcan elementos de la pantalla así de golpe como que no os mola! 😉
Pues resulta que me di cuenta de algo obvio pero que no se me había ocurrido: Durante una animación de desaparición (por deslizamiento o por transparencia), el usuario de lector de pantallas puede seguir interactuando con los elementos, sin darse cuenta de que esos elementos están desapareciendo.
Y como a mí me la traen al fresco las animaciones y las desapariciones progresivas, se me ocurrió usar, durante las desapariciones, un atributo que oculta elementos para lectores de pantalla. Este atributo, dentro de las recomendaciones ARIA de la w3c, es “aria-hidden“, que ajustado a true, oculta la etiqueta en la que se aplique a lectores de pantalla.
Así que, podríamos usar el siguiente código para ocultar un ul durante 400 milisegundos, pero que desde el primer momento ya no se muestre a lectores de pantalla aunque tarde un rato en desaparecer:
lista.attr("aria-hidden", "true").slideUp(200, function () { $(this).removeAttr("aria-hidden"); });
¿Qué estamos haciendo?
- Ocultamos el elemento a lectores de pantalla.
- Lanzamos la animación de desaparición.
- Cuando se completa la animación, volvemos a mostrar el elemento a lectores de pantalla, pues como ya está oculto con display:none, no será visible para nadie. Vuelvo a quitar el aria-hidden, ya que si luego queremos volver a mostrar el elemento, los lectores no lo verán si esa propiedad se ha quedado a true :).
¡Mucho cuidado con aria-hidden y display:none! Si un elemento tiene display:none pero aria-hidden está a false explícitamente (no que no esté el atributo, sino puesto a false), el elemento será mostrado a lectores de pantalla pese al display:none. ¡Flipante!
¡Espero que este truquillo os pueda servir!
¡Buena semana!
Entrada visitada 520 veces