Verifique a acessibilidade de todos os estados dos elementos

Verifique a acessibilidade de todos os estados dos elementos, como o contraste da cor do texto durante o hover estado. A ferramenta Inspecionar relata problemas de acessibilidade para um estado por vez. Para marcar a acessibilidade dos vários estados dos elementos, na guia Estilos, use a seção :hov (Alternar estado do elemento) do painel Estilos, conforme descrito neste artigo.

Primeiro, mostramos por que a simulação de estado é necessária ao usar a ferramenta Inspecionar e, em seguida, mostramos como usar a simulação de estado.

Verificando o contraste da cor do texto no estado padrão

Para marcar o contraste da cor do texto de elementos individuais em uma página da Web, use a sobreposição de página da ferramenta Inspecionar:

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

  2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

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

  4. Passe o mouse sobre os elementos na página da Web renderizada. A sobreposição de informações da ferramenta Inspecionar é exibida, mostrando informações sobre o elemento sob o ponteiro do mouse.

    Se as informações de contraste estiverem disponíveis, a sobreposição Inspecionar mostrará a taxa de contraste e um item da caixa de seleção. Um ícone de marca de seleção verde indica que há contraste suficiente e um ícone de alerta amarelo indica que não há contraste suficiente.

    Por exemplo, os links no menu de navegação da barra lateral têm contraste suficiente, conforme mostrado na sobreposição Inspecionar :

    Os links no menu de navegação da barra lateral têm contraste suficiente, conforme mostrado na sobreposição Inspecionar

    O item da lista Cachorros verdes na seção de status de doação não tem contraste suficiente e, portanto, é sinalizado por um aviso na sobreposição Inspecionar:

    Um elemento que não tem contraste suficiente é sinalizado por um aviso na sobreposição Inspecionar

Passar o mouse quando a ferramenta Inspecionar está ativa não mostra o contraste da cor do texto para o estado de foco

A sobreposição de informações da ferramenta Inspecionar representa apenas um único estado. Os elementos na página podem ter estados diferentes, todos os quais precisam ser testados. Por exemplo, quando você passa o ponteiro do mouse sobre o menu da página de demonstração de testes de acessibilidade, os itens do menu mudam de cor.

Primeiro, confirme se as animações são executadas quando a ferramenta Inspecionar:

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

  2. Passe o mouse sobre os itens de menu azul no menu de navegação da barra lateral. A cor do item de menu é animada ao focalizar:

    O item de menu mostrando cores diferentes quando o ponteiro do mouse está sobre ele

Em seguida, confirme se as animações não são executadas ao usar a ferramenta Inspecionar:

  1. 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.

  2. Clique no botão Inspecionar ferramenta (ícone da ferramenta Inspecionar) no canto superior esquerdo do DevTools.

  3. Na página da Web renderizada, passe o mouse sobre os links azuis no menu de navegação da barra lateral. As animações para os itens do menu não são executadas. Em vez disso, os itens de menu são exibidos usando o realce de cores para a sobreposição do flexbox.

    Ao usar a ferramenta Inspecionar , você não pode acessar o hover estado nos elementos para testar a taxa de contraste do texto, porque o hover estado em seus estilos não é disparado.

Verificar se há contraste de texto suficiente dessa maneira não é suficiente, pois os elementos na página podem ter estados diferentes.

Use a simulação de estado para simular o estado de foco de um item de menu animado

Quando a ferramenta Inspecionar está ativa, em vez de passar o mouse sobre um elemento animado, você precisa simular o estado do item de menu. Para simular o estado de um item de menu, use a simulação de estado no painel Estilos . O painel Estilos tem um botão :hov (Alternar Estado do Elemento), que exibe um grupo de caixas de seleção rotuladas Forçar estado do elemento.

Para ativar o estado de foco ao usar a ferramenta Inspecionar:

  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 (botão Inspecionar ferramenta) no canto superior esquerdo do DevTools para que o ícone seja realçado (azul).

  4. Na página da Web renderizada, clique no link azul Gatos no menu de navegação da barra lateral. A ferramenta Elementos é aberta, com o elemento <a href="#cats">Cats</a> selecionado:

    Inspecionar o elemento que tem um estado de foco na ferramenta Elementos

  5. No painel Estilos , clique no botão Alternar estado do elemento (:hov). A seção Forçar estado do elemento é exibida:

    A ferramenta de simulação de estado mostrando todas as opções

  6. Clique na caixa de seleção :hover . No DOM, à esquerda do elemento <a href="#cats">Cats</a>, um ponto amarelo aparece, indicando que o elemento tem um estado simulado. O item de menu Gatos agora aparece na página da Web como se o ponteiro estivesse passando sobre ele, e qualquer animação que esteja no item de menu pode ser executada:

    DevTools simulando um estado de foco

Verifique o contraste do elemento ao passar o mouse sobre ele

Depois que o estado simulado for aplicado, você poderá usar a ferramenta Inspecionar novamente para marcar o contraste do elemento quando o usuário passar o mouse sobre ele, da seguinte maneira:

  1. Continuando de cima, clique no botão Inspecionar (ícone do inspetor) no canto superior esquerdo do DevTools para que o ícone seja realçado (azul).

  2. Passe o mouse sobre o link azul Cats no menu de navegação da barra lateral. O link agora está azul claro, devido ao estado de foco simulado. A sobreposição de informações da ferramenta Inspecionar é exibida, mostrando um ponto de exclamação laranja na linha Contraste , indicando que o contraste não é alto o suficiente:

    Testar o contraste de um elemento em um estado de foco simulado

A simulação de estado também é uma boa maneira de marcar se você considerou diferentes necessidades do usuário, como as necessidades dos usuários de teclado. Usando as caixas de seleção Forçar estado do elemento, você pode simular o estado e marcar se os :focus elementos focalizáveis mudam para indicar que eles têm foco. A falta de um indicador quando um elemento tem foco é um problema de acessibilidade. Para saber mais, consulte Analisar a falta de indicação de foco do teclado.

  • Last updated on