Los lectores de pantalla y el display:none

Interesante el tip que comentan en 456bereastreet. Los lectores de pantalla son softwares que facilitan el acceso a la información de una página web (accesibilidad) tanto a personas ciegas como aquellas que tienen dificultades para leer (se convierte el texto en voz). Los más conocidos son Jaws y Window-Eyes.

El caso es que, es sabido, los lectores de pantalla siguen sólo lo que se muestra en la pantalla (en la página web), a la vista de un lector común. Por ejemplo, si uno oculta un texto con CSS (display:none), ninguno de nosotros se daría cuenta de la existencia del texto. Esto mismo, debería suceder con los lectores de pantalla; pero, no es así, algunos cumplen con lo dispuesto por el CSS, pero otros no, y leen lo que debería estar oculto.

¿Cómo solucionarlo? La alternativa de solución que proponen es utilizar display:none y visibility:hidden juntos, por ejemplo uniéndolos en una clase.

.hidden {
   display:none;
   visibility:hidden;
}