3
respostas

Mudança na forma como o leitor de tela lê

Bom dia!

Estou tentando fazer com que o leitor de tela leia algumas abreviações por extenso, por exemplo: RJ - Rio de Janeiro 1.ed. - Primeira edição.

Já tentei incluir um span com aria-label em volta desses textos e não funcionam. E queria uma solução que não precisasse incluir textos escondidos dentro do código.

Alguém sabe uma forma de fazer isso?

Obrigada desde já! =)

3 respostas

Fala nobre. Então, o aria-label foi criado para ser utilizado somente em elementos interativos (imagem, botão, input...), as tags de texto não suportam essa propriedade e o leitor de tela não é capaz de interpretar de fato o texto, ele só consegue ler o que está no DOM. Uma abordagem que poderia te ajuda a resolver o problema é ter os textos de apoio escritos no dom, e informar ao leitor que os textos menores não devem ser lidos, como no exemplo abaixo com o auxilio da classe .sr_only.

<span aria-hidden="true">RJ</span>
<span class="sr-only">Rio de Janeiro</span>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Mas como você mesmo disse, isso seria colocar os textos manualmente no documento e escondê-los. Você até pensar num script que consiga fazer isso dinamicamente, mas acaba pode envolver uma lógica mais complexa.

Minha sugestão é que você procure uma abordagem que consiga unir tanto a experiência visual, quanto a acessibilidade via leitor de tela, utilizando textos que façam sentido nos dois contextos.

Você pode ter mais informações sobre o aria-label no link abaixo https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/Attributes/aria-label

Obrigada pela resposta, Jean! Vou fazer dessa forma.

Legal. Se puder, só não esquece de marcar a mensagem como resposta para encerrar o tópico! Valeu