Estados, propriedades e valores de componentes customizados
O que a norma pede
Nos componentes cujos estados, propriedades e valores a pessoa pode alterar (marcar, expandir, ajustar um valor), essas alterações também podem ser feitas e lidas pela tecnologia assistiva.
- 4.1.2 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Documente o valor mínimo, o máximo e o atual dos controles ajustáveis, como sliders e seletores de quantidade, e especifique como mudar o valor pelo teclado. Prefira controles nativos.
Avaliação por estrelas
A pessoa avalia o atendimento de 1 a 5.
Errado: Só clique
Na especificação
Cinco estrelas clicáveis.
O leitor não lê nem muda o valor.
Certo: Grupo de opções
Na especificação
Grupo de rádio “Nota do atendimento”, 1 a 5, com estrelas como visual.
Valor lido e alterável por todos.
Use inputs nativos, como range e checkbox, sempre que possível. Em controles customizados, mantenha os atributos de valor, como aria-valuenow, sincronizados e responda às setas.
Seletor de quantidade
Controle de número de acompanhantes.
Errado: Valor só visual
<div class="quantidade">2</div> <span onclick="mais()">+</span>O leitor não lê nem muda o valor.
Certo: Campo nativo
<label for="acomp">Acompanhantes</label> <input id="acomp" type="number" min="0" max="3" value="2">Valor lido e alterável.
Mapeie os controles ajustáveis customizados do produto e priorize a troca por controles nativos, com teste de leitor de tela na aceitação. Se a pessoa não consegue alterar um valor, não conclui o formulário.
Pesquisa de satisfação
A pesquisa usa estrelas customizadas.
Errado: Mantida
Situação
Estrelas só por clique.
Pessoas cegas não avaliam o serviço.
Certo: Refeita
Situação
Estrelas sobre rádios nativos.
Todos avaliam.
Com o leitor de tela, leia o valor atual de cada controle ajustável e altere-o pelo teclado. O novo valor precisa ser anunciado.
Slider de valor
Teste com leitor de tela.
Errado: Valor não anunciado
“Controle deslizante”
Seta → (nada anunciado)
Não atende.
Certo: Valor anunciado
“Valor do empréstimo, controle deslizante, R$ 5.000”
Seta → “R$ 5.500”
Atende.
Forneça o formato de leitura dos valores, com unidade, como “R$ 5.000” ou “3 de 5 estrelas”, e nomeie os extremos das escalas, como “1 = muito ruim”.
Escala de avaliação
Texto da escala de 1 a 5.
Errado: Só números
Opções
1, 2, 3, 4, 5
Não se sabe o que cada número significa.
Certo: Com sentido
Opções
1 (muito ruim) a 5 (muito bom)
A escala é clara.