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


8

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

Respostas:


2

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 não tenho certeza se entendi. Meu elemento com a classe "selected" e nunca recebe foco. Seu estado nunca é focado (como no navegador focado, a regra (": focus") nunca é verdadeira para ele))
Dalibor

Você não me entendeu, no item que está em foco, adicione um rótulo de ária que fornece informações sobre o elemento que você deseja ler. Você não pode fazer diretamente o que deseja, mas pode fingir
David Bradshaw

É impossível para mim adicionar aos rótulos dos elementos "ul" de cada elemento "li"
Dalibor 07/01

Você pode usar aria-discribedby para listar os IDs de cada LI para que todos sejam lidos. Não é bonito, mas infelizmente é frequentemente o único caminho.
David Bradshaw

Por que eu faria isso? Por que eu não usaria apenas ária-etiqueta em vez de ária-rotulada por algum outro elemento? Você perdeu o ponto, não quero que os elementos "li" sejam focados.
Dalibor 8/01

0

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?


Não recebo os resultados como você. Quando uso o Windows Narrator, recebo apenas "seta para baixo" e "seta para cima" ao clicar nas setas para baixo e para cima. Quanto ao NVDA, o comportamento para cima e para baixo é bloqueado por algum motivo (algumas teclas de atalho provavelmente o aumentam) e, como no JAWS, as setas para cima e para baixo têm o mesmo efeito que as guias para frente e para trás.
Dalibor 7/01

Parece que seu narrador - e talvez outras tecnologias assistenciais - anunciam o pressionamento de teclas em vez de realmente seguir a navegação na tela. Confirmei novamente com o Narrador esta manhã e repliquei o comportamento da minha resposta acima.
dvro 7/01

Tive o mesmo resultado (seta para baixo / seta para cima) quando instalei o Screen Reader Simulator for Chrome. Eu uso o Win10 e o Chrome mais recente. Não sei como é possível ter um resultado diferente do que você.
Dalibor

Algo para você verificar: Nas configurações do Narrator, role para baixo até "Alterar o que você ouve ao digitar" e verifique se as caixas de seleção 1, 2 e 5 estão marcadas. Essa é a configuração padrão.
dvro 7/01

Eu tenho as configurações padrão do Narrator, e o Narrator funciona bem na guia referente
Dalibor

0

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>

-1

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


Eu disse especificamente que o elemento não deve ser focável, e o atributo tabindex os torna focáveis.
Dalibor
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.