Técnicas para as WCAG 2.0

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

-

C15: Utilizar CSS para alterar a apresentação de um componente de interface de utilizador quando este recebe o foco

Aplicabilidade

CSS, HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O Internet Explorer 6.0 e as versões anteriores para Windows não suportam pseudo-classes dinâmicas para quaisquer elementos, excepto hiperligações. O Internet Explorer 7 não suporta estilos :focus para elementos que não sejam hiperligações. Inclua a pseudo-classe CSS :active para obter o mesmo efeito que o :focus no Internet Explorer para links (X)HTML (um elemento).

O Firefox 1.5, Firefox 2.0 e SeaMonkey 1.1 para Windows suportam pseudo-classes dinâmicas para campos de entrada de texto, áreas de texto, botões de opção, caixas de verificação, elementos select, botões Submeter/Repor e elementos button. Contudo, não é suportada a definição de cores diferentes ou margens quando um botão de opção ou uma caixa de verificação recebe o foco.

O Opera 9.02 para Windows suporta pseudo-classes dinâmicas para campos de entrada de texto, áreas de texto, botões de opção, caixas de verificação, elementos select, botões Submeter/Repor, mas não para elementos button.

O Firefox 2.0, Opera 9.02 e SeaMonkey 1.1 para Windows também suportam selectores relacionados adjacentes para etiquetas de formulário. O Firefox 1.5, o Internet Explorer 6.0 e versões anteriores para Windows não suportam selectores relacionados adjacentes para etiquetas de formulário.

Descrição

O objectivo desta técnica é demonstrar como o aspecto visual pode ser melhorado através de folhas de estilo, para fornecer um feedback visual quando um elemento interactivo recebe o foco, ou quando o utilizador coloca um dispositivo apontador sobre o elemento. Realçar o elemento que recebe o foco ou que está sob um dispositivo apontador pode fornecer informações, tais como o facto de o elemento ser interactivo ou o âmbito do elemento interactivo.

Existe mais de uma forma de fornecer um feedback visual. Normalmente, é obtido colocando o ponteiro do rato sobre o elemento ou utilizando a tecla de tabulação de um teclado para percorrer até ao elemento.

Exemplos

Exemplo 1: Elementos link

Neste exemplo, os indicadores de foco do rato e do teclado foram aplicados aos elementos link. O CSS foi utilizado para aplicar uma cor de fundo quando os elementos link recebem o foco.

Este é o conteúdo a ser apresentado:

Código Exemplo:

<ul id="mainnav">
  <li class="page_item">Home</li>
  <li class="page_item"><a href="/services">Services</a></li>
  <li class="page_item"><a href="/projects">Projects</a></li>
  <li class="page_item"><a href="/demos">Demos</a></li>
  <li class="page_item"><a href="/about-us">About us</a></li>
  <li class="page_item"><a href="/contact-us">Contact us</a></li>
  <li class="page_item"><a href="/links">Links</a></li>
</ul>

Este é o CSS que altera a cor de fundo para os elementos acima indicados, quando estes recebem o foco do rato ou do teclado:

Código Exemplo:

#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
  background-color: #DCFFFF;
  color:#000066;
}

Exemplo 2: Realçar os elementos que recebem o foco

Neste exemplo, a pseudo-classe :focus é utilizada para alterar o estilo aplicado aos campos de entrada de dados quando estes recebem o foco, alterando a cor de fundo.

Código Exemplo:

<html>
  <head>
    <style type="text/css">
      input.text:focus {
        background-color: #7FFF00; color: #000;
      }
      input[type=checkbox]:focus + label, input[type=radio]:focus + label {
        background-color: #FF6: color: #000; 
      }
    </style>
  </head>
  <body>
    <form method="post" action="form.php">
      <p><label for="fname">Name: </label>
        <input class="text" type="text" name="fname" id="fname" />
      </p>
      <p>
        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
      <p>
    </form>
  </body>
</html> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

Para cada elemento capaz de obter o foco:

  1. Coloque o ponteiro do rato sobre o elemento.

  2. Verifique se o fundo ou as margens mudam de cor.

  3. Afaste o ponteiro do rato do objecto antes de tentar o foco do teclado.

  4. Utilize a tecla de tabulação do teclado para percorrer até ao elemento.

  5. Verifique se o fundo ou as margens mudam de cor.

  6. Verifique se as alterações de cor do fundo ou das margens são removidas quando o elemento perde o foco.

Resultados Esperados