Técnicas para as WCAG 2.0

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

-

C30: Utilizar CSS para substituir texto por imagens de texto e fornecer controlos da interface de utilizador para a comutação

Aplicabilidade

Qualquer tecnologia que suporte CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como o CSS pode ser utilizado para substituir texto HTML estruturado por imagens de texto de uma forma que permita aos utilizadores visualizarem o conteúdo de acordo com as suas preferências. Para utilizar esta técnica, o autor começa por criar uma página HTML que utiliza elementos semantic para marcar a estrutura da página. Em seguida, o autor cria duas ou mais folhas de estilo para essa página. Uma folha de estilo apresenta o texto HTML como texto e a segunda utiliza funcionalidades CSS para substituir algum do texto HTML por imagens de texto. Por último, através da utilização de scripting do lado do cliente ou do lado do servidor, o autor fornece um controlo que permite aos utilizadores mudarem entre as visualizações disponíveis.

Esta técnica pode ser utilizada para cumprir o Critério de Sucesso 1.4.5 ou 1.4.9 se estiver disponível uma apresentação que não inclua imagens de texto, e desde que o controlo da interface de utilizador, fornecido para permitir aos utilizadores mudarem para uma apresentação alternativa, cumpra o critério relevante. Sempre que possível, os autores devem fornecer a apresentação que não inclui imagens de texto como apresentação predefinida. Além disso, o controlo utilizado para a comutação deve estar perto do início da página.

Foram desenvolvidas várias técnicas de "substituição de imagem" para abordar vários problemas de agentes de utilizador, de configuração e compatibilidade com tecnologias de apoio (para mais informações, consulte Recursos). Se por um lado existem várias abordagens que os autores podem utilizar para substituir texto, por outro é importante ter em consideração a compatibilidade com a tecnologia de apoio e se a técnica vai funcionar correctamente caso o scripting, o CSS e as imagens (ou combinações destes) sejam desactivados. Visto ser difícil encontrar uma única solução que funcione em todos os casos, esta técnica recomenda a utilização de um controlo que permita aos utilizadores mudar para uma apresentação que não inclua uma técnica de substituição de imagem.

Nota: Esta técnica pode ser utilizada em conjunto com uma técnica de mudança de estilo para apresentar uma página que seja uma versão alternativa em conformidade para conteúdo que não esteja em conformidade. Para mais informações, consulte C29: Utilizar um comutador de estilo para fornecer uma versão alternativa em conformidade e Noções sobre Versões Alternativas em Conformidade .

Exemplos

Exemplo 1

O sítio da Web de um atelier de design utiliza um comutador de estilo para permitir aos utilizadores visualizarem duas apresentações da página inicial. Na versão predefinida, o texto do cabeçalho é substituído por imagens de texto. Um controlo na página permite aos utilizadores mudar para uma versão que apresenta os cabeçalhos como texto.

O componente CSS:

Código Exemplo:

...
<div id="Header"> 
  <h1><span>Pufferfish Design Studio</span></h1> 
  <h2><span>Surprising Identity and Design Solutions</span></h2> 
  </div> 
 ...

Este é o CSS para a apresentação que inclui imagens de texto. É de salientar que o CSS utiliza o posicionamento para colocar os conteúdos dos elementos heading fora do ecrã para que o texto continue disponível aos utilizadores de leitores de ecrã.

Código Exemplo:

...
#Header h1 {
        background-image: url(pufferfish-logo.png);
        height: 195px;
        width: 290px;
        background-repeat: no-repeat;
        margin-top: 0;
        position: absolute;
        }
#Header h1 span {
        position: absolute;
        left: -999em;
        }
#Header h2 {
        background-image: url(beauty.png);
        background-repeat: no-repeat;
        height: 234px;
        width: 33px;
        margin-left: 8px;
        position: absolute;
        margin-top: 250px;
        }
#Header h2 span {
        position: absolute;
        left: -999em;
        }

Este é o CSS para a apresentação que não inclui imagens de texto.

Código Exemplo:

...
#Header h1 {
        font: normal 200%/100% Garamond, "Times New Roman", serif;
        margin-bottom: 0;
        color: #000099;
        background: #ffffff;
        }

#Header h2 {
        font: normal 160%/100% Garamond, "Times New Roman", serif;
        margin-bottom: 0;
        color: #336600;
        background: #ffffff;
        }

Recursos

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

Testes

Procedimento

  1. Verifique se a página Web inclui um controlo que permite aos utilizadores seleccionar uma apresentação alternativa.

  2. Verifique se quando o controlo é activado, a página resultante inclui texto (texto determinado de forma programática) sempre que forem utilizadas imagens de texto.

Resultados Esperados