es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Forzando la separación de elementos en el lector de pantalla.

31 May, 2023 Programación

Cuando utilizo lo anterior en una página y lo acceso a través de un lector de pantalla (en este caso NVDA), siempre leerá el texto de la etiqueta p seguido inmediatamente por la descripción y el texto de la etiqueta a. Me gustaría que se leyeran por separado, más específicamente, me gustaría que el usuario necesite navegar al elemento a antes de que se lea. ¿Es posible y, en caso afirmativo, cómo puedo lograrlo?

Vale la pena señalar que siempre se leen por separado para mí cuando la etiqueta p no está configurada como inline.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, puedes agregar role="presentation" a la etiqueta p, lo que indicará al lector de pantalla que lo trate como puramente decorativo y no lo lea en voz alta. Luego, puedes agregar tabindex=0 a la etiqueta a, lo que la hará enfocable y permitirá al usuario navegar a ella usando el teclado o los atajos del lector de pantalla. Esto asegurará que la etiqueta a se lea por separado del texto de la etiqueta p.

    Así es como se vería el código actualizado:

    <div>
  <p role="presentation">Es posible que necesite, etc. etc.</p>
  <a href="https://www.google.co.uk" aria-label="Ver política de cookies (se abre en una pestaña nueva)" tabindex="0">Ver política de cookies</a>
</div>

    Nota: Agregar role="presentation" hará que el texto dentro de la etiqueta p sea invisible para todos los usuarios, incluidos aquellos que dependen de lectores de pantalla. Por lo tanto, asegúrese de usarlo solo para elementos puramente decorativos que no transmitan información importante.

Comments are closed.