Elementos interativos indicam a finalidade e o estado

Elementos interativos, como links e botões, precisam indicar o estado deles e ser distinguíveis de elementos não interativos. Para verificar se os elementos interativos indicam a finalidade e o estado deles, use um teste visual e um de leitor de tela.

Como testar manualmente o foco visual

Para testar manualmente o foco visual, TAB na página.

  • Você consegue usar a tecla Tab para acessar cada elemento interativo?
  • Quando você chega a um elemento interativo, há uma indicação visual de que os usuários conseguem interagir com ele?
  • A aparência de cada elemento interativo muda quando você o seleciona?

Há muitas maneiras de definir o estilo dos indicadores de foco para cada elemento interativo. Uma opção é usar :focus. A pseudoclasse :focus permite aplicar um estilo uniforme a um elemento. Esse estilo é aplicado sempre que o elemento está em foco, independente do dispositivo de entrada ou do método usado para focalizar.

Saiba mais em Foco de estilo.

Como testar manualmente com um leitor de tela

Usando um leitor de tela, navegue na página e verifique se ele pode anunciar o nome de cada controle interativo, a função 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 Controles personalizados têm papéis 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 marcadores para entender o contexto desse elemento. Rótulos vagos são comuns e não ajudam para navegar pelo conteúdo. Saiba como melhorar marcadores e alternativas de texto.

Por que isso é importante

Dar dicas visuais sobre a função de um controle ajuda as pessoas a operar e navegar pelo site. Essas dicas são chamadas de affordances. O fornecimento de affordances permite que as pessoas usem seu site em uma grande variedade de dispositivos.

Recursos

O código-fonte de elementos interativos indica a finalidade e o estado da auditoria