ARIA faz o leitor ler o conteúdo do elemento não focado

Eu tenho elementos em uma página que são "focáveis" (botões, elementos com tabindex etc) e o leitor de tela lê o conteúdo muito bem.

No entanto, eu tenho alguns outros elementos que não são focáveis ​​(devido ao fato de existirem muitos deles - resultados da lista suspensa etc.), então eu não quero que o usuário clique na guia inúmeras vezes, mas eles podem ser navegados pela esquerda / direita / teclas up / down e eles obtêm a classe CSS "selecionada" (embora algum outro elemento - o pai deles - esteja realmente focado)

Eu quero fazer o leitor ler esses elementos específicos, com a classe "selecionada". Como eu faço isso?

(Tentei aplicar o atributo aria-label = "leia isso" a eles, mas não funcionou; funciona apenas se o elemento estiver realmente focado)

Aqui estão mais detalhes para ajudar você a entender o que eu quero alcançar:

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

Aqui está o violino: https://jsfiddle.net/d5gbjst1/1/

Você pode alternar entre essas duas divs e qualquer leitor de tela (tentei com o Windows Narrator, NVDA e JAWS) exibirá "title1" e todos os itens do primeiro e "title2" e todos os itens do segundo, dependendo de onde o foco está .

Observe a classe "selecionada" no primeiro item da primeira ul. Agora, eu navego com as setas para cima / para baixo nas minhas listas de ul e a classe "selecionada" muda de item para item de acordo. (Esse é o código JS separado, não incluído neste exemplo por uma questão de simplicidade)

Quando a classe "selecionada" é aplicada ao elemento, desejo forçar o leitor a lê-lo. É possível de alguma forma?

Edit: Eu tentei também adicionar atributos para ul e li, ainda sem sorte:

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

Eu tive o mesmo problema na outra semana, a solução foi usar aria-describedbye também aria-labelfornecer informações extras de toda a página no elemento que atualmente está em foco.

Em um caso, alteramos o conteúdo de aria-labelpara fornecer detalhes extras apenas na primeira vez em que o elemento é focado.

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

Eu quero fazer o leitor ler esses elementos específicos, com a classe "selecionada". Como eu faço isso?

Eu não acho que você deveria tentar fazer isso. Os leitores de tela - especialmente aqueles com os quais você testou - possuem teclas intrincadas para permitir que os usuários naveguem para, de e entre elementos específicos e depois entrem e saiam deles.

Forçar um comportamento não padrão para tecnologias acessíveis pode criar uma experiência frustrante para esses usuários.

Edit: Eu tentei também adicionar atributos para ul e li, ainda sem sorte:

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

Evite definir funções para listas, pois elas são atribuídas por padrão. Consulte aqui: https://www.w3.org/TR/html53/grouping-content.html#ref-for-allowed-aria-role-attribute-values%E2%91%A1%E2%91%A0

Observe a classe "selecionada" no primeiro item da primeira ul. Agora, eu navego com as setas para cima / para baixo nas minhas listas de ul e a classe "selecionada" muda de item para item de acordo. (Esse é o código JS separado, não incluído neste exemplo por uma questão de simplicidade)

Quando a classe "selecionada" é aplicada ao elemento, desejo forçar o leitor a lê-lo. É possível de alguma forma?

Eu testei usando o narrador e o Screen Reader Simulator for Chrome com o seu jsfiddle. O comportamento esperado, e o que eu consegui reproduzir, é o que você está buscando. Corrija-me se eu estiver enganado?

Primeiro, clico na guia e foco na seguinte parte da marcação:

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

O que resulta no retorno do leitor de tela

"título1, item1, item2, item3"

em rápida sucessão. Como eu esperaria.

Clico na guia novamente para focar nesta parte da marcação:

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

E o leitor de tela retorna

"título 2, item1, item2, item3"

em rápida sucessão. Mais uma vez, como eu esperaria

Por fim, clico novamente na guia para definir o foco novamente na primeira parte da marcação e usar a tecla de seta para baixo. O leitor de tela retorna

"Entre na lista. Um dos três. Bala. Item 1"

Depois, clico na tecla downarrow novamente para passar para o segundo marcador.

"Dois de três. Bala. Item 2."

Clico na tecla downarrow novamente.

"Três de três. Bala. Item 3".

Esse comportamento é o que eu esperaria e é - pela experiência que tenho ao passar em duas avaliações Double-A WCAG 2.1 - a norma.

Que comportamento você está esperando? Especificamente, o que você deseja que seu leitor de tela retorne / diga?

Tive o mesmo problema recentemente e, durante a pesquisa, encontrei informações sobre o atributo aria-activeedescendant: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_ARIA_Techniques/Using_the_aria-activedescendant_attribute

Nesse caso, cada elemento da lista deve ter um ID de atributo único. Quando o elemento de lista é selecionado, seu ID deve ser fornecido para o atributo descendente ativado por ária do pai focado.

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

Você pode tentar adicionar índice de tabulação a esses elementos específicos, mas tome cuidado ao usá-lo, pois isso pode levar a páginas que podem ser realmente difíceis de navegar se você usar valores maiores que 0. Aqui está um link para uma resposta mais detalhada. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex