Tengo el siguiente marcado en algún lugar de mi página: -
<p>This is a paragraph which contains a <a href="https://youtube.com">link</a></p>Básicamente, un enlace dentro de un párrafo (pueden ser varios enlaces).
Cuando navego por la página con un lector de pantalla (por ejemplo, NVDA) usando la tecla de flecha hacia abajo, enfoca/resalta el párrafo y cuando presiono la tecla hacia abajo nuevamente, pasa al siguiente párrafo en el marcado.
Lo que quiero que haga es resaltar y enfocarse en el enlace también y luego pasar al siguiente párrafo. Sé que presionar la tecla de tabulación puede hacer eso, pero quiero que las teclas de flecha puedan hacer lo mismo.
Me di cuenta de que envolver la etiqueta de anclaje en un div hace lo que quiero, pero perturba la apariencia ya que div es un elemento de bloque y le da display: inline; simplemente hace que el lector de pantalla ignore el enlace nuevamente. Entonces, ¿hay alguna manera de lograr lo que quiero? ¿Tal vez una solución CSS para mantener el aspecto del párrafo y cambiar el HTML o cualquier atributo de aria que pueda ayudar? Soy nuevo en accesibilidad y no tengo ni idea aquí.
Diferentes lectores de pantalla manejan la navegación por el DOM (*) con la tecla de flecha hacia abajo de manera diferente.
(*) realmente es el árbol de accesibilidad, pero es más fácil pensar en él como el DOM
<p>This is a paragraph which contains a <a href="https://youtube.com">link</a> and more text after</p>JAWS se comportará como lo solicita y se detendrá en cada elemento HTML. Entonces, la primera flecha hacia abajo navegará hasta el párrafo hasta que toque otro elemento HTML, por lo que solo leerá el texto del párrafo hasta "contiene un". La siguiente flecha hacia abajo leerá el texto del enlace. Si tuviera más texto después del enlace pero aún dentro del mismo párrafo, JAWS lo leería "y más texto después".
NVDA lo maneja de manera diferente y leerá un elemento completo, incluidos todos los elementos secundarios que no sean de nivel de bloque. Así que leerá el texto del párrafo y el texto del enlace y el texto después del enlace que todavía está dentro del mismo párrafo. Es por eso que agregar un <div> alrededor de tu enlace hace que NVDA se detenga. Porque el <div> es un elemento a nivel de bloque.
Así es como esos dos lectores de pantalla se comportan de manera diferente. Los usuarios de esos respectivos lectores de pantalla saben y esperan este comportamiento. No debe intentar cambiar esto.