2011-01-25 4 views
8

¿Cómo ocultar cualquier elemento de la página solo desde el lector de pantalla pero no desde la página para usuarios normales?¿Cómo ocultar cualquier elemento de la página solo desde el lector de pantalla pero no desde la página para usuarios normales?

Conozco estos fragmentos, pero quiero ocultar algo del editor de pantalla pero no de la página visualmente. El lector de pantalla debe omitir la parte oculta.

/* Hide for both screenreaders and browsers 
     css-discuss.incutio.com/wiki/Screenreader_Visibility */ 
    .hidden { display: none; visibility: hidden; } 

/* Hide only visually, but have it available for screenreaders 
    www.webaim.org/techniques/css/invisiblecontent/ ; & j.mp/visuallyhidden ; */ 
    .visuallyhidden { position: absolute !important; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); } 

/* Hide visually and from screenreaders, but maintain layout */ 
    .invisible { visibility: hidden; } 

Respuesta

0

No estoy seguro de si los lectores de pantalla obedecen a nada en el nuevo Módulo de voz de CSS3, pero podría ser algo que podría probar, ya que parece la opción más fácil si funciona.

http://www.w3.org/TR/css3-speech/

+0

Creo que muchos lectores de pantalla no son compatibles con '@media aural' o' @media speech' a pesar de que existen por muchos años, por lo que el lenguaje CSS3 parece poco probable –

+1

Sucks. Desearía que esto fuera apoyado. Haría nuestras vidas mucho más fáciles. –

3

creo que la respuesta de Michael anterior sería la forma más adecuada y semánticamente sonido de lograr lo que quiere. El único problema está en el lector de pantalla \ compatibilidad de navegador como él señala.

Una manera rápida y sucia es mostrar el contenido que desea visualmente como una imagen y luego asignarle un valor de texto alternativo en blanco, p. Ej.

<img src="visualcontentonly.png" alt="" /> 

Cuál es el contenido que están queriendo esconderse de los usuarios de lector de pantalla? Puede haber una manera más apropiada de tratar el problema. Si bien mostrarlo como una imagen funcionaría, puede ser desaprobado desde un punto de vista de accesibilidad, dependiendo de cuál sea el contenido.

6

Utilice esta sobre el elemento:

aria-hidden="true" 

Esto muestra el elemento de forma normal a los usuarios con visión, pero no consigue leer en voz alta por un lector de pantalla.

+0

Esto no es cierto para JAWS 12.0. Si bien es probable que los dispositivos de asistencia futuros lo admitan, la función no se implementa actualmente de manera universal. – theJBRU

Cuestiones relacionadas