Analise a falta de indicação do foco do teclado

Os usuários de teclado precisam saber onde estão em uma página da Web. Quando um usuário de teclado toca para um link ou botão, o link ou botão deve ter uma indicação visual de que está em foco. Essa indicação visual geralmente é um contorno em torno do elemento focado.

Na página da Web de demonstração de teste de acessibilidade, o menu de navegação da barra lateral com links azuis não indica visualmente qual link tem foco, ao usar um teclado. Para descobrir por que a falta de indicação visual do foco do teclado é confusa, tente tabular até os links azuis na página de demonstração. O botão azul Cats tem foco, como evidenciado pelas informações do link de destino exibidas no canto inferior esquerdo da janela do navegador, mas não há nenhuma indicação visual de que o foco esteja nesse botão:

Analise a falta de indicação de foco usando a ferramenta Fontes

Para ver quais estilos CSS são aplicados a um link, como um botão vinculado, use a ferramenta Fontes :

1. Abra a página da Web de demonstração do teste de acessibilidade em uma nova janela ou guia.

2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

3. Clique no botão Inspecionar () no canto superior esquerdo do DevTools para que o botão seja realçado (azul).

4. Passe o mouse sobre o botão azul Gatos no menu de navegação da barra lateral da página. A sobreposição Inspecionar aparece e indica que o a elemento pode ser focalizado no teclado:

   

   Mas a sobreposição Inspecionar não mostra que o elemento não tem uma indicação visual quando o link está em foco.

5. Na página da Web renderizada, clique no botão Gatos .

   A ferramenta Inspecionar é desativada e a ferramenta Elementos é aberta, realçando o a nó na árvore DOM. A regra #sidebar nav li a CSS aparece na guia Estilos , juntamente com um link para um número de linha em styles.css:

   

6. Clique no styles.css link. O arquivo CSS é aberto na ferramenta Fontes :

   

   Observe que a #sidebar nav li a regra CSS tem uma configuração de propriedade CSS de , que remove a estrutura de outline: nonetópicos que os navegadores adicionam automaticamente quando você focaliza links usando um teclado.

   O arquivo CSS contém uma regra CSS que usa a :hover pseudo-classe, que é usada para indicar em qual item de menu você está quando usa um mouse: #sidebar nav li a:hover. No entanto, o arquivo CSS não contém uma regra CSS que usa a :focus pseudo-classe, como #sidebar nav li a:focus. Isso significa que não há estilos CSS usados para indicar visualmente em qual item de menu você está ao usar um teclado.

   

Simular o estado de foco usando o painel Estilos

Em vez de focar o link usando um teclado, você pode simular o estado de foco usando o painel Estilos :

1. Abra a página da Web de demonstração do teste de acessibilidade em uma nova janela ou guia.

2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar.

3. Clique no botão Inspecionar () no canto superior esquerdo do DevTools e, em seguida, clique no link Cats na página da Web renderizada. O <a href="#cats">Cats</a> nó é realçado na ferramenta Elementos .

4. No painel Estilos , clique no botão Alternar estado do elemento (:hov). A seção Estado do elemento Force é exibida.

5. Marque a :focus caixa de seleção. O estado de foco é aplicado ao link, mas o link não tem uma indicação visual de foco:

   

Confira também

• Acompanhar qual elemento tem o foco