Tengo elementos en una página que son "enfocables" (botones, elementos con índice de tabla, etc.) y el lector de pantalla lee bien el contenido.
Sin embargo, tengo algunos otros elementos que no son enfocables (debido al hecho de que hay muchos de ellos: resultados de la lista desplegable, etc.), por lo que no quiero que el usuario haga clic en la pestaña innumerables veces, pero se pueden navegar a izquierda / derecha / teclas arriba / abajo, y obtienen la clase CSS "seleccionada" (aunque algún otro elemento, su padre, está realmente enfocado)
Quiero hacer que el lector lea esos elementos específicos, con la clase "seleccionado". ¿Cómo lo hago?
(Intenté aplicarles el atributo aria-label = "read this", pero no funcionó; solo funciona si el elemento está realmente enfocado)
Aquí hay más detalles para ayudarlo a comprender lo que quiero lograr:
<div tabindex="0" >
<span>title1</span>
<ul>
<li class="selected">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div tabindex="0">
<span>title2</span>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
Aquí está el violín: https://jsfiddle.net/d5gbjst1/1/
Puede tabular de un lado a otro entre esos 2 divs y cualquier lector de pantalla (intenté con Windows Narrator, NVDA y JAWS) leerá "title1" y todos los elementos para el primero y "title2" y todos los elementos para el segundo, dependiendo de dónde está el foco .
Observe la clase "seleccionada" en el primer elemento en el primer ul. Ahora, navego con las flechas arriba / abajo a través de mis listas ul, y la clase "seleccionada" cambia de un elemento a otro en consecuencia. (Ese es el código JS separado, no incluido en este ejemplo por simplicidad)
Cuando la clase "seleccionada" se aplica al elemento, quiero obligar al lector a leerlo. ¿Es posible en absoluto?
Editar: Intenté también agregar atributos a ul y li, todavía no tuve suerte:
<ul role="list">
<li role="listitem">