Estou fazendo uma pesquisa de satisfação que deve ser acessível aos usuários com leitor de tela.
Para cada pergunta são mostradas opções de respostas contendo um texto "Ótimo, Péssimo, ..." e uma imagem correspondente ao texto. Por fins estéticos não quero utilizar inputs do tipo radio (ou pelo menos não quero que sejam visíveis). Abaixo o código que gera uma das opções para que o usuário escolha:
<div class="item_escala" escala="4">
<div>
<input type="image" src="img/nota4.png" width="48" alt="Bom" onclick="return false;">
</div>
<div class="lb_escala">Bom</div>
</div>
Esse link mostra a solução que já fiz até o momento (incluindo css e javascript): https://jsfiddle.net/moneisa123/o2gxgz9r/13333/
Quando o usuário clica ou da enter em uma das imagens eu altero a cor de fundo da div que contém a imagem para mostrar que o elemento foi selecionado.
Problema 1: No caso do usuário com leitor de tela, como fazer para que, quando ele pressionar enter, o leitor de tela o avise que aquele elemento foi selecionado?
Problema 2: O leitor de tela lê os inputs do tipo image como "botões", o que não é o ideal. Alguma outra sugestão de como apresentar esses elementos de forma acessível?
Obs: Estou testando com o leitor de tela NVDA.