Técnicas para as WCAG 2.0

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

-

C23: Especificar o texto e as cores de fundo do conteúdo secundário, tais como faixas, funcionalidades e navegação em CSS e não especificar texto e cores de fundo do conteúdo principal

Aplicabilidade

Páginas que utilizem CSS.

Esta técnica está relacionada com:

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

A maioria dos browsers permite ao utilizador alterar as definições de cor para substituir os esquemas de cor de CSS e HTML das páginas Web. Isto é suportado por todas as versões do Internet Explorer, Firefox, Mozilla, Netscape e Opera, posterior à versão 6.

Quando as cores especificadas são substituídas no Firefox e Netscape, a maioria das caixas de pop-up e dos menus pendentes de JavaScript torna-se inutilizável. As caixas de pop-up adquirem um fundo transparente, sobrepondo o texto da caixa no texto da página, e os menus pendentes tornam-se transparentes ou adquirem um fundo cinzento-escuro.

O Internet Explorer 6 não substitui as cores de fundo, a não ser que a mesma cor de fundo tenha também sido seleccionada nas definições do sistema.

Descrição

Algumas páginas Web utilizam cores para identificar agrupamentos diferentes. O objectivo desta técnica é permitir aos utilizadores seleccionar combinações de cor específicas para o texto e fundo do conteúdo principal, enquanto mantêm os sinais de aviso visuais para os agrupamentos e para a organização da página Web. Quando o utilizador substitui as cores de primeiro plano e de plano de fundo de todo o texto numa página, os sinais de aviso visuais para o agrupamento e para a organização da página Web podem perder-se, tornando-a muito mais difícil de compreender e utilizar.

Quando o autor não especifica as cores do texto e do fundo do conteúdo principal, é possível alterar as cores dessas áreas no browser sem ter de substituir as cores com uma folha de estilo do utilizador. Especificar as cores do texto e do fundo do conteúdo secundário significa que o browser não vai substituir essas cores.

Com esta técnica, o autor utiliza a cor do texto predefinida e a cor do fundo da área principal. Como resultado, as cores são totalmente determinadas pelo agente de utilizador através das preferências de cor do utilizador. O utilizador pode garantir que a selecção de cores satisfaz as suas necessidades e proporciona a melhor experiência de leitura.

Exemplos

Exemplo 1

Uma página da Web em HTML utiliza CSS para especificar as cores do texto e de fundo de todo o conteúdo secundário, tais como barras de navegação, barras de menu e índice. A cor do texto e a de fundo do conteúdo principal não estão especificadas. O utilizador define as suas próprias preferências de cores no browser para visualizar o conteúdo principal nas cores e contrastes que lhes sejam mais favoráveis. A diferença entre as secções separadas da página permanece visualmente óbvia.

Exemplo 2

Uma revista sobre música apresenta um artigo com texto a azul sobre um fundo branco. O sítio da Web fornece um link junto do início da página, que atribui uma folha de estilo diferente à página. A nova folha de estilo não dispõe de nenhumas cores especificadas para o texto ou para o fundo.

Recursos

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

Testes

Procedimento

  1. Altere o texto, o link e as cores de fundo nas definições do browser para que fiquem diferentes da cor predefinida e diferentes das cores definidas para o conteúdo secundário.

    Nota: Não seleccione a opção que indica ao browser para ignorar as cores especificadas na página.

  2. Verifique se o conteúdo principal utiliza o novo texto, o novo link e as novas cores de fundo.

  3. Verifique se as cores do texto, os links e o plano de fundo do conteúdo secundário não alteraram.

Resultados Esperados