ARIA hace que el lector lea contenido de elementos no enfocados

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">

Tuve el mismo problema la otra semana, la solución que utilicé fue usar aria-describedbyy también aria-labelproporcionar información adicional de toda la página en el elemento que actualmente tiene foco.

En un caso, cambiamos el contenido de aria-labelpara proporcionar detalles adicionales solo la primera vez que el elemento tiene el foco.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute

Quiero hacer que el lector lea esos elementos específicos, con la clase "seleccionado". ¿Cómo lo hago?

No creo que debas intentar hacer eso. Los lectores de pantalla, especialmente los que ha probado, tienen teclas intrincadas para permitir a los usuarios navegar hacia, desde y entre elementos específicos y luego saltar dentro y fuera de ellos.

Forzar un comportamiento no estándar para las tecnologías accesibles podría crear una experiencia frustrante para esos usuarios.

Editar: Intenté también agregar atributos a ul y li, todavía no tuve suerte:

<ul role="list"> <li role="listitem">

Evite establecer roles para las listas, ya que tienen estos asignados por defecto. Ver aquí: https://www.w3.org/TR/html53/grouping-content.html#ref-for-allowed-aria-role-attribute-values%E2%91%A1%E2%91%A0

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?

He probado usando el narrador y el simulador de lector de pantalla para Chrome con tu jsfiddle. El comportamiento esperado, y lo que he logrado reproducir, es lo que estás buscando. ¿Corrígeme si estoy equivocado?

Primero, hago clic en la pestaña y me concentro en el siguiente marcado:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Lo que hace que el lector de pantalla regrese

"título1, elemento1, elemento2, elemento3"

En rápida sucesión. Como era de esperar

Vuelvo a hacer clic en la pestaña para centrarme en este marcado:

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Y el lector de pantalla vuelve

"título 2, elemento1, elemento2, elemento3"

En rápida sucesión. De nuevo, como era de esperar

Finalmente, hago clic en la pestaña nuevamente para volver a enfocar el primer marcado y usar la tecla de flecha abajo. El lector de pantalla vuelve

"Ingrese a la lista. Uno de tres. Viñeta. Artículo 1"

Luego hago clic en la tecla de flecha abajo nuevamente para pasar a la segunda viñeta.

"Dos de tres. Bala. Artículo 2."

Hago clic en la tecla de flecha abajo nuevamente.

"Tres de tres. Bala. Artículo 3".

Este comportamiento es lo que esperaría y es, por la experiencia que tengo de pasar dos evaluaciones de WCAG 2.1 de Doble A, la norma.

¿Qué comportamiento estás esperando? Específicamente, ¿qué es lo que quiere que le devuelva / diga su lector de pantalla?

Tuve el mismo problema recientemente y durante la investigación, encontré información sobre el atributo aria-activedescendant: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute

En este caso, cada elemento de la lista debe tener un atributo de identificación único. Cuando se selecciona el elemento de la lista, su id. Debe proporcionarse al atributo aria-activedescendant del padre enfocado.

<div tabindex="0" aria-activedescendant="Id1">
  <span>title1</span>
  <ul>
    <li class="selected" id="Id1">item1</li>
    <li id="Id2">item2</li>
    <li id="Id3">item3</li>
  </ul>
</div>

Podría intentar agregar un índice de tabulación a esos elementos específicos, pero debe tener cuidado al usarlo, ya que puede conducir a páginas que pueden ser realmente difíciles de navegar si usa valores mayores que 0. Aquí hay un enlace para una respuesta más detallada. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex