Técnicas para as WCAG 2.0

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

-

G195: Utilizar um indicador de foco de alta visibilidade fornecido pelo autor

Aplicabilidade

Aplicável em geral.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é melhorar o indicador do foco no browser, criando um de alta visibilidade no conteúdo. Em muitos browsers, o indicador de foco predefinido é uma linha preta, fina e tracejada. Pode ser difícil ver a linha quando está à volta de um elemento de formulário que já tem contorno, quando o elemento que recebe o foco se encontra dentro da célula de uma tabela, quando o elemento que recebe o foco é muito pequeno ou quando o fundo da página tem uma cor escura.

Nesta técnica, quando o utilizador coloca o foco sobre um elemento, utilizando o rato, a tecla de tabulação, as teclas de cursor, os atalhos de teclado ou qualquer outro método, a aplicação torna o foco mais visível, utilizando uma combinação de uma cor de alto contraste, um linha fina e outros indicadores visuais, tais como o brilho.

Exemplos

Exemplo 1: Links

Uma página Web tem um fundo com uma cor escura e o texto e os links com uma cor clara. Quando o foco é colocado sobre um link, este é realçado com uma linha em amarelo vivo, com 3 pixéis.

Exemplo 2: Elementos de Formulário

Uma página Web inclui um formulário dentro de uma tabela. Os limites da tabela e dos elementos de formulário são linhas pretas e finas. Quando o foco é colocado sobre um elemento de formulário, o elemento é realçado com uma linha vermelha de 5 pixéis que é parcialmente transparente.

Exemplo 3: Menus

Uma página Web inclui um menu interactivo com submenus. Um utilizador pode mover o foco no menu utilizando as teclas de cursor. À medida que o foco se move, o item de menu actualmente com o foco muda o fundo para uma cor diferente, com uma relação de contraste de 3:1 com os itens circundantes e uma relação de contraste de 4.5:1 com o seu próprio texto.

Testes

Procedimento

  1. Utilizando o rato, coloque o foco em cada elemento da interface de utilizador que pode receber foco existente na página.

  2. Verifique se existe um indicador de foco de alta visibilidade.

  3. Utilizando o teclado, coloque o foco em cada elemento da interface de utilizador que pode receber foco existente na página.

  4. Verifique se existe um indicador de foco de alta visibilidade.

Resultados Esperados