elclerigo!

Cuando queremos ocultar enlaces en nuestra página web para que las personas con dispacidad, que usan un lector de pantalla, puedan saltarse parte del contenido de nuestro sitio web como por ejemplo el menú es habitual pensar en lo más rápido y sensato: Recurrir a la CSS.

Más concretamente a la propiedad display, la cual nos permite modificar el comportamiento de nuestros elementos pudiendo convertirlos en elementos en linea, de bloque, en linea de tabla y por supuesto ocultarlos. Perfecto, colocamos a nuestro enlace una clase como la siguiente:

.screen-readers {display:none}

O en su defecto usar la propiedad visibility para ocultar sin perder su espacio físico en la pantalla. Quedaría de la siguiente manera:

.screen-readers {visibility:hidden}

O si queremos simular el efecto del display

.screen-readers {position:absolute; visibility:hidden}

Pero tal y como algunas investigaciones han mostrado la gran mayoría de los lectores de pantalla tiene muchos problemas con ambas propiedades, así pues nos encontramos con un pequeño reto. Una de las soluciones que más he visto es la de usar la propiedad text-indent (que sirve para dar sangría a la primera frase de cada párrafo) y ponerla en negativo. De la siguiente manera:

.screen-readers {
position:absolute //para que no ocupe espacio físico
text-indent:-1000em //para que la primera línea del párrafo salga fuera de la pantalla
}

Pero existe un problema con el text-indent en Internet Explorer 7 (¿quién si no?), no "saca" el texto de la pantalla y nos termina poniendo scroll horizontal en nuestra preciosa página web.

Es por ello que se plantea la siguiente solución al problema:

.screen-readers {
position:absolute; //para que no ocupe espacio físico
display:block; //para poder modificar las propiedades de caja del elemento
width:0; //para que no ocupe espacio
overflow:hidden; //para que todo el texto que salga fuera del tamaño del contenedor esté oculto
}

Con esto logramos todo, por una parte que los lectores de pantalla lo lea, por otra que Internet Explorer no haga cosas raras y por último que no ocupe espacio ni se vea en nuestro sitio web.

Espero que a la gente que se pelea con la accesibilidad le haya servido de algo.