Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

F78: Falha do Critério de Sucesso 2.4.7 devido àestilização de contornos e limites do elemento de uma forma que remova ou torne o indicador do foco invisível

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha que ocorre quando a indicação visual do foco do teclado predefinida do agente de utilizador é desactivada ou apresentada sem estar visível por outro estilo na página sem fornecer um indicador de foco visual disponibilizado pelo autor. Desactivar o indicador de foco indica ao agente de utilizador para não apresentar o indicador de foco. Outros estilos podem dificultar a visualização do indicador de foco, apesar de o mesmo estar presente, tais como contornos que são semelhantes ao contorno do foco, ou margens que têm a mesma cor do indicador de foco, não permitindo distingui-los.

Exemplos

Exemplo 1: O indicador de foco está desactivado com CSS

O seguinte exemplo de CSS irá remover o indicador de foco predefinido, que não cumpre o requisito de fornecer um indicador de foco visível.

Código Exemplo:

:focus {outline: none}

Exemplo 2: O contorno dos elementos é visualmente semelhante ao indicador de foco

O seguinte exemplo de CSS irá criar um contorno em torno dos links semelhante ao indicador de foco. Isto impossibilita aos utilizadores determinar qual recebe, na realidade, o foco, apesar de o agente de utilizador mover o indicador de foco.

Código Exemplo:

a {outline: thin dotted black}

Exemplo 3: Os elementos têm um contorno que tapa o indicador de foco

O seguinte exemplo CSS cria um contorno em torno dos links que não tem contraste suficiente para permitir a visualização do indicador de foco quando se encontra sobre os links. Neste caso, o indicador de foco é colocado fora do contorno, mas como ambos estão a preto e o contorno tem uma espessura maior do que o indicador de foco, a definição de "visível" deixa de ser cumprida.

Código Exemplo:

a {border: medium solid black}

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Defina o foco para todos os elementos que podem receber foco numa página.

  2. Verifique se o indicador de foco está visível.

Resultados Esperados