html - software - pagina de nvda

¿Hay alguna forma de escribir contenido que los lectores de pantalla ignorarán?

Question

Acabo de estar trabajando en una página que debe ser accesible tanto para usuarios videntes como discapacitados visuales. Algunos elementos del contenido, simplemente por la naturaleza de relacionarse solo con elementos visuales, simplemente no se aplican a las personas que usan lectores de pantalla. Por ejemplo, un enlace abre una presentación audiovisual en una nueva ventana, pero debido a circunstancias fuera de mi control, la ventana se redimensiona de manera incómoda, por lo que hay un mensaje que dice que debe cambiar el tamaño de la ventana para poder ver todo mejor. Obviamente, esto es información inútil para alguien que no puede verla de todos modos.

¿Hay una forma aceptada de hacer que los lectores de pantalla ignoren algún contenido?

Answer 1

A mitad de escribir la pregunta recordé dónde mirar.

CSS puede hacer esto:

<span class="dontRead">Screen readers shouldn''t read this</span>
.dontRead {
speak: none;
}

Answer 2

CSS tiene esas propiedades auditivas, pero como no se implementan en ningún lugar, son completamente inútiles.

Answer 3

El problema de ocultar información específica a los usuarios de las tecnologías de asistencia es que asume que está usando su software solo en un cuarto oscuro, lo que simplemente no es una suposición segura. Muchos usuarios de tecnología de asistencia colaboran estrechamente con otros usuarios (para quienes esta información sería relevante), y algunos muy afortunados incluso tienen asistentes. Sería prudente reducir el énfasis o dar poca prioridad a este contenido para ellos, colocándolo más adelante en el documento de alguna manera.

Answer 4

En realidad, la forma correcta de hacerlo es utilizando el role=hidden ARIA role=hidden . Me gusta esto:

<button type="button">
<span aria-hidden="true" class="icon">&gt;</span>
<span class="hide">Go!</span>
</button>

Al hacer esto, ocultas el carácter para que los lectores de pantalla no lean "corchete en ángulo recto", y en cambio lean "¡Adelante!". Los usuarios videntes solo verán> si ocultas visualmente el contenido en la clase .hide. Me gusta esto:

.hide{
position: absolute;
left:-999em;
}

La presentation rol ARIA es para "normalizar" el significado semántico, como por ejemplo una <table> con role="presentation" no se leerá como contenido de la tabla y será solo texto.

Si desea que una imagen no se lea, puede poner en el texto alt vacío como este:

<img src="decorative-flower.jpg" alt=""/>

..o si es un <svg> omite el <title> y la <description>

<svg>
<!-- <title>Remove this line</title> -->
<!-- <description> Remove this too..</description> -->
</svg>

He notado que en algunas situaciones raras algunos lectores de pantalla aún leen las imágenes alt vacías, por lo que también podría usar aria-hidden="true" aquí.

La propiedad hablar de CSS no se admite en este punto, y lo mismo ocurre con el atributo de enlace media = "aural".

Answer 5

comprueba esto

<h1 role="presentation" tabindex="-1">Some text that screen readers will ignore </h1>

debido a role = "presentation" y tabindex = "- 1" el lector de pantalla ignorará la etiqueta anterior.

Revisé esto en ie8 y Firefox 3.5 está funcionando con el lector de pantalla JAWS.