3

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.

1
  • Será que fazendo uns radio ocultos não resolveria? Por exemplo, um radio oculto para cada botão, e quando o botão for selecionado, o radio oculto referente ao botão seja selecionado.
    – Meu ovo
    2/09/2017 às 0:20

1 Resposta 1

1

Você pode fazer apenas com CSS, nem precisa de JS, e pode manter os inputs do tipo radio usando uma label para cada input, assim não afeta a acessibilidade.

Tenta isso aqui:

HTML

<ul class="custom-radio">
  <li><input type="radio" name="radio" value="1" id="radio01" /><label for="radio01">Option 1</label></li>
  <li><input type="radio" name="radio" value="2" id="radio02" /><label for="radio02">Option 2</label></li>
  <li><input type="radio" name="radio" value="3" id="radio03" /><label for="radio03">Option 3</label></li>
</ul>

CSS

.custom-radio {
  font-family: sans-serif;
  font-size: 1.8em;
  margin: 0;
  padding: 1em;
  list-style-type: none;
}
.custom-radio li {
  float: left;
  margin-right: 0.5em;
}
.custom-radio label {
  padding: .5em;
  color: #ccc;
  border: solid 3px #ccc;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}
.custom-radio input[type="radio"] {
  display: none;
}
.custom-radio input[type="radio"]:checked + label {
  border-color: #33cc33;
  color: #33cc33;
}
1
  • 1
    Funcionou muito bem, obrigada! 17/11/2017 às 17:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .