Ocultar elementos con CSS - display:none
Cuando se diseña una página web accesible es habitual y recomendable utilizar enlaces para saltar secciones rápidamente para que los usuarios que utilicen lectores de pantalla puedan navegar rápidamente sin tener que esperar a ser leídas. Por ejemplo, es recomendable crear enlaces que saltan el menú de navegación para que no sea leído una y otra vez al navegar dentro de un mismo sitio web.
Estos enlaces suelen ser escondidos para las personas que usan navegadores normales. La técnica habitual es usar la propiedad display: none [inglés] en CSS [inglés]. Así:
display:none
}
Y luego, en el código HTML [inglés] poner lo siguiente:
<a class="oculto" href="contenidos">Ir a contenidos</a>
El problema es que hay lectores de pantalla que no leen una sección oculta con esta propiedad y otros que sí. Es decir, que un enlace de salto de sección que está ahí para ayudar a una persona que utiliza un lector de pantalla, no es leído.
Existe una técnica para arreglar este problema y que es recomendada para garantizar una mayor compatibilidad. En lugar de usar display:none, se realiza un desplazamiento del elemento de esta forma:
position: absolute;
top: -1600px;
}
Otra técnica, que no he probado pero que he leído que funciona es la siguiente:
.oculto {
height: 0;
overflow: hidden;
}
Creo que la primera es la más utilizada.
Yo siempre he creído que los que se deben adaptar al lenguaje son los agentes de usuario, no las páginas a los agentes, pero bueno, la cuestión es tener en cuenta este problema y asegurar la universalidad de los contenidos.
Gonzalo dijo
Otra opción, no la olvidemos, es integrar el "salto al contenido" como un elemento más de la navegación. Y no sólo es útil para lectores de pantalla, también para teléfonos móviles (por ejemplo).
En mi opinión, no lo veo demasiado recomendable. Si hay navegadores en los que da problemas, trasladas esos problemas a los usuarios. Y si aparece en la página, tampoco tiene porqué molestar...
26 Diciembre 2005 | 04:38 PM