Técnicas para as WCAG 2.0

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

-

F24: Falha dos Critérios de Sucesso 1.4.3, 1.4.6 e 1.4.8 devido àespecificação de cores de primeiro plano sem especificar as cores de fundo e vice-versa

Aplicabilidade

Todas as tecnologias que permitam aos agentes de utilizador controlarem as cores de primeiro plano e de fundo através de folhas de estilo pessoais ou outros meios.

Esta falha está relacionada com:

Descrição

Os utilizadores com perda de visão ou incapacidades cognitivas, de linguagem e de aprendizagem preferem, muitas vezes, combinações específicas de cores de primeiro plano e de fundo. Em alguns casos, as pessoas com baixa visão vão achar muito mais fácil ver uma página Web que tenha texto a branco num fundo a preto, e podem ter definido o seu agente de utilizador para apresentar este contraste. Muitos agentes de utilizador permitem aos autores escolher uma preferência relativamente às cores de primeiro plano e de fundo que pretendem ver sem sobrepor todos os estilos especificados pelo autor. Isto permite que os utilizadores visualizem páginas em que as cores não foram especificadas pelo autor na sua combinação de cores preferida.

A menos que um autor especifique as cores de primeiro plano e de fundo, não poderá garantir que o utilizador obtenha um contraste que cumpra os respectivos requisitos. Por exemplo, se o autor especificar que o texto deve estar a cinzento, pode sobrepor as definições do agente de utilizador e apresentar a página que tenha o texto a cinzento (especificado pelo autor) num fundo a cinzento claro (definido pelo utilizador no seu agente de utilizador). Este princípio também funciona ao contrário. Se o autor definir a cor branca para o fundo, o fundo branco especificado pelo autor pode ser semelhante em termos de cor à preferência de cor do texto definida pelo utilizador no seu agente de utilizador, apresentando assim uma página inutilizável ao utilizador. Uma vez que um autor não pode prever a forma como um utilizador configurou as suas preferências, se o autor especificar uma cor de texto de primeiro plano, também deve especificar uma cor de fundo que tenha um contraste suficiente com o primeiro plano e vice-versa.

Não é necessário que as cores de primeiro plano e de fundo sejam ambas definidas na mesma regra CSS. Uma vez que as propriedades de cor de CSS são herdadas a partir dos elementos ancestor, é suficiente que ambas as cores de primeiro plano e de fundo sejam definidas directamente ou através de herança quando a cor for aplicada a um determinado elemento.

Nota: O procedimento recomendado é incluir todos os estados do texto. Por exemplo, o texto, o texto do link, o texto do link visitado, o texto do link sob o ponteiro do rato e o foco do teclado, etc.

Exemplos

Exemplo de Falha 1: Especificar apenas a cor de fundo com bgcolor em HTML

No exemplo abaixo, a cor de fundo é definida no elemento body, contudo a cor de primeiro plano não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                            
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>A study of population dynamics</title>
          </head>
          <body bgcolor="white">
              <p> ... document body...</p>
          </body>
  </html>

Exemplo de Falha 2: Especificar apenas a cor de primeiro plano com color em HTML

No exemplo abaixo, a cor de primeiro plano é definida no elemento body, contudo a cor de fundo não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</title>

</head>
<body color="white">
  <p>... document body...</p>
</body>
</html>

Exemplo de Falha 3: Especificar apenas a cor de fundo com CSS

No exemplo abaixo, a cor de fundo é definida na folha de estilo CSS, contudo a cor de primeiro plano não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">

       body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>

Exemplo de Falha 4: Especificar apenas a cor de fundo com CSS

No exemplo abaixo, a cor de primeiro plano é definida na folha de estilo CSS, contudo a cor de fundo não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>

  <body>
    <p>My foreground is white.</p>
  </body>
</html>

Exemplo de Falha 5: Especificar a cor de fundo do texto do link com CSS

No exemplo abaixo, a cor do texto do link (de primeiro plano) é definida no elemento body. Contudo, a cor de fundo não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                           <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</TITLE>
 <style type="text/css">
  a:link { color: red }
  a:visited { color: maroon }
  a:active { color: fuchsia }
 </style>

</head>
<body>
  <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>

Recursos

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

Testes

Procedimento

  1. Verifique o código da página Web.

  2. Verifique se existe uma cor de primeiro plano especificada pelo autor.

  3. Verifique se existe uma cor de fundo especificada pelo autor.

Nota 1: As cores e a cor de fundo podem ser especificadas em qualquer nível da cascata de selectores precedentes, através de folhas de estilo externas ou de regras de herança.

Nota 2: A cor de fundo também pode ser especificada utilizando uma imagem de fundo com a propriedade 'background-image' (imagem de fundo) de CSS ou com a propriedade 'background' (fundo) de CSS (com o URI da imagem, por ex., 'background: url("images/bg.gif")'). Com as imagens de fundo, ainda é necessário especificar uma cor de fundo, uma vez que os utilizadores podem ter imagens desactivadas no seu browser, mas a imagem de fundo e a cor de fundo têm de ser verificadas.

Resultados Esperados

Se o passo 2 for verdadeiro, mas o passo 3 for falso, OU se o passo 3 for verdadeiro, mas o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.