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