Instruções para componentes customizados
O que a norma pede
Componentes feitos sob medida que exigem interações complexas ou pouco previsíveis trazem instruções de como usá-los.
- 3.3.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:
Prefira padrões conhecidos a componentes inéditos. Quando criar um componente com interação pouco comum, desenhe junto uma instrução curta e visível perto dele.
Seletor de faixa de renda
Um controle deslizante com duas alças define a faixa de renda.
Errado: Sem orientação
No protótipo
Slider duplo sem texto de apoio.
A pessoa não sabe que há duas alças nem como movê-las.
Certo: Com instrução
No protótipo
“Mova as duas alças para definir o mínimo e o máximo. Pelo teclado, use as setas.”
O componente se explica.
Associe a instrução ao componente com aria-describedby e mantenha-a visível para todos. Siga os padrões de teclado do ARIA Authoring Practices Guide.
Grade editável
Uma tabela permite editar células com o teclado.
Errado: Instrução ausente
<div role="grid" aria-label="Dependentes">…</div>O leitor anuncia a grade, mas não como editar.
Certo: Instrução associada
<p id="ajuda-grade">Use as setas para mover e Enter para editar.</p> <div role="grid" aria-label="Dependentes" aria-describedby="ajuda-grade">…</div>A instrução é lida junto com o componente.
Questione a necessidade de componentes customizados antes de aprová-los, porque eles pedem instrução e teste extras. Quando forem necessários, inclua a instrução de uso no escopo da entrega.
Proposta de componente novo
O design propõe um seletor de horário em formato de relógio.
Errado: Aprovado só pelo visual
Decisão
Componente aprovado sem instruções nem plano de teste.
Muitas pessoas não entendem como escolher o horário.
Certo: Aprovado com condições
Decisão
Aprovado com instrução visível e alternativa de lista de horários.
Inovação sem deixar ninguém para trás.
Use o componente como alguém que nunca o viu, pelo teclado e com leitor de tela. Se não ficar claro como operá-lo, ou se as teclas descritas não funcionarem, registre o defeito.
Mapa de escolha de assentos
O leitor de tela chega ao mapa de assentos do auditório.
Errado: Sem orientação
“Mapa de assentos, grade”
Setas → nenhum retorno
Não se sabe como escolher um assento.
Certo: Com orientação
“Mapa de assentos, grade. Use as setas para percorrer e Espaço para escolher.”
Seta → “Fileira C, assento 4, livre”
A instrução e o retorno guiam a escolha.
Escreva a instrução no imperativo e em até duas frases, dizendo o que fazer e não como o componente funciona por dentro. Teste o texto com quem nunca usou o componente.
Instrução do seletor de datas
O seletor permite escolher um período.
Errado: Instrução técnica
Na tela
“Componente de intervalo com seleção de início e fim por eventos de clique.”
Descreve o componente, e não o que fazer.
Certo: Instrução prática
Na tela
“Escolha a data de início e depois a de fim. Pelo teclado, use as setas e Enter.”
Diz o que fazer, em linguagem simples.