Hacer elementos invisibles para los lectores de pantalla / enfoque del teclado, pero visible para hacer clics del mouse

Question

Soy consciente de cómo hacer que el teclado de los elementos invisibles se pueda enfocar y leer por los lectores de pantalla, sin embargo, para el propósito de una encuesta dirigida por el estudiante, me gustaría que ciertos elementos sean invisibles para los lectores de pantalla / enfoque de teclado para que sean menos distraídos, pero haga que se vean visibles Para que los tutores usen con un mouse.

He intentado usar iframes, sin embargo, el teclado aún puede 'tabular' en ellos. ¿Estaba considerando una ventana emergente que puede controlar la ventana principal? - pero puede tener algunos problemas con los bloqueadores, etc.

¡Muchas gracias! Miguel

Answer 1

Una de las formas más simples de que un lector de pantalla ignore el contenido es colocarlo en una imagen y luego configurar el texto alternativo en la imagen para que sea "" en su HTML. Esto hará que el lector de pantalla se salte este contenido, ya que no puede interpretarlo. Esto también eliminará cualquier pestaña o enfoque de teclado, ya que el navegador web lo tratará como cualquier otra imagen en su página.

Otra forma de hacer esto, y un poco más complicada, es detectar si su página se está metiendo en un navegador de lectura de pantalla y establecer las propiedades CSS del contenido que no desea que lea el lector tenga lo siguiente:

 visibility: hidden; display:none;

Los lectores de pantalla ignorarán cualquier cosa que sea invisible y/o que no se muestre, por lo tanto, no se le leerá al usuario. Esto también es un poco más limpio ya que no está destruyendo la clasificación SEO de la página, sino que solo modifica el contenido que se muestra a los usuarios que no necesitan verlo/escucharlo.

Answer 2

Una buena manera de evitar que los lectores de pantalla vean un elemento es aplicar el atributo aria-hidden = "verdadero"; Esto es bastante bien compatible con los navegadores, y hará que Jaws y otros lectores de pantalla se salten el contenido. También puede usar role = "presentación": hay un buen artículo sobre esto aquí: http://john.foliot.ca/aria-hidden/

La aplicación de TabIndex = -1 solo permitirá que el elemento se centre en los scripts y no la entrada de teclado, por lo que esto también funcionará. Además, aunque no lo recomiendo, descubrí que mientras me arrancaba el cabello sobre el guión de otra persona, que si no tiene un atributo 'href' definido para un elemento de enlace, (lo que lo hace inválido) esto también evita el enfoque.