Elementos interativos, como links e botões, precisam indicar o estado e ser distinguíveis de elementos não interativos. Para verificar se os elementos interativos indicam a finalidade e o estado, use um teste visual e de leitor de tela.
Como testar manualmente
Teste elementos interativos visualmente e com leitores de tela.
Testar o foco visual
Para testar o foco visual manualmente, pressione TAB para percorrer a página.
- Você consegue TAB para cada elemento interativo?
- Quando você chega a um elemento interativo, há uma dica visual de que os usuários possam interagir com ele?
- A aparência de cada elemento interativo muda quando você o seleciona?
Há muitas maneiras de estilizar os indicadores de foco para cada elemento interativo.
Uma delas é estilizar a pseudoclasse :focus.
Esse estilo é aplicado sempre que o elemento é focado,
independente do dispositivo de entrada ou do método usado para focar.
Saiba mais sobre como estilizar o foco.
Testar com leitores de tela
Use um leitor de tela para navegar na página e verificar se ele anuncia o nome de cada controle interativo, a função desse controle e o estado interativo atual. Se a função de um elemento não estiver clara e o estado dele não estiver claro, talvez seja necessário adicionar os papéis ARIA apropriados.
Saiba mais em Os controles personalizados têm funções ARIA.
Também é importante prestar muita atenção em como os elementos interativos são rotulados. Os usuários de leitores de tela e outras tecnologias adaptativas dependem de identificadores para entender o contexto do elemento. Rótulos vagos são comuns e não são úteis para navegar pelo conteúdo. Saiba como melhorar rótulos e alternativas de texto.
Por que isso é importante
Fornecer dicas visuais sobre o que um controle faz pode ajudar as pessoas a operar e navegar pelo seu site. Essas dicas são chamadas de affordances. As affordances permitem que as pessoas usem seu site em uma ampla variedade de dispositivos.
Recursos
Código-fonte da auditoria elementos interativos indicam a finalidade e o estado