lunes, 16 de septiembre de 2013

El contenido oculto

Lo de ocultar cierto contenido de una página web para que lo vean ciertos usuarios, pero otros no, en general no es una buena práctica. Dificulta el desarrollo, dificulta el mantenimiento, y al final puede ser un desastre. Por ello, no hay que abusar de esta posibilidad, pero a veces sí que es una buena solución para ciertos problemas/soluciones (por ejemplo, para ofrecer los enlaces de saltar contenido). Pero se tiene que hacer bien.

El artículo Do not use display:none to visually hide content intended for screen readers nos explica que usar display:none para que no se vea cierto contenido, pero con el propósito de que esté disponible para los usuarios que utilicen un lector de pantallas (screen reader) es un completo error.

En este artículo no se comenta cuál es la mejor técnica para esconder cierto contenido y que esté disponible para los lectores de pantalla. Pero yo eso sí que lo expliqué en mi artículo Técnicas para ocultar contenido.

Bonus, cómo se debería hacer usando WAI-ARIA Hiding visible content from screen readers with aria-hidden.

4 comentarios:

lrbaena dijo...

Hola Sergio. Creo que, sin embargo, hay ocasiones en las que habría que ocultar el contenido a todo el mundo. Por ejemplo, en un formulario de una tienda on line, puede que sea interesante que los datos de envío sólo se muestren si son distintos a los datos de facturación. Si los datos son los mismos, la información de envío debería estar oculta para todos los usuarios. Normalmente, yo he hecho ésto utilizando display:none. Si simplemente sacas los datos del área de visión estarán disponibles para los usuarios de lectores de pantalla y, además, al navegar con el teclado el cursor iría pasando por esos datos que están fuera del área de visualización ¿no?

Un saludo

Sergio Luján Mora dijo...

Hola.

Tienes razón en lo que dices, pero no contradice lo que yo digo en mi entrada. Lo que comento es que display:none no sirve para ocultar cierto contenido para los usuarios que ven pero que a la vez esté disponible para los usuarios que utilizan un lector de pantallas: lo oculta a todos los usuarios.

Cuando quieras ocultar un contenido a todos los usuarios, como el ejemplo que comentas, sí que tiene sentido usar display:none.

Un saludo.

Carmen R. dijo...

Hola Sergio. En el caso de querer ocultar cierto contenido a todos los usuarios, como por ejemplo el aviso "Cargando el contenido de la página" (cuando no está activo) o el aviso de uso de cookies ¿Tiene sentido hacerlo con display:none?

Es decir, mostrar el mensaje inicialmente con display:block y una vez que se acepten las cookies, por ejemplo, dejarlas con display:none.

¿Qué recomiendas tú en estos casos?

Sergio Luján Mora dijo...

Sí, lo puedes hacer así.

O también puedes con JavaScript eliminar ese contenido de la página.