Hace unos días leí el artículo Hiding content untangled: Hiding vs. moving out of the visible viewport. En este artículo nos explican un caso real de una página web en la que se oculta o esconde cierto contenido, para que no se pueda ver, pero con la intención de que un usuario que utilice un lector de pantallas sí que tenga tenga acceso al contenido. En la página analizada, no se hace bien y el resultado es desastroso.
El típico uso de esta técnica se aplica con los enlaces "saltar a", pero como expliqué hace tiempo en la entrada Enlace de "saltar navegación", en muchos casos puede ser mucho mejor mostrar el contenido a todos los usuarios, ya que quizás no nos demos cuenta, pero puede haber otros usuarios que también se beneficien del contenido que queremos ocultar.
En el artículo que indico al principio se nos explica que desde hace muchos, muchos años, está extendida la idea de que display: none o visibility: hidden esconde el contenido "de la vista", pero sigue estando disponible para un usuario que utilice un lector de pantallas. Sin embargo, esto es totalmente falso, el contenido no está disponible para ningún usuario. Entonces, ¿qué hay que usar para este objetivo?
Antes que nada, según lo anterior, display: none es la mejor opción para lograr otros efectos, como por ejemplo para crear un menú desplegable (dropdown menu): el menú aparecerá y desaparecerá tanto para el usuario vidente como para el invidente.
Si se quiere ocultar cierto contenido sólo a los usuarios videntes, uno de los métodos más sencillos de entender y de aplicar es el posicionamiento fuera de pantalla, que se puede lograr con reglas como text-indent: -999em o top: -999em.
Si se quiere leer un estudio riguroso sobre todas las posibilidades que existen, recomiendo el artículo Ocultar contenido sin comprometer la accesibilidad ni el posicionamiento de la página de Olga Carreras, que realiza un repaso muy exhaustivo sobre las principales técnicas, con sus ventajas y desventajas.
Y si alguien quiere más información, un par de artículos en inglés:
No hay comentarios:
Publicar un comentario