Javascript + display:none
 

Hola,

Soy maquetadora y trabajo a menudo con diseños provinentes de agencias o de diseñadores externos. Hace tiempo estoy usando una técnica que me parecía adecuada para resolver de manera accesible las páginas pensadas para mostrar y esconder elementos dinámicamente con Javascript.

La técnica que uso es la siguiente: inicialmente cargo la página con una hoja de estilos externa que muestra todos los elementos visibles. Así, me aseguro de que los usuarios que no tengan javascript habilitado puedan leer correctamente la página. Después, mediante una función javascript, cargo otra hoja de estilos que modifica la anterior, escondiendo algunos elementos con display:none. Para mostrarlos, uso llamadas a funciones javascript que, aunque sólo le funcionarán a un usuario que tenga javascript habilitado, simplemente muestran lo que anteriormente he escondido por javascript.

Pero me ha surgido la siguiente duda: qué pasará con usuario que esté navegando con un lector de pantalla como JAWS o similar? ¿Su navegador interpretará Javascript? Si lo hace, el display:none de la segunda hoja de estilos evitará que pueda leer lo que esté oculto por este medio? He leído que distintas versiones de JAWs dan un soporte variable al display:none, dependiendo si está en una hoja de estilos externa, si se encuentra dentro de una etiqueta <style> o si se encuentra dentro de un atributo style="".

¿Hay alguien que me lo pueda aclarar?

Re: Javascript + display:none
 

Hola!
Mirá... los screen readers no interpretan JavaScript, como bien suponés, ni tampoco las hojas de estilos.
De eso se trata, sólo texto plano.
Si no tenés disponible una versión de Jaws para efectuar pruebas podés utilizar algún tester on-line:

Lynx Viewer
html2txt

Los cuales emulan adecuadamente un screen reader vía URL informada.
En cuanto a soporte de display: none por parte de JAWS; verdaderamente no estoy al tanto.

Re: Javascript + display:none
 

Hola

Los lectores de pantalla funcionan de manera muy similar a lo que presentas en pantalla, en este caso, ignoran lo que coloques dentro de capas con display:none o visibility:hidden.

Así que si quieres colocar textos que estén disponibles para la gente con lectores pero que no se vean, debes posicionarlos fuera de la pantalla o en capas de dimensión 0 y visibility:visible y posiblemente jugando con el overflow:hidden a fin de garantizar que no hay barras en ningún navegador.

Felicidad