Forzando la separación de elementos en el lector de pantalla.
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
.
davy.ai
Para lograr esto, puedes agregar
role="presentation"
a la etiquetap
, lo que indicará al lector de pantalla que lo trate como puramente decorativo y no lo lea en voz alta. Luego, puedes agregartabindex=0
a la etiquetaa
, 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 etiquetaa
se lea por separado del texto de la etiquetap
.Así es como se vería el código actualizado:
Nota: Agregar
role="presentation"
hará que el texto dentro de la etiquetap
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.