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

Os utilizadores de teclado precisam de saber onde se encontram numa página Web. Quando um utilizador de teclado acede a uma ligação ou a um botão, a ligação ou botão deve ter uma indicação visual de que tem o foco. Normalmente, esta indicação visual é um destaque em torno do elemento focado.

Na página Web de demonstração de teste de acessibilidade, o menu de navegação da barra lateral com ligações azuis não indica visualmente que ligação tem foco ao utilizar um teclado. Para descobrir por que motivo a falta de indicação do foco do teclado visual é confusa, tente aceder às ligações azuis na página de demonstração. O botão Gatos azul tem o foco, conforme evidenciado pelas informações da ligação de destino que são apresentadas no canto inferior esquerdo da janela do browser, mas não existe nenhuma indicação visual de que o foco esteja nesse botão:

Analisar a falta de indicação de foco com a ferramenta Origens

Para ver que estilos de CSS são aplicados a uma ligação, como um botão ligado, utilize a ferramenta Origens :

1. Abra a página Web de demonstração de teste de acessibilidade numa nova janela ou separador.

2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar. Em alternativa, prima F12. O DevTools é aberto junto à página Web.

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

4. Paire o cursor sobre o botão gatos azul no menu de navegação da barra lateral da página. A sobreposição Inspecionar é apresentada e indica que o a elemento é Centrado no teclado:

   

   No entanto, a sobreposição Inspecionar não mostra que o elemento não tem uma indicação visual quando a ligação tem o foco.

5. Na página Web composta, 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 é apresentada no separador Estilos , juntamente com uma ligação para um número de linha em styles.css:

   

6. Clique na styles.css ligação. O ficheiro CSS é aberto na ferramenta Origens :

   

   Repare que a #sidebar nav li a regra CSS tem uma definição de propriedade CSS de , que remove o destaque que os browsers adicionam automaticamente quando concentra ligações através de outline: noneum teclado.

   O ficheiro CSS contém uma regra CSS que utiliza a :hover pseudoclasse, que é utilizada para indicar o item de menu que está a utilizar quando utiliza um rato: #sidebar nav li a:hover. No entanto, o ficheiro CSS não contém uma regra CSS que utilize a :focus pseudoclasse, como #sidebar nav li a:focus. Isto significa que não existem estilos CSS utilizados para indicar visualmente em que item de menu se encontra quando utiliza um teclado.

   

Simular o estado de detalhe com o painel Estilos

Em vez de focar a ligação através de um teclado, pode simular o estado de detalhe através do painel Estilos :

1. Abra a página Web de demonstração de teste de acessibilidade numa nova janela ou separador.

2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar.

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

4. No painel Estilos , clique no botão Alternar estado do elemento (:hov). É apresentada a secção Forçar estado do elemento .

5. Selecione a :focus caixa de verificação. O estado de foco é aplicado à ligação, mas a ligação não tem uma indicação visual do foco:

   

Confira também

• Controlar que elemento tem o foco