2

Intento buscar la manera de ocultar un texto en la web la cual el usuario no pueda verlo pero si una aplicación de lectura de pantallas (en especifico uso NVDA). Mi razón de ocultar dicho texto es a la hora de rellenar un formulario en la web se enmarca en rojo los campos erróneos o que no han sido rellenados, dentro de dichos campos indicar este texto invisible para que al pasar por el marco rojo el usuario que tenga visibilidad reducida pueda saber con mas facilidad que dicho campo se muestra erróneo.

Tengo realizado esto, aquí indico el div y su id.

<div class="invisible" id="texto_invisible">
¡Campo marcado como erróneo!
 <li><bean:message key="errors.textoInvisible.marcoRojo" /></li>
</div>

Después los saltos de errores están indicados en una función y para indicar el texto esta de esta manera.

var text=document.getElementById('texto_invisible');
text.style.display = "block";

He de indicar que no me salta un error, el caso es que oculta el texto pero lo hace también al lector, no se si existe alguna manera de ocultarlo solo a la vista del usuario, mi segunda opción es intentar cambiar el color del texto para que se "camufle" en el marco rojo.

Edit--

He usado también text.style.display = 'hidden' como me han indicado en un comentario y si bien lo oculta la diferencia es que solo mantiene la posición y tamaño ocupado por el texto. Tampoco me han servido text.style.display = 'none' que directamente no lo muestra y text.style.display = 'block'.

5
  • Has probado con un text.style.display = 'hidden'?
    – AQMR
    Commented el 30 mar. 2021 a las 12:35
  • @AQMR si, he probado con 'hidden' y lo oculta igual que un 'block' tanto para el usuario como para el lector. Commented el 31 mar. 2021 a las 6:12
  • Pues, si no quieres que ocupe X lugar en la pantalla, tiene que ser display = "none", pero entonces creo que no puedes poner información en ello. Todo es probar, pero...
    – AQMR
    Commented el 31 mar. 2021 a las 6:18
  • aquí tienes un ejemplo de como hacerlo. stackoverflow.com/questions/19758598/…. Frameworks como bootstrap ya implmentan dicha funcionalidad y hoy en dia es bastante usada. Espero que te sirva
    – hawks
    Commented el 4 abr. 2021 a las 23:32
  • @hawks al final mirando en esa pregunta y la documentación que han dado encontré la solución, siendo indicando por css un class el cual lo oculta bien al usuario y no al screen reader. Lo malo es que sirve si tabulas con el teclado, ahora busco la manera de que también salte el audio si pasas el puntero del ratón. Commented el 14 abr. 2021 a las 14:43

1 respuesta 1

1

Una forma de ocultar texto al usuario y no a un lector de pantallas es usar una forma de estilo css el cual moverá el texto hasta un punto el cual este siempre fuera de pantalla pero su posición es el mismo lugar indicado, por lo tanto será legible al lector pero "invisible" en la pantalla.

.sr-only{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

El nombre sr significando screen read (lector de pantallas) no importa y se puede indicar cualquiera pero viene siendo igual/parecido que la clase usada en Bootstrap, de ahí que se use el mismo nombre.

Una vez indicada la clase podemos indicarla en el texto que necesitemos para que realice su función. Usando el ejemplo de la pregunta terminaría de esta manera.

<div class="sr-only" id="texto_invisible">
¡Campo marcado como erróneo!
 <li><bean:message key="errors.textoInvisible.marcoRojo" /></li>
</div>

O una manera mas sencilla.

<div id="texto_invisible" class="sr-only">
    ¡Campo marcado como erroneo!
    </div>

Debo indicar que esta no es la única respuesta, puesto que hay varias maneras de realizar el mismo trabajo de forma más eficiente para cada situación. Para mas información sobre la accesibilidad y de donde he obtenido la información de esta respuesta podéis mirar en los siguientes links.

WebAim: Invisible Content Just for Screen Reader Users CSS Bootstrap: Bootstrap's infrastructure MDN:Accessibility

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.