¿Cómo ocultar un texto y hacerlo accesible mediante lector de pantalla?
Tengo un texto simple que se actualiza con una acción y quiero que el lector de pantalla lo anuncie. Pero no quiero que ese texto sea visible en la página web. Probé display: noney visibility: hidden, pero parece que los softwares lectores de pantalla no pueden acceder a ellos. Encontré una manera de hacer que esto funcione, es decir, colocando el elemento de forma absoluta con un valor negativo de 999999, lo que lo hará salir de la pantalla y ocultarse de la página web. Realmente no soy un fanático de esta solución. ¿Existe una forma más elegante de lograr esto?
<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>
.aria-invisible {
display: none; //either of these two attributes
visibility: hidden;
}
Una mejor solución para la clase de arranque "solo sr".
Existen numerosos problemas con la clase Bootstrap "solo sr".
En primer lugar, verá en esta discusión que un margen negativo puede causar problemas en VoiceOver.
En segundo lugar, debe tener en cuenta las palabras que contienen una por línea, ya que los lectores de pantalla no leen los saltos de línea.
Finalmente
clipha quedado obsoleto .
Para arreglar el punto 1 simplemente no agregue un margen negativo.
Para arreglar el punto 2, agregue white-space: no-wrappara garantizar que las palabras no terminen "una por línea" y provoquen que las palabras se aplasten.
Para arreglar el punto 3, agregamos clip-path: inset(50%)clips a un cuadrado de 0px, lo mantenemos clipya que por el momento tiene una gran cobertura y clip-pathse utiliza para preparar su solución para el futuro.
Encuentre a continuación una clase mucho más sólida; hasta el momento no he encontrado una combinación de lector de pantalla/navegador que no funcione como se esperaba con esto.
Tengo esta clase en algunos foros diferentes que se están probando, hasta ahora todo bien, pero si alguien puede encontrar un problema con ella, hágamelo saber, ya que la enviaré a todas partes.
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}<p>visible text <span class="visually-hidden">hidden text</span></p>
Encontré este problema en el pasado. Bootstrap tiene esta clase atractiva sr-onlyque en realidad oculta el contenido de la página web pero es accesible para los lectores de pantalla. Puedes consultar este enlace
Además, si no está utilizando bootstrap, simplemente puede implementar la clase usted mismo en su código.
.aria-invisible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}<span class="aria-invisible">5 selections have been made. </span>Espero que esto ayude.
Usar aria-labelatributos es la forma de hacerlo (ejemplo a continuación)
¿Existe una forma más elegante de lograr esto?
No ocultes el elemento. Sí. No estoy respondiendo a tu pregunta, pero estoy abordando el problema.
Los lectores de pantalla son sólo una subparte de las tecnologías de asistencia utilizadas por una pequeña parte de las personas a las que se dirigen las directrices de accesibilidad.
Imagine usar una lupa de pantalla, por ejemplo, donde no tiene una vista global en pantalla completa. Imagínese tener algunas discapacidades cognitivas que le dificultan contar o recordar elementos.
Si considera que una información es importante para las personas ciegas, seguramente lo será para ellas Y para otras personas.
Ahora, en lugar de ser un texto largo, puede ser un pequeño contador con el etiquetado aria apropiado:
<div role="status" aria-live="polite" aria-label="5 selections have been made.">
5 selections
</div>
