Técnicas para as WCAG 2.0

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

Técnicas CSS para as WCAG 2.0

Esta página Web lista as Técnicas CSS de Técnicas para as WCAG 2.0: Técnicas e Falhas para as Directrizes de Acessibilidade para o Conteúdo da Web 2.0. Para informação sobre as técnicas, consulte Introdução às Técnicas para as WCAG 2.0. Para uma lista das técnicas utilizadas em outras tecnologias, consulte e Índice.


Índice



C6: Colocar conteúdo baseado em marcação estrutural

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como o aspecto visual pode ser melhorado através de folhas de estilo, mantendo uma apresentação com significação quando as folhas de estilos não são utilizadas. Ao utilizar-se as propriedades de posicionamento CSS2, o conteúdo pode ser visualizado em qualquer posição na janela do utilizador. A utilização de elementos estruturais garante que o significado do conteúdo possa ser determinado quando a estilização não está disponível.

Exemplos

Exemplo 1

Neste exemplo, a marcação estrutural (listas de definições) foi aplicada ao conteúdo. Utilizou-se o CSS para estilizar o conteúdo num formulário em colunas. Cada classe coloca o conteúdo em colunas e as margens são definidas para 0, para se sobreporem ao comportamento predefinido de agentes de utilizador, de modo a apresentar as listas de definições HTML com o elemento DD com avanço.

Este é o conteúdo a ser apresentado:

Código Exemplo:

              <div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
    </dt>
  </dl>
 </div>

Este é o CSS que coloca e estiliza os elementos apresentados acima:

Código Exemplo:

              .item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }

Quando se aplicam as folhas de estilo, os dados são apresentados em duas colunas com os títulos "Produtos" e "Localizações”. Quando não se aplicam as folhas de estilo, o texto aparece numa lista de definições que mantém a estrutura e a ordem de leitura.

Recursos

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

Testes

Procedimento

Para conteúdo que utilize CSS para posicionamento.

  1. Remova a informação sobre o estilo do documento ou desactive a utilização de folhas de estilo no agente de utilizador.

  2. Verifique se as relações estruturais e o significado do conteúdo são mantidos.

Resultados Esperados

  • O passo 2 é verdadeiro.


C7: Utilizar CSS para ocultar uma parte do texto do link

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer suplementos ao texto do link, adicionando texto que descreva a funcionalidade exclusiva do link, mas estilizando o texto adicional de modo a não ser apresentado no ecrã por agentes de utilizador que suportem CSS. Quando a informação no contexto circundante é necessária para interpretar o texto do link apresentado, esta técnica fornece uma descrição completa da função de entrada de dados do link, permitindo que o texto menos completo seja apresentado.

Esta técnica funciona através da criação de um selector CSS para procurar texto que está oculto. O conjunto de regras para o selector coloca o texto oculto numa caixa com 1 pixel, com o excesso oculto, e posiciona o texto fora da janela. Isto garante que o texto não é visualizado no ecrã, mas que permanece acessível às tecnologias de apoio, tais como leitores de ecrã e apresentações em braille. É de salientar que a técnica não utiliza as propriedades visibility:hidden nem display:none, visto que estas podem ter o efeito não intencional de ocultar o texto às tecnologias de apoio, para além de impedir a apresentação no ecrã.

Nota 1: Esta técnica de ocultar o texto do link tem sido defendida por alguns utilizadores de leitores de ecrã e autores da Web empresariais. A sua eficácia foi comprovada em alguns sítios da Web. Outros utilizadores de leitores de ecrã e peritos em acessibilidade não a recomendam como técnica geral, visto que os resultados podem apresentar demasiada comunicação e limitar a capacidade de um utilizador de leitor de ecrã com experiência de controlar o excesso de palavras. O grupo de trabalho é de opinião que a técnica pode ser útil às páginas Web que não tenham conteúdo repetido nas áreas de texto ocultas.

Nota 2: 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

Os seguintes exemplos utilizam o selector CSS e o seguinte conjunto de regras:

a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

Exemplo 1

Este exemplo descreve um sítio da Web de notícias que contém uma série de breves resumos de notícias, seguidos de um link que indica "notícia completa". O texto do link oculto descreve a finalidade do link.

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body> 
<p>Washington has announced plans to stimulate economic growth.
  <a href="#"> <span>Washington stimulates economic growth </span>
  Full Story</a></p>
</body>
</html>

Exemplo 2

Este exemplo descreve um recurso que contém livros electrónicos em diferentes formatos. O título de cada livro é seguido de links que indicam "HTML" e "PDF”. O texto oculto descreve a finalidade de cada link.

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
   <dd><a href="winnie_the_pooh.html">
      <span>Winnie the Pooh </span>HTML</a></dd>
   <dd><a href="winnie_the_pooh.pdf">
         <span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
    <dd><a href="war_and_peace.html">
      <span>War and Peace </span>HTML</a></dd> 
    <dd><a href="war_and_peace.pdf">
      <span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>

Recursos

Testes

Procedimento

Para cada elemento anchor que utilize esta técnica:

  1. Verifique se foi definido um elemento que limite a sua visualização a um pixel e que coloque o texto fora da visualização, com o excesso oculto.

  2. Verifique se o elemento dessa classe está incluído no conteúdo do anchor

  3. Verifique se o conteúdo associado do anchor descreve a finalidade do link.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


C8: Utilizar o espaçamento entre letras CSS para controlar o espaçamento numa palavra

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como o aspecto visual do espaçamento no texto pode ser melhorado através de folhas de estilo, mantendo a sequência de texto com significação. A propriedade CSS letter-spacing ajuda os programadores a controlar o espaço em branco entre caracteres. Isto é preferível a adicionar caracteres em branco para controlar o espaçamento, visto que os caracteres em branco podem alterar o significado e a pronúncia da palavra.

Exemplos

Exemplo 1: Separar caracteres numa palavra

O seguinte CSS acrescentaria o equivalente a um espaço entre cada carácter num cabeçalho de nível 2:

Código Exemplo:

h2
{
	letter-spacing: 1em;
}

Assim, para a marcação:

Código Exemplo:

<h2>Museum</h2>

o resultado apresentado terá o seguinte aspecto:

Código Exemplo:

M u s e u m

Recursos

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

Testes

Procedimento

Para cada palavra que pareça ter um espaçamento entre caracteres que não seja normal:

  1. Verifique se a propriedade CSS letter-spacing foi utilizada para controlar o espaçamento.

Resultados Esperados

  • O passo 1 é verdadeiro.


C9: Utilizar CSS para incluir imagens decorativas

Aplicabilidade

Qualquer tecnologia que possa utilizar CSS para incluir imagens.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo para adicionar imagens meramente decorativas e imagens utilizadas na formatação visual para conteúdo da Web, sem necessitar de marcações adicionais no conteúdo. Isto permite às tecnologias de apoio ignorarem o conteúdo não textual. Alguns agentes de utilizador podem ignorar ou desactivar o CSS a pedido do utilizador, para que as imagens em plano de fundo incluídas com CSS simplesmente "desapareçam" e não interfiram com as definições de visualização, tais como tipos de letras ampliados ou definições de alto contraste.

As imagens em plano de fundo podem ser incluídas com as seguintes propriedades CSS:

  • background,

  • background-image,

  • content, em combinação com os pseudo-elementos :before and :after,

  • list-style-image.

Nota: Esta técnica não é apropriada para qualquer imagem que transmita informação ou forneça funcionalidade, nem para qualquer imagem cuja intenção principal seja criar uma experiência sensorial específica.

Exemplos

Exemplo 1: Imagem em plano de fundo para uma página HTML

A folha de estilo para uma página Web especifica uma imagem em plano de fundo para toda a página.

Código Exemplo:

              …
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
…

Exemplo 2: Imagem em plano de fundo com CSS para rollover de imagens

A folha de estilo para uma página Web utiliza a propriedade CSS background para criar um efeito rollover decorativo quando o utilizador coloca o ponteiro do rato sobre um link.

Código Exemplo:

a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
   text-decoration: none;
}

Exemplo 3: Imagens em plano de fundo com CSS para criar cantos arredondados em separadores ou outros elementos

A folha de estilo para uma página Web utiliza a propriedade CSS background para criar cantos arredondados em elementos.

Código Exemplo:

…
<style type="text/css">
 div#theComments { width:600px; }
 div.aComment { background: url('images/middle.gif') repeat-y left top; 
 margin:0 0 30px 0; }
 div.aComment blockquote { background: url('images/top.gif') no-repeat left top; 
 margin:0; padding:8px 16px; }
 div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top; 
 margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
 <div class="aComment">
  <blockquote>
   <p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
  </blockquote>
  <div class="submitter">
   <p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
  </div>
 </div>
 <div class="aComment">
 …
 </div>
</div>
…

Exemplo 4: Substituição de imagens utilizada para melhorar o aspecto visual de um cabeçalho

No seguinte exemplo, é utilizada uma imagem decorativa para substituir o texto no elemento heading.

Código Exemplo:

<style type="text/css">
h3#about {
width: 480px;
height: 34px;
position: relative;
}

h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
 ...
<h3 id="about" title="About example.com"> <span></span>About example.com </h3> 

Recursos

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

Testes

Procedimento

  1. Verifique se existem imagens decorativas.

  2. Verifique se são incluídas com CSS.

Resultados Esperados

  • Se o passo 1 for verdadeiro, então o passo 2 é verdadeiro.


C12: Utilizar percentagem para os tamanhos de letra

Aplicabilidade

CSS.

Esta técnica está relacionada com:

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

Quando o tamanho de letra é especificado em qualquer unidade de medida absoluta, tais como pontos ou pixéis, os comandos de menu 'Tamanho de Texto' no Internet Explorer 7 e versões anteriores não redimensionam o texto.

Quando o 'Modo Alto Contraste' é definido a partir do 'Painel de Controlo de Acessibilidade' do Windows, o IE6 aumenta o tamanho do texto da página como se uma alteração, via CSS, na percentagem tivesse sido definida para a janela mais periférica. O comportamento normal de um layout via CSS faz com que o redimensionamento relativo tenha um efeito multiplicador, ocorrendo subtis diferenças de alteração do tamanho do texto nos vários elementos. O Firefox e o IE7 não redimensionam o conteúdo com base nas definições do sistema de forma a afectar um layout construído por CSS, pelo que este efeito não ocorre nestes browsers.

Descrição

O objectivo desta técnica é especificar o tamanho do texto proporcionalmente, para que os agentes de utilizador possam ajustar o conteúdo de forma eficaz. Se for especificado um font-size para o elemento body, todos os outros elementos herdam esse valor, a não ser que sejam sobrepostos por um selector mais específico.

Exemplos

Exemplo 1: Percentagem para tamanhos de letra em CSS

Este exemplo define o tamanho de letra para o elemento strong, para que o seu texto seja sempre maior do que o texto circundante, em qualquer contexto utilizado. Assumindo que os cabeçalhos e parágrafos utilizam diferentes tamanhos de letra, cada palavra realçada neste exemplo será maior do que o texto circundante.

Código Exemplo:

strong {font-size: 120%}

 ...

<h1>Deixem o <strong>utilizador</strong> controlar o tamanho do texto</h1>
<p>Uma vez que só o utilizador pode saber qual o tamanho de letra que melhor o serve, 
é <strong>muito</strong> importante que o deixemos configurar o tamanho do texto.  
…

Recursos

Testes

Procedimento

  1. Examine todas as propriedades CSS que definam o tamanho de letra para cada conjunto de regras.

  2. Verifique se o valor é uma percentagem.

Resultados Esperados

  • O passo 2 é verdadeiro.


C13: Utilizar tamanhos de letra identificados

Aplicabilidade

CSS.

Esta técnica está relacionada com:

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

Quando o tamanho de letra é especificado em qualquer unidade de medida absoluta, tais como pontos ou pixéis, os comandos de menu Tamanho de Texto no Internet Explorer 7 e em versões anteriores não redimensionam o texto.

Descrição

O objectivo desta técnica é especificar um tamanho de letra identificado que apresente o tamanho de letra relativo pretendido. Estes valores fornecem sugestões para que o agente de utilizador possa escolher um tamanho de letra relativo ao tamanho de letra herdado.

Exemplos

Exemplo 1: Tamanhos de letra identificados em CSS

Este exemplo selecciona um tamanho de letra ampliado para os elementos strong, para que o seu texto seja sempre maior do que o texto circundante, em qualquer contexto utilizado. Assumindo que os cabeçalhos e parágrafos utilizam diferentes tamanhos de letra, cada palavra realçada neste exemplo será maior do que o texto circundante.

Código Exemplo:

strong {font-size: larger}

 ...

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.  
…

Recursos

Testes

Procedimento

  1. Examine todas as propriedades CSS que definam o tamanho de letra do conjunto de regras CSS.

  2. Verifique se o valor é um dos seguintes: xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, ou larger.

Resultados Esperados

  • O passo 2 é verdadeiro.


C14: Utilizar unidades 'em' para tamanhos de letra

Aplicabilidade

CSS.

Esta técnica está relacionada com:

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

No Internet Explorer 6, utilizar unidades “em” para tamanhos de letra fará com que o texto aumente mais do que se utilizar percentagem ou tamanhos de letra identificados. Deste modo, o tamanho de texto mais ampliado pode fazer com que o texto aumente mais que 200%, causando problemas de cortes.

Quando o tamanho de letra é apresentado em unidades de medida absolutas, tais como pontos ou pixéis, os comandos de menu Tamanho de Texto no Internet Explorer 7 e em versões anteriores não redimensionam o texto.

O Internet Explorer 7 só altera o tamanho do texto quando o CSS é definido num elemento style, seleccionando um elemento, tal como é apresentado nos exemplos. Quando se utiliza o estilo em linha com o atributo "style", a alteração do tamanho do texto não é suportada.

Descrição

O objectivo desta técnica é especificar o tamanho de letra do texto em unidades 'em', para que os agentes de utilizador possam ajustar o conteúdo de forma eficaz. Visto que a unidade “em” é uma propriedade do tipo de letra, é ajustada à medida que o tamanho de letra é alterado. Se for especificado um tamanho de letra para o elemento body, todos os outros elementos herdam esse valor, a não ser que sejam sobrepostos por um selector mais específico.

Exemplos

Exemplo 1: Tamanhos de letra em unidades “em” em CSS

Este exemplo define o tamanho de letra para o elemento strong, para que o seu texto seja sempre maior do que o texto circundante, em qualquer contexto utilizado. Assumindo que os cabeçalhos e parágrafos utilizam diferentes tamanhos de letra, cada palavra realçada neste exemplo será maior do que o texto circundante.

Código Exemplo:

strong {font-size: 1.6em}

 ...

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.  </p>
…

Recursos

Testes

Procedimento

  1. Examine todas as propriedades CSS que definam o tamanho de letra para cada conjunto de regras.

  2. Verifique se o valor é expresso em unidades 'em' .

Resultados Esperados

  • O passo 2 é verdadeiro.


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

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

  • Os passos 3, 5 e 6 são verdadeiros.


C17: Ajustar elementos de formulário que contenham texto

Aplicabilidade

(X)HTML, CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os controlos de formulário baseados em texto são redimensionados quando o tamanho do texto for alterado no agente de utilizador. Isto permite aos utilizadores introduzir texto e ler o que introduziram nas caixas de entrada de dados, visto que o texto é apresentado com o tamanho pretendido pelo utilizador.

Os controlos de formulário baseados em texto incluem caixas de entrada de dados (texto e área de texto), bem como botões.

Exemplos

Exemplo 1: Um formulário de contacto

Um formulário “Contacte-nos” dispõe de informação introdutória e, em seguida, controlos de formulário para os utilizadores introduzirem o primeiro nome, apelido, número de telefone e endereço de e-mail. Todo o texto e os controlos de formulário foram implementados de uma forma ajustável. Isto inclui especificar o tamanho de letra para os controlos de formulário, visto que o tamanho de letra não é herdado no Internet Explorer.

O componente XHTML:

Código Exemplo:

<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />

O componente CSS:

Código Exemplo:

h1 { font-size: 2em; }
            p, label, input { font-size: 1em; }

Este é um exemplo prático deste código: Exemplo de redimensionamento de entrada de dados com CSS.

Exemplo 2: Botão de opção

Este exemplo funciona no IE com a sua funcionalidade de tamanho de texto. Contudo, não é ajustado no Firefox 2.0.

O componente XHTML:

Código Exemplo:

<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />

O componente CSS:

Código Exemplo:

input.geomsize {
width: 1.2em;
height: 1.2em;}

Testes

Procedimento

  1. Introduza algum texto nos controlos de formulário baseados em texto que recebem o texto introduzido pelo utilizador.

  2. Aumente o tamanho do texto do conteúdo até 200%.

  3. Verifique se o texto nos controlos de formulário baseados em texto foi aumentado até 200%.

Resultados Esperados

  • O passo 3 é verdadeiro


C18: Utilizar as regras de preenchimento e margem CSS, em vez de imagens separadoras para o design da disposição da página

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

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

Na plataforma do Microsoft Windows, o Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 em "modo quirks" e o Internet Explorer 7 em "modo quirks" utilizam um modelo de caixa diferente da especificação W3C CSS: nestas versões de browsers, o preenchimento à esquerda e à direita, e as margens direita e esquerda não aumentam a largura total de um elemento, por isso o espaço para o conteúdo dentro desse elemento será mais estreito. (Este comportamento é conhecido por "bug do modelo de caixa".) O Internet Explorer 5.5 no SO Mac, e o Internet Explorer 6 e 7 no Windows, no "modo de acordo com as normas", utilizam o modelo de caixa definido na especificação W3C CSS.

Descrição

Por vezes, os programadores da Web utilizam imagens separadoras (normalmente GIFs transparentes com 1x1 pixel) para controlarem melhor a disposição, por exemplo, em tabelas ou para avançar um parágrafo. Contudo, as Folhas de Estilo em Cascata (CSS) permitem um controlo suficiente da disposição para substituir as imagens separadoras. As propriedades de preenchimento e margem CSS podem ser utilizadas isoladamente ou em combinação para controlar a disposição. As propriedades de margem ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' e 'margin' abreviada) podem ser utilizadas em qualquer elemento apresentado como um bloco; estas propriedades adicionam espaços fora do elemento. As propriedades de preenchimento ('padding-top', 'padding-right', 'padding-bottom', 'padding-left' e 'padding' abreviado) podem ser utilizadas em qualquer elemento; adicionam espaços dentro do elemento.

Exemplos

Exemplo 1

O exemplo seguinte consiste em duas partes: o código CSS, que especifica uma margem em todos os lados da tabela e o preenchimento para as células da tabela; e o código HTML para a tabela, que não contém imagens separadoras e não está encaixado noutra tabela.

Código Exemplo:

                           
              table { margin: .5em; border-collapse: collapse; } 
              td, th { padding: .4em; border: 1px solid #000; }
            
            ...
            
              <table summary="Titles, authors and publication dates of books in Web development category">
                <caption>Books in the category 'Web development'</caption>
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>How to Think Straight About Web Standards</td>
                    <td>Andrew Stanovich</td>
                    <td>1 April 2007</td>
                  </tr>
                </tbody>
              </table> 

Recursos

Testes

Não existem testes disponíveis para esta técnica.


C19: Especificar o alinhamento à esquerda OU à direita em CSS

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

Esta técnica descreve como alinhar blocos de texto à esquerda ou à direita através daa definições da propriedade CSS text-align .

Exemplos

Exemplo 1

No exemplo seguinte, o texto está alinhado à esquerda. Na folha de estilo, defina a classe:

Código Exemplo:

p.left {text-align: left}

No conteúdo, seleccione a classe.

Código Exemplo:

<p class="left"> Lorem ipsum dolor sit …</p>

Exemplo 2

No exemplo seguinte, o texto está alinhado à direita.

Código Exemplo:

p.right {text-align: right}

No conteúdo, seleccione a classe.

Código Exemplo:

<p class="right"> Lorem ipsum dolor sit …</p>

Testes

Procedimento

  1. Verifique se o texto está alinhado à direita ou à esquerda

Resultados Esperados

  • O passo 1 é verdadeiro.


C20: Utilizar medidas relativas para definir a largura das colunas, de modo a que as linhas possam ter, em média, 80 caracteres ou menos quando o browser for redimensionado

Aplicabilidade

CSS.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é garantir que o CSS é utilizado de modo a que os utilizadores possam visualizar conteúdo, em que o comprimento das linhas tenha, em média, 80 caracteres ou menos. Isto permite que os utilizadores com algumas incapacidades visuais ou de leitura, com dificuldade em acompanhar a leitura de linhas de texto extensas, visualizem e interajam com o conteúdo de forma mais eficiente. Esta técnica permite também aumentar a largura das colunas à medida que os tamanhos de letra aumentam, o que reduz a possibilidade de cortes quando o tamanho de texto aumenta.

É de salientar que esta técnica não requer que os autores utilizem CSS para limitar a largura das linhas de texto para menos de 80 caracteres, na visualização predefinida. Pelo contrário, a recomendação para se utilizar medidas relativas em disposições CSS ajuda a garantir que os autores não definam larguras de coluna de um modo que impossibilite aos utilizadores visualizarem o conteúdo com comprimentos de linha de 80 caracteres ou menos.

Exemplos

Exemplo 1

Neste exemplo, a largura div é definida em unidades “em” na folha de estilo.

Nota: A propriedade CSS max-width não é suportada em versões do Internet Explorer 6 e versões anteriores.

Código Exemplo:

#main_content {max-width: 70em}

O bloco de texto ficaria colocado dentro do div no conteúdo.

Código Exemplo:

<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

Exemplo 2

Neste exemplo, a largura div é definida em percentagem na folha de estilo.

Código Exemplo:

#main_content {width: 90%}

O bloco de texto ficaria colocado dentro do div no conteúdo.

Código Exemplo:

<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

Recursos

Testes

Procedimento

  1. Verifique se as colunas são definidas em unidades relativas.

  2. Verifique se o comprimento da linha pode ser definido para 80 caracteres ou menos redimensionando a janela do browser.

Resultados Esperados

  • Os passos 1 e 2 são verdadeiros.


C21: Especificar o espaçamento entre linhas em CSS

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

Muitas pessoas com incapacidades cognitivas têm dificuldade em acompanhar as linhas do texto quando um bloco de texto tem um espaçamento simples. Fornecer um espaçamento entre 1,5 e 2 permite-lhes iniciar uma nova linha mais facilmente assim que terminarem a linha anterior.

Exemplos

Exemplo 1

Definir o elemento para uma altura de linha de 1,5. Defina as características do elemento na folha de estilo.

Código Exemplo:

p { line-height: 150%; }

No conteúdo, o elemento terá uma altura de linha de 1,5 em todo o documento.

Código Exemplo:

<p> Lorem ipsum dolor sit …  </p>

Exemplo 2

Definir uma classe para uma altura de linha de 1,5 (espaçamento entre linhas com espaço e meio). Defina a classe na folha de estilo.

Código Exemplo:

p.tall {line-height:150%}

No conteúdo, seleccione a classe.

Código Exemplo:

<p class="tall"> Lorem ipsum dolor sit …  </p>

Exemplo 3

Definir uma classe para uma altura de linha com espaçamento duplo. Defina a classe na folha de estilo.

Código Exemplo:

p.tall {line-height:200%}

No conteúdo, seleccione a classe.

Código Exemplo:

<p class="tall"> Lorem ipsum dolor sit …  </p>

Testes

Procedimento

  1. Abra o conteúdo num browser.

  2. Verifique se o espaçamento entre linhas em blocos de texto é entre 1,5 e 2.

Resultados Esperados

  • O passo 2 é verdadeiro.


C22: Utilizar CSS para controlar a apresentação visual do texto

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como o CSS pode ser utilizado para controlar a apresentação visual do texto. Isto permite aos utilizadores modificar, através do agente de utilizador, as características visuais do texto para cumprirem os seus requisitos. As características do texto incluem aspectos tais como tamanho, cor, família de tipos de letra e colocação relativa.

O CSS beneficia a acessibilidade essencialmente através da separação da estrutura do documento da apresentação. As folhas de estilo foram concebidas para permitir um controlo preciso - fora da marcação - do espaçamento entre caracteres, do alinhamento de texto, posicionamento de objectos na página, saída de áudio e de fala, características de tipos de letra, etc. Ao separar o estilo da marcação, os autores podem simplificar e limpar a marcação no conteúdo, tornando-o, ao mesmo tempo, mais acessível.

O texto dentro de imagens coloca vários problemas de acessibilidade, incluindo a incapacidade de:

  • ser ajustado de acordo com as definições no browser

  • ser apresentado em cores especificadas pelas definições no browser ou pelas regras nas folhas de estilo definidas pelo utilizador

  • reconhecer as definições do sistema operativo, tais como o alto contraste.

É preferível utilizar texto real para a parte de texto destes elementos, e uma combinação de marcação semântica e folhas de estilo para criar a apresentação visual apropriada. Para que funcione eficazmente, escolha tipos de letra que devem estar disponíveis no sistema do utilizador e defina tipos de letra alternativos para utilizadores que poderão não dispor do primeiro tipo de letra especificado. As máquinas e os agentes de utilizador mais recentes fazem, muitas vezes, com que todo o texto fique polido ou não-pixelizado, por isso é provável que os cabeçalhos e botões fiquem com um aspecto agradável nestes sistemas sem ter de se recorrer às imagens de texto.

As propriedades CSS seguintes são úteis para estilizar o texto e evitam a utilização de texto em imagens:

  • A propriedade font-family é utilizada para apresentar o aspecto do código numa família de tipos de letra de espaço único.

  • A propriedade text-align é utilizada para apresentar o texto à direita na janela.

  • A propriedade font-size é utilizada para apresentar o texto num tamanho ampliado.

  • A propriedade font-style é utilizada para apresentar o texto em itálico.

  • A propriedade font-weight é utilizada para definir a espessura dos caracteres no texto.

  • A propriedade color é utilizada para apresentar a cor do texto ou das caixas de texto.

  • A propriedade line-height é utilizada para apresentar a altura de linha do bloco de texto.

  • A propriedade text-transform é utilizada para controlar as maiúsculas e minúsculas do texto.

  • A propriedade letter-spacing é utilizada para controlar o espaçamento entre letras no texto.

  • A propriedade background-image pode ser utilizada para apresentar o texto num fundo não textual.

  • A pseudo-classe first-line pode ser utilizada para modificar a apresentação da primeira linha num bloco de texto.

  • A pseudo-classe :first-letter pode ser utilizada para modificar a apresentação da primeira letra num bloco de texto.

  • As pseudo-classes :before e :after podem ser utilizadas para introduzir conteúdo não textual decorativo antes ou depois de blocos de texto.

Exemplos

Exemplo 1: Utilizar font-family (família de tipos de letra) de CSS para controlar a família de tipos de letra no texto

O componente XHTML:

Código Exemplo:

<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

O componente CSS:

Código Exemplo:

code { font-family:"Courier New", Courier, monospace }

Exemplo 2: Utilizar text-align (alinhamento do texto) de CSS para controlar a colocação (alinhamento) do texto

O componente XHTML:

Código Exemplo:

<p class="right">This text should be to the right of the viewport.</p> 

O componente CSS:

Código Exemplo:

.right { text-align: right; }

Exemplo 3: Utilizar font-size (tamanho de letra) de CSS para controlar o tamanho do texto

O componente XHTML:

Código Exemplo:

<p>09 <strong class="largersize">March</strong> 2008</p> 

O componente CSS:

Código Exemplo:

strong.largersize { font-size: 1.5em; }

Exemplo 4: Utilizar color (cor) de CSS para controlar a cor do texto

Nota: O estilo utilizado neste exemplo não é utilizado para transmitir informações, estrutura ou relações.

O componente XHTML:

Código Exemplo:

<p>09 <em class="highlight">March</em> 2008</p> 

O componente CSS:

Código Exemplo:

.highlight{ color: red; }

Exemplo 5: Utilizar font-style (estilo de tipo de letra) de CSS para colocar o texto em itálico

Nota: O estilo utilizado neste exemplo não é utilizado para transmitir informações, estrutura ou relações.

O componente XHTML:

Código Exemplo:

<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology 
Blog</a>.</p>

O componente CSS:

Código Exemplo:

.featuredsite{ font-style:italic; }

Exemplo 6: Utilizar font-weight (espessura do tipo de letra) de CSS para controlar a espessura do tipo de letra do texto

Nota: O estilo utilizado neste exemplo não é utilizado para transmitir informações, estrutura ou relações.

O componente XHTML:

Código Exemplo:

<p>This deal is available <span class="highlight">now!</span></p> 

O componente CSS:

Código Exemplo:

.highlight { font-weight:bold; color:#990000; }

Exemplo 7: Utilizar text-transform (transformação de texto) de CSS para controlar as maiúsculas e minúsculas do texto

Nota: O estilo utilizado neste exemplo não é utilizado para transmitir informações, estrutura ou relações.

O componente XHTML:

Código Exemplo:

<p>09 <span class="caps">March</span> 2008</p> 

O componente CSS:

Código Exemplo:

.caps { text-transform:uppercase; }

Exemplo 8: Utilizar line-height (altura de linha) de CSS para controlar o espaçamento entre linhas do texto

A propriedade line-height de CSS é utilizada para apresentar a altura de linha para um parágrafo com duas vezes a altura do tipo de letra.

O componente XHTML:

Código Exemplo:

<p>Concern for man and his fate must always form the<br />  
chief interest of all technical endeavors. <br />
Never forget this in the  midst of your diagrams and equations. </p>

O componente CSS:

Código Exemplo:

p { line-height:2em; }

A propriedade line-height de CSS é utilizada para apresentar uma altura de linha do texto menor do que a altura do tipo de letra. A segunda linha do texto é posicionada após a primeira linha do texto fazendo parecer com que o texto faça parte da primeira linha, mas ligeiramente rebaixado.

O componente XHTML:

Código Exemplo:

<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

O componente CSS:

Código Exemplo:

.overlap { line-height:0.2em;  }
 .upper { text-transform:uppercase; }
 .byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }

Exemplo 9: Utilizar letter-spacing (espaçamento entre letras) de CSS para espaçar o texto

A propriedade letter-spacing de CSS é utilizada para apresentar as letras compactadas na segunda linha do texto.

O componente XHTML:

Código Exemplo:

<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

O componente CSS:

Código Exemplo:

.overlap { line-height:0.2em;  }
 .upper { text-transform:uppercase; }
 .byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }

A propriedade letter-spacing de CSS é utilizada para apresentar as letras compactadas na segunda linha do texto.

O componente XHTML:

Código Exemplo:

<h1 class="upper2">News</h1>

O componente CSS:

Código Exemplo:

.upper2 { text-transform:uppercase; letter-spacing:1em; }

Exemplo 10: Utilizar background-image (imagem de fundo) de CSS para dispor o texto e as imagens em camadas

A propriedade font-style de CSS é utilizada para apresentar o componente textual de uma faixa e a propriedade background-image é utilizada para apresentar uma imagem por detrás do texto.

O componente XHTML:

Código Exemplo:

<div id="banner"><span id="bannerstyle1">Welcome</span> 
<span id="bannerstyle2">to your local city council</span></div>

O componente CSS:

Código Exemplo:

#banner { 
  color:white; 
  background-image:url(banner-bg.gif); 
  background-repeat:no-repeat; 
  background-color:#003399; 
  width:29em; 
}

#bannerstyle1 { 
  text-transform:uppercase; 
  font-weight:bold; 
  font-size:2.5em;
}

#bannerstyle2 { 
  font-style:italic; 
  font-weight:bold; 
  letter-spacing:-0.1em;
  font-size:1.5em; 
}

Exemplo 11: Utilizar first-line (primeira linha) de CSS para controlar a apresentação da primeira linha de texto

A pseudo-classe :first-lineé utilizada para apresentar a primeira linha do texto num tipo de letra ampliado, a vermelho.

O componente XHTML:

Código Exemplo:

<p class="startline">Once upon a time...<br />
 ...in a land far, far away...  </p> 

O componente CSS:

Código Exemplo:

.startline:first-line { font-size:2em; color:#990000; }

Exemplo 12: Utilizar first-letter (primeira letra) de CSS para controlar a apresentação da primeira letra de texto

A pseudo-classe :first-letter de CSS é utilizada para apresentar a primeira letra num tipo de letra ampliado, a vermelho, e alinhada verticalmente ao centro.

O componente XHTML:

Código Exemplo:

<p class="startletter">Once upon a time...</p> 

O componente CSS:

Código Exemplo:

.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }

Recursos

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

Testes

Procedimento

  1. Verifique se as propriedades CSS foram utilizadas para controlar a apresentação visual do texto.

Resultados Esperados

  • O passo 1 é verdadeiro.


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

  • Os passos 2 e 3 são verdadeiros.


C24: Utilizar valores de percentagem em CSS para os tamanhos das caixas

Aplicabilidade

Páginas que utilizem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que os utilizadores que necessitam de aumentar o tamanho do texto para o lerem não tenham de se deslocar horizontalmente para lerem uma linha de texto. Para utilizar esta técnica, o autor especifica a largura das caixas de texto utilizando valores de percentagem.

Exemplos

Exemplo 1

Um jornal apresenta o conteúdo no centro da janela. A largura da caixa do conteúdo é especificada em percentagens de página de modo a que, quando uma pessoa com baixa visão aumentar o tamanho da letra, o texto reflua na janela do browser com o novo tamanho, e o deslocamento horizontal não seja necessário.

Testes

Procedimento

  1. Verifique se todas as larguras das caixas são especificadas em valores de percentagem.

  2. Aumente o tamanho do texto até 200%.

  3. Certifique-se de que o deslocamento horizontal não é necessário para ler qualquer linha de texto.

  4. Verifique se todo o texto ainda está visível na página.

Resultados Esperados

  • Os passos 1, 3 e 4 são verdadeiros.


C25: Especificar margens e disposição em CSS para delinear áreas de uma página Web e não especificar cores de texto e de plano de fundo do texto

Aplicabilidade

Páginas que utilizem CSS.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é especificar as margens e a disposição utilizando CSS e deixar que as cores do texto e de fundo sejam apresentadas de acordo com as definições do browser do utilizador e/ou do sistema operativo. Isto permite aos utilizadores visualizarem o texto nas cores pretendidas, enquanto preserva outros aspectos da disposição e do design da página, tais como as colunas de texto, as margens à volta das secções ou linhas verticais entre um menu e a área do conteúdo principal. Também previne alguns problemas de apresentação em alguns browsers quando as páginas contêm caixas de pop-up ou menus pendentes de Javascript com as cores substituídas.

As margens e os indicadores da disposição ajudam muitas pessoas com incapacidades cognitivas, da mesma forma que a flexibilidade ajuda o texto e as cores de fundo. Por vezes, estes dois requisitos entram em conflito quando o utilizador tem de substituir a selecção de cores do autor para o texto e fundo no browser, e o browser também remove as margens e a disposição pretendida. Isto pode significar que a página é apresentada numa única coluna, com um bloco de conteúdo sob o outro, o que pode resultar em espaços em branco desnecessários e longas linhas de texto. Pode também significar que 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. Quando um autor da Web não especifica as cores de qualquer texto e fundo, e especifica a disposição e as cores das margens, é possível, na maioria dos browsers mais conhecidos, alterar as cores do texto e do fundo sem afectar as restantes declarações CSS (especificadas pelo autor).

Exemplos

Exemplo 1

Uma página Web é concebida utilizando HTML. O CSS é utilizado para especificar as cores das margens à volta de áreas discretas da página, e para dispor o conteúdo de modo a que o menu flutue para a esquerda da área do conteúdo principal. A cor do texto e do fundo não são especificadas. O utilizador define as suas cores no browser, podendo visualizar a página com as cores e os contrastes que mais lhe agradem, sem interromper a disposição.

Recursos

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

Testes

Procedimento

  1. Abra a página Web num browser que permita aos utilizadores alterar as cores do conteúdo HTML.

  2. Altere o texto, o link e as cores de fundo nas definições do browser para que fiquem diferentes das cores actualmente definidas no browser.

    Nota: Certifique-se de que não selecciona a opção que indica ao browser para ignorar as cores especificadas na página.

  3. Regresse à página e verifique se esta apresenta o novo texto, o link e as cores de fundo.

  4. Verifique se as margens são apresentadas e se a disposição é preservada.

Resultados Esperados

  • Os passos 3 e 4 são verdadeiros.


C26: Fornecer opções no conteúdo para mudar para uma disposição na qual o utilizador não tenha de se deslocar horizontalmente para ler uma linha de texto

Aplicabilidade

Páginas que utilizem CSS.

Esta técnica está relacionada com:

Descrição

Podem existir situações em que o autor necessita de utilizar uma disposição que requer o deslocamento horizontal. Neste caso, é suficiente fornecer opções dentro do conteúdo que mudem para uma disposição em que o utilizador não tenha de se deslocar horizontalmente para ler uma linha de texto. Isto pode ser obtido utilizando tecnologia normal de mudança de estilo.

É de salientar que é também suficiente dispor o conteúdo de modo a que o deslocamento horizontal seja necessário para aceder ao conteúdo, mas não para ler uma linha de texto.

Por exemplo, uma folha de cálculo que necessite de deslocamento horizontal é aceitável se este deslocamento não for necessário para cada coluna individualmente (i.e., o deslocamento é necessário apenas para visualizar outras colunas, mas não para os limites esquerdo e direito de cada coluna. É-nos difícil formular isto de uma forma totalmente inequívoca.)

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

Uma agência imobiliária apresenta um relatório anual online, com uma disposição idêntica à versão para impressão. Como tal, necessita de deslocamento horizontal para se ler uma linha de texto. Existe um controlo na página que muda a folha de estilo e fornece uma disposição que não necessita de deslocamento horizontal.

Exemplo 2

Está disponível uma folha de cálculo financeiro online, que inclui texto a explicar as alterações no mercado imobiliário em Janeiro. Não visível no ecrã, à direita, existe uma coluna com a explicação das alterações no mercado em Setembro. O utilizador pode deslocar-se horizontalmente para a área de Setembro e ler cada linha de texto sem deslocamentos adicionais, quando o tamanho da janela é maximizado.

Testes

Procedimento

  1. Abra o conteúdo que necessita de deslocamento horizontal numa janela de ecrã completo.

  2. Verifique se existe uma opção no conteúdo para mudar para uma disposição que não necessite de deslocamento horizontal para se ler uma linha de texto.

  3. Active a opção.

  4. Certifique-se de que não é necessário o deslocamento horizontal para ler qualquer linha de texto.

Resultados Esperados

  • Os passos 2 e 4 são verdadeiros.


C27: Corresponder a ordem do DOM com a ordem visual

Aplicabilidade

O CSS utilizado com HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que a ordem do conteúdo no código fonte é a mesma que a apresentação visual do conteúdo. A ordem do conteúdo no código fonte pode ser alterada pelo autor para um qualquer número de apresentações visuais com CSS. Cada ordem pode ter significação, mas pode causar confusão aos utilizadores de tecnologias de apoio, possivelmente porque o utilizador desactiva a apresentação especificada pelo autor, acedendo ao conteúdo directamente a partir do código fonte (tal como um leitor de ecrã), ou interagindo com o conteúdo através do teclado. Se um utilizador cego, que lê a página com um leitor de ecrã que segue a ordem de origem, trabalhar com um utilizador sem problemas de visão, que lê a página na ordem visual, podem ambos ficar confusos quando encontrarem informação em ordens diferentes. Um utilizador com baixa visão que utiliza um ampliador de ecrã em conjunto com um leitor de ecrã pode ficar confuso quando a ordem de leitura parecer saltar à volta do ecrã. Um utilizador de teclado pode ter dificuldade em prever para onde é que o foco vai ser direccionado em seguida quando a ordem de origem não corresponder à ordem visual.

Podem existir também situações em que a ordem apresentada visualmente é necessária para a compreensão geral da página. Se a ordem de origem for apresentada de forma diferente, pode ser muito mais difícil de compreender.

Quando a ordem de origem corresponder à ordem visual, todos poderão ler o conteúdo e interagir com o mesmo, na mesma ordem (correcta).

Nota: O atributo tabindex em HTML tem duas funções. Uma é fazer com que um elemento receba o foco e a outra é atribuir ao elemento uma posição na ordem do foco. Um tabindex de 0 faz com que o elemento receba o foco, mas adiciona-o à ordem do foco na ordem dos elementos de origem. A ordem do foco segue os valores positivos do tabindex em ordem ascendente. Definir valores de tabindex que resultam numa ordem diferente da ordem dos elementos no Modelo de Objecto de Documento (DOM) pode significar que a ordem está incorrecta para utilizadores de tecnologias de apoio, em grande parte porque a propriedade tabindex é especificada em HTML ou XHTML e não em CSS. Isto pode vir a ser alterado em especificações futuras. Pode também ser diferente da ordem de apresentação visual.

Exemplos

  • Um jornal online colocou uma barra de navegação visível no canto superior esquerdo da página, imediatamente abaixo do logótipo inicial. No código fonte, os elementos de navegação aparecem depois dos elementos que codificam o logótipo.

Recursos

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

Testes

Procedimento

  1. Examine visualmente a ordem do conteúdo na página Web, tal como é apresentada ao utilizador final.

  2. Examine os elementos no DOM utilizando uma ferramenta que lhe permita visualizar o DOM.

  3. Certifique-se de que a ordem do conteúdo nas secções do código fonte correspondem à apresentação visual do conteúdo na página Web (por ex., para uma página em inglês, a ordem é de cima para baixo e da esquerda para a direita).

Resultados Esperados

  • O passo 3 é verdadeiro.


C28: Especificar o tamanho de caixas de texto utilizando unidades 'em'

Aplicabilidade

CSS.

Esta técnica está relacionada com:

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

No Internet Explorer 6, o Modo Alto Contraste do Windows redimensiona os tipos de letra baseados em percentagem em tabelas encaixadas, ficando estes demasiado ampliados. O Firefox e versões posteriores do IE não redimensionam os tipos de letra em Modo Alto Contraste, não apresentando este problema.

Descrição

O objectivo desta técnica é especificar a largura e/ou altura das caixas, que contêm texto ou que aceitam entrada de texto, em unidades em . Isto permite aos agentes de utilizador que suportam redimensionamento de texto redimensionar as caixas de texto de acordo com as alterações nas definições de tamanho de texto.

A largura e/ou altura das caixas de texto que foram especificadas utilizando outras unidades estão sujeitas a ficarem cortadas, visto que o texto fica fora dos limites da caixa quando o seu tamanho é ampliado.

As caixas normalmente controlam a colocação do texto dentro da página Web e podem incluir elementos de disposição, elementos estruturais e controlos de formulário.

Exemplos

Exemplo 1: Unidades 'em' para tamanhos de caixas de disposição que contenham texto

Neste exemplo, um elemento div, com um valor id value de "nav_menu", é utilizado para posicionar o menu de navegação ao longo do lado esquerdo da área de conteúdo principal da página Web. O menu de navegação consiste numa lista de links de texto, com um valor id de "nav_list." O tamanho do texto para os links de navegação e a largura da caixa são especificados em unidades 'em' .

Código Exemplo:

#nav_menu { width: 20em; height: 100em }

#nav_list { font-size: 100%; }

Exemplo 2: Unidades 'em' para controlos de formulário baseados em texto

Neste exemplo, os elementos input que contêm texto ou aceitam entrada de texto pelo utilizador recebem o nome de classe "form1." As regras CSS são utilizadas para definir o tamanho da letra em unidades percent e a largura destes elementos em unidades em . Isto permite que o texto dentro do controlo de formulário seja redimensionado, em resposta às alterações nas definições do tamanho de texto, sem ficar cortado (visto que a largura do controlo de formulário é também redimensionada de acordo com o tamanho de letra).

Código Exemplo:

input.form1 { font-size: 100%; width: 15em; }

Exemplo 3: Unidades 'em' em caixas pendentes

Neste exemplo, os elementos select recebem o nome de classe "pick." As regras CSS são utilizadas para definir o tamanho de letra em unidades percent e a largura em unidades em . Isto permite que o texto dentro do controlo de formulário seja redimensionado, em resposta às alterações nas definições do tamanho de texto, sem ficar cortado.

Código Exemplo:

input.pick { font-size: 100%; width: 10em; }

Exemplo 4: Unidades 'em' para controlos de formulário não baseados em texto

Neste exemplo, os elementos input que definem as caixas de verificação ou botões de opção recebem o nome de classe "choose". As regras CSS são utilizadas para definir a largura e altura destes elementos em unidades 'em'. Isto permite que o texto dentro do controlo de formulário seja redimensionado, em resposta às alterações nas definições do tamanho de texto.

Código Exemplo:

input.choose { width: 1.2em; height: 1.2em; }

Testes

Procedimento

  • Identifique as caixas que contêm ou permitem a entrada de texto.

  • Verifique se a largura e/ou altura da caixa são especificadas em unidades em .

Resultados Esperados

  • O passo 2 é verdadeiro.


C29: Utilizar um comutador de estilo para fornecer uma versão alternativa em conformidade

Aplicabilidade

CSS utilizado com scripting do lado do cliente ou do lado do servidor.

Esta técnica está relacionada com:

Descrição

Quando algum aspecto da apresentação predefinida de uma página Web não cumpre um Critério de Sucesso, é possível cumprir esse requisito utilizando a cláusula "Versão Alternativa" nos requisitos de conformidade (Requisito de Conformidade 1). Para alguns requisitos, invocar um comutador de estilo, através de um link ou controlo na página que pode ajustar a apresentação de modo a que todos os aspectos da página estejam em conformidade com o nível reivindicado, permite aos autores não terem de fornecer várias versões da mesma informação.

O objectivo desta técnica é demonstrar como o CSS pode ser utilizado em conjunto com scripting para fornecer versões alternativas em conformidade de uma página Web. Nesta técnica, o autor fornece visualizações alternativas do conteúdo, disponibilizando controlos que ajustam o CSS utilizado para controlar a apresentação visual do conteúdo. Os controlos fornecidos na página Web permitem aos utilizadores seleccionar ou modificar a apresentação de uma forma que cumpra o critério de sucesso no nível reivindicado. Isto faz com que diferentes apresentações visuais possam ser seleccionadas pelos utilizadores nas seguintes situações:

  • o utilizador pode não ser capaz de ajustar as definições do browser ou do sistema operativo por não estar familiarizado com as mesmas, ou devido à falta de direitos.

  • o texto é fornecido num modo que não responde às definições do browser ou do sistema operativo (tais como texto dentro de uma imagem)

  • a apresentação predefinida do conteúdo não inclui contraste suficiente para alguns utilizadores

Para que esta técnica seja utilizada com êxito, três aspectos têm de ser verdadeiros.

  1. O link ou controlo na página original tem de cumprir o critério de sucesso correspondente através da apresentação alternativa. Por exemplo, se um comutador de estilo for utilizado para fornecer tamanhos de tipos de letra ampliados e o controlo for apresentado utilizando um tipo de letra pequeno, os utilizadores não são capazes de activar o controlo e visualizar a apresentação alternativa.

  2. A nova página tem de incluir a mesma informação e funcionalidade que a página original.

  3. A nova página tem de estar em conformidade com todos os Critérios de Sucesso para o nível de conformidade pretendido. Por exemplo, uma folha de estilo alternativa não pode ser utilizada para cumprir um requisito se fizer com que um requisito diferente deixe de estar em conformidade.

Quando se utiliza um comutador de estilo, é importante ter em consideração os seguintes desafios e limitações:

  • O número e tipo de alterações que um utilizador pode executar são limitados ao âmbito dos controlos fornecidos pelo autor da página Web. Deve fornecer-se várias apresentações e preferências para abordar as necessidades do maior número de pessoas possível. Contudo, é também importante que os autores tenham em consideração as interacções entre as preferências e a complexidade para os utilizadores, que podem resultar do fornecimento de um grande número de opções aos utilizadores.

  • As preferências do utilizador podem ser preservadas de uma página para outra, guardando um cookie na máquina do utilizador (para mais informações, consulte a secção de Recursos) ou incluindo as suas preferências num perfil guardado no servidor da Web, introduzindo parâmetros query string, ou por qualquer outro meio.

  • O método técnico utilizado para implementar um comutador de estilo pode estar sujeito ao suporte e disponibilidade de uma ou mais tecnologias na máquina do utilizador (por exemplo, muitas soluções do lado do cliente requerem suporte para JavaScript e CSS). A não ser que se dependa destas tecnologias para a conformidade, os autores devem ponderar a utilização de tecnologias do lado do servidor quando o suporte e a disponibilidade de tecnologias do lado do cliente não puderem ser garantidos. Em alternativa, a utilização de técnicas que garantem que o conteúdo é transformado quando uma ou mais tecnologias utilizadas não estão disponíveis pode ser um modo eficaz para melhorar as páginas quando não se depende do suporte para estas tecnologias para a conformidade.

Exemplos

Exemplo 1: Utilizar um controlo JavaScript para aplicar um ficheiro CSS externo diferente

Este exemplo apresenta uma página que fornece links para alterar o texto e as cores de fundo da página através de JavaScript. Os links só devem ser introduzidos se o JavaScript for suportado e estiver disponível no sistema do utilizador. Caso contrário, seleccionar os links não resulta nas alterações pretendidas. Isto pode ser obtido utilizando o script para introduzir os links (o que significa que os links só estão presentes quando o scripting é suportado e está disponível).

O código seguinte apresenta links para mudança de cor dependentes de JavaScript e um fragmento de outro conteúdo na página Web, as regras de folhas de estilo associadas e o JavaScript que altera a folha de estilo em utilização quando o link para mudança de cor é seleccionado.

Este exemplo aplica-se apenas à visualização actual da página. Num ambiente de produção, recomendamos guardar esta preferência num cookie ou num perfil de utilizador do lado do servidor, para que os utilizadores só tenham de efectuar a selecção uma vez em cada sítio da Web.

Os componentes XHTML:

Código Exemplo:

In <head> section:

  <link href="main.css" rel="stylesheet" type="text/css" />
  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />

In <body> section:

<div id="colorswitch">
<p>Change colors:</p>
  <ul class="inline">
    <li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;" 
      id="altColors1">dark blue on white</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;" 
      id="altColors2">yellow on black</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;" 
      id="altColors3">black on pale yellow</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;" 
      id="altColors4">black on white</a></li>
    <li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;" 
      id="default">Reset to default</a></li>
  </ul>
</div>
<div id="mainbody">
  <h1>Conference report</h1>
  <p>Last week's conference presented an impressive line-up of speakers...</p>
</div>

Os componentes CSS:

Código Exemplo:

In main.css:

body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }

#mainbody { 
    padding: 1em; 
}

#colorswitch {
    float: right; 
    width: 12em; 
    border: 1px #000066 solid; 
    padding:0 1em 1em 1em; margin:0;
}

#colorswitch p { 
    padding-top:.5em; 
    font-weight:bold;
}

In defaultColors.css:

body, p { 
    color:#000000; 
    background-color:#FFFFFF; 
}

h1, h2, h3 {
        color:#990000; 
        background-color:#FFFFFF;
}

In altColors1.css:

body, h1, h2, h3, p, a { 
    color:#000066; 
    background-color:#FFFFFF; 
}

In altColors2.css:

body, h1, h2, h3, p, a { 
    color:#FFFF33; 
       background-color:#000000; 
}

In altColors3.css:

body, h1, h2, h3, p, a { 
    color:#000000; 
    background-color:#FFFF99; 
}

In altColors4.css:

body, h1, h2, h3, p, a { 
    color:#000000; 
    background-color:#FFFFFF; 
} 

Os componentes JavaScript:

Código Exemplo:

function changeColors (newCSS)
{
  document.getElementById('currentCSS').href = newCSS; 
}

Está disponível um exemplo prático deste código, Utilizar um controlo JavaScript para aplicar um ficheiro CSS externo diferente.

Exemplo 2: Utilizar JavaScript do lado do cliente para alterar uma propriedade CSS

Este exemplo pode ser utilizado para alterações simples numa secção de conteúdo, podendo ser menos prático em sítios da Web ou páginas complexos. O exemplo utiliza um JavaScript do lado do cliente para alterar o nome da classe e apresentar visualmente a selecção de cores do utilizador (de um conjunto de opções definido) como fundo para realçar conteúdo específico.

Nota: O código seguinte inclui chamadas JavaScript no código XHTML para ajudar a compreender a técnica. Contudo, o autor é encorajado a utilizar a melhor prática actual para incluir JavaScript (para mais informações sobre JavaScript Discreto e optimização progressiva, consulte Recursos).

Os componentes XHTML:

Código Exemplo:

<h1>Product comparison</h1>
<p>The products you selected to compare are listed below. 
Any differences between the products are highlighted and italicized.</p>
<p class="inlinePara">Change hightlight color: </p>
<ul class="inline">
  <li><a href="#" onClick="changeColor('hghltLightYellow');return false;" 
    class="hghltLightYellow">light yellow</a></li>
  <li><a href="#" onClick="changeColor('hghltBrightYellow');return false;" 
    class="hghltBrightYellow">bright yellow</a></li>
  <li><a href="#" onClick="changeColor('hghltLightBlue');return false;" 
    class="hghltLightBlue">light blue</a></li>
  <li><a href="#" onClick="changeColor('hghltBrightBlue');return false;" 
    class="hghltBrightBlue">bright blue</a></li>
  <li><a href="#" onClick="changeColor('hghltLightRed');return false;" 
    class="hghltLightRed">light red</a></li>
  <li><a href="#" onClick="changeColor('hghltDrkRed');return false;" 
    class="hghltDrkRed">dark red</a></li>
</ul>
<table width="400" border="1">
  <tr>
    <td> </td>
    <th scope="col">Product 1</th>
    <th scope="col">Product 2</th>
  </tr>
  <tr>
    <th scope="row">Aspect 1</th>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <th scope="row">Aspect 2</th>
    <td class="hghltLightYellow">Yes</td>
    <td class="hghltLightYellow">No</td>
  </tr>
  <tr>
    <th scope="row">Aspect 3</th>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
</table>

Os componentes CSS:

Código Exemplo:

body { color:#000000; background-color:#FFFFFF; }

 .hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
 .hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
 .hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
 .hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
 .hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
 .hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }

 .inlinePara {display:inline; }
 .inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
 .inline li { display:inline; }
 .inline li a {padding: 0.5em 1em; border: 2px solid #000000; }

Os componentes JavaScript:

Código Exemplo:

function changeColor(hghltColor)
{
  // collects table data cells into an array
 
 var els = document.getElementsByTagName('td');

  // for each item in the array, look for a class name starting with "hghlt"
  // if found, change the class value to the current selection
  // note that this script assumes the  'td' class attribute is only used for highlighting

  for (var i=0; i<els.length; i++)
  {
    if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
  }
}

Está disponível um exemplo prático deste código, Utilizar JavaScript do lado do cliente para alterar uma propriedade CSS.

Exemplo 3: Utilizar PHP $_GET para aplicar um ficheiro CSS externo diferente

Este exemplo simples utiliza PHP $_GET para atribuir uma de duas folhas de estilo externas disponíveis. Podem obter-se funcionalidades semelhantes utilizando várias funcionalidades PHP. Este exemplo aplica-se apenas à visualização actual da página. Num ambiente de produção, recomendamos guardar esta preferência num cookie ou num perfil de utilizador do lado do servidor, para que os utilizadores só tenham de efectuar a selecção uma vez em cada sítio da Web.

O código seguinte é PHP, mas uma abordagem semelhante funciona com várias tecnologias do lado do servidor.

Os componentes PHP e XHTML:

Código Exemplo:

At the beginning of the PHP page:

<?php
$thestyle = $_GET['set'];
if ($thestyle == "style1")
	{
	$thestyle = "style2";
	}
else
	{
	$thestyle = "style1";
	}
?>

In the <head> section:

   <link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >

In <body> section:

<?php
if ($thestyle == "style1") {
	echo "<a href=\"index.php?set=style1\">Switch to Style Sheet Two</a>";
	}
else {
	echo "<a href=\"index.php?set=style2\">Switch to Style Sheet One</a>";
	}
?>

<div id="mainbody">
  <h1>Conference report</h1>
  <p>Last week's conference presented an impressive line-up of speakers...</p>
</div>

Os componentes CSS:

Código Exemplo:

In style1.css:

  body, p { color:#000000; background-color:#FFFFFF; }
  h1, h2, h3 {color:#990000; background-color:#FFFFFF; }

In style2.css:

  body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }

Está disponível um exemplo prático deste código, Utilizar PHP $_GET para aplicar um ficheiro CSS externo diferente.

Exemplo 4: Utilizar JSP para fornecer uma folha de estilo alternativa

O exemplo seguinte utiliza dois ficheiros,

  • uma Java Server Page (JSP), com o formulário e o código de processamento do formulário, e

  • um ficheiro de inclusão com as funcionalidades utilizadas pela página anterior e outras páginas que utilizam o mesmo estilo.

O código do lado do servidor fornece um elemento link normal para a folha de estilo que o utilizador escolher, e elementos link com "folha de estilo alternativa" para os restantes estilos. Deste modo, o código pode ser utilizado como alternativa para o código do lado do cliente no segundo exemplo.

A página JSP com o formulário:

Código Exemplo:

                                   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
 %><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   <title>Change Style</title>
   <%
     String fStyle = "";
     String styleName = "style";
     String defaultStyle = "default";
     Cookie[] cookies = request.getCookies();
 
     // get style from post request parameters
     if (request.getMethod().equals("POST") && request.getParameter("styleSelect") != null) {
       fStyle = request.getParameter("styleSelect");
       // code that validates user input (security) not shown
       
       if (fStyle.equals("nostyle")) { // user prefers no author style
       } else { // user requests author style
         out.println(createStyleLinks(fStyle).toString());
       }
       
       storeStylePreferenceCookie(request, response, fStyle);
     } else if (request.getMethod().equals("GET")) { 
     // GET request; get style from cookie; else default style links
       // get style from cookie
       if (cookies != null) {
         // get style from cookies
         fStyle = getStyleFromCookies(cookies);
 
         if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
             out.println(createStyleLinks(fStyle).toString());
         } else { // no cookie for style; process request for style preference
           // default style links
           out.println(createStyleLinks(defaultStyle).toString());
         }
       } else { // GET request without cookies: default styles
         out.println(createStyleLinks(defaultStyle).toString());
       }//end else cookies
     }
   %>
 </head>
 <body id="home">
   <form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
     <p><label for="styleSelect">Select style: </label>
       <select id="styleSelect" name="styleSelect">
         <option value="default">Default (shades of green)</option>
         <option value="wonb">White on black</option>
         <option value="bonw">Black on white</option>
       </select>
       <input type="submit" value="Change Style" />
     </p>
   </form>
 </body>
 </html> 

O ficheiro styleswitcher.jsp incluído no ficheiro anterior:

Código Exemplo:

                                   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%!
   /**
    * Get the links (link elements) to the CSS files based on cookies, ...
   */
   private String getStyleLinks(HttpServletRequest request) {
     String styleLinks = "";
     Cookie[] cookies = request.getCookies();
     String defaultStyle = "default";
     String tempStyle = "";
     // GET request; get style from cookie; else default style links
     // get style from cookie
     if (cookies != null) {
       // get style from cookies
       tempStyle = getStyleFromCookies(cookies);
 
       if ( tempStyle.equals("NULL_STYLE") ) { 
         // no cookie for style; process request for style preference
         // default style links
         styleLinks = createStyleLinks(defaultStyle).toString();
       } else { // user requests author style
         styleLinks = createStyleLinks(tempStyle).toString();
       }
     } else { // GET request without cookies: default styles
       styleLinks = createStyleLinks(defaultStyle).toString();
     }//end else cookies
     
     return styleLinks;
   }
 
   /**
    * Get style cookie from request
   */
   private String getStyleFromCookies( Cookie[] cookies ) {
     String fStyle = "NULL_STYLE";
     for (int i = 0; i < cookies.length; i++) {
       Cookie cookie = cookies[i];
       String name = cookie.getName();
       
       if ( name.equals("style") ) {
         fStyle = cookie.getValue();
         // code that validates cookie value (security) not shown
       }
     }
     return fStyle;
   }
 
   /**
    * Store the style preference in a persistent cookie
   */
   private void storeStylePreferenceCookie(HttpServletRequest request, 
     HttpServletResponse response, String theStyle) {
     final int ONE_YEAR = 60 * 60 * 24 * 365;
     Cookie styleCookie = new Cookie("style", theStyle);
     styleCookie.setMaxAge(ONE_YEAR);
     response.addCookie(styleCookie);
   }
 
   /**
    * Create the link elements for the stylesheets
   */
   private StringBuffer createStyleLinks(String prefStyle) {
     StringBuffer theStyleLinks = new StringBuffer();
     //two-dimensional array with identifiers (adding '.css' gives the name of the CSS file) 
     // and strings for the title attribute of the link element
    // the identifiers must correspond to the in the "value" attributes in the "option"
    // elements in the style switcher form
     String [] [] styles = {
       { "default", "Default style"},
       { "wonb", "White on black"},
       { "bonw", "Black on white"}
     };
 
     // loop over 2dim array: if styles[i][1] matches prefStyle, 
     // output as normal, else as alternate stylesheet
     for (int i = 0; i < styles.length; i++) {
       if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
         theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
           .append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
       } else { // output other stylesheets as alternate stylesheets
         theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
           .append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
           .append("\" type=\"text/css\" />").append("\n");
       }
     } // end for loop
 
     return theStyleLinks;
   }
 %> 

As outras páginas JSP podem utilizar este código através da seguinte inclusão e código scriptlet:

Código Exemplo:

                                   <%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %> 

Recursos

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

Utilizar cookies

A selecção de um utilizador pode ser preservada em várias páginas, e em várias visitas, guardando a informação no computador do utilizador através de um cookie. Esta funcionalidade requer que os cookies sejam suportados e permitidos no computador. Os cookies podem ser criados, lidos, modificados e apagados utilizando scripts do lado do cliente, tais como Javascript, ou utilizando scripts do lado do servidor, tais como scripts CGI. A dependência de tecnologias do lado do cliente requer o suporte e a disponibilidade da tecnologia no computador do utilizador, além de suportar e permitir os cookies.

Está disponível na Web informação sobre como criar e utilizar cookies. Estas são algumas sugestões:

Recomendamos que os autores testem o suporte de cookies e forneçam um controlo adicional caso os cookies não sejam suportados. Este controlo adicional deve incluir informação sobre a persistência da selecção como, por exemplo: "Aplicar a selecção a todas as páginas". A mensagem ou página apresentada ao utilizador em resposta à selecção do controlo adicional fornece informação sobre os requisitos do cookie e as opções para os resolver. Caso o utilizador não seja capaz de activar o suporte de cookies, inclua uma declaração sobre o que isto significa para o utilizador se optar por continuar a navegar no sítio da Web, e forneça informação sobre como pode ajustar o seu agente de utilizador para obter resultados semelhantes.

Por exemplo, "O seu browser não está configurado para aceitar cookies. Neste sítio da Web, os cookies são necessários para aplicar as suas alterações seleccionadas em todas as páginas do sítio. Para mais informações sobre como activar cookies no seu computador, consulte Como Activar Cookies. É de salientar que isto pode requerer direitos administrativos para o computador que está a utilizar. Sem o suporte de cookies, as suas definições não incluirão outras páginas neste sítio da Web. Estamos a tentar fornecer esta funcionalidade sem depender da capacidade do seu computador. Entretanto, pode seleccionar a alteração para cada página que visita."

Optimização Progressiva e Javascript Discreto

A melhor prática actual para implementar JavaScript numa página HTML ou XHTML é utilizá-lo de uma forma que separe o comportamento do conteúdo da sua estrutura e apresentação. Os termos 'Optimização Progressiva' e 'JavaScript Discreto' são frequentemente utilizados para descrever scripts que realçam ou melhoram a funcionalidade de uma página, contudo transformam habilmente para que o conteúdo continue a funcionar mesmo quando o JavaScript não é suportado.

Estas são algumas sugestões para obter mais informações:

Testes

Procedimento

  1. Verifique se a página Web inclui controlos que permitem aos utilizadores seleccionar apresentações alternativas.

  2. Verifique se o controlo altera a apresentação.

  3. Verifique se a página resultante é uma versão alternativa em conformidade para a página original.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


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

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

  • Todos os passos acima são verdadeiros.


CSS1
"Folhas de Estilo em Cascata, Nível 1", B. Bos, H. Wium Lie, eds., Recomendação W3C de 17 de Dezembro de 1996, revisto a 11 de Janeiro de 1999. Disponível em: http://www.w3.org/TR/REC-CSS1/.
CSS2
"Folhas de Estilo em Cascata, Nível 2", B. Bos, H. Wium Lie, C. Lilley e I. Jacobs, eds., Recomendação W3C de 12 de Maio de 1998. Disponível em: http://www.w3.org/TR/CSS2/.
CSS21
"Folhas de Estilo em Cascata, Nível 2 - Revisão 1", B. Bos, T. Çelik, I. Hickson, H. Wium Lie, eds., Recomendação W3C Candidata de 25 de Fevereiro de 2004. Disponível em: http://www.w3.org/TR/CSS21/
CSS3
[CSS 2.1 and CSS 3] Roadmap, Datas de publicação e tabela de módulos do Grupo de Trabalho CSS.
HTML4
"Especificação HTML 4.01", D. Raggett, A. Le Hors, I. Jacobs, eds., Recomendação W3C de 24 de Dezembro de 1999. Disponível em: http://www.w3.org/TR/html401/
WCAG20
"Directrizes de Acessibilidade para o Conteúdo da Web 2.0", B. Caldwell, M Cooper, L Guarino Reid e G. Vanderheiden, eds., Recomendação W3C de 12 de Dezembro de 2008, http://www.w3.org/TR/2008/REC-WCAG20-20081211. A última versão das WCAG 2.0 está disponível em: http://www.w3.org/TR/WCAG20/.
XHTML1
"XHTML 1.0 (Extensible HyperText Markup Language (Segunda Edição))", S. Pemberton, et al., Recomendação W3C de 26 de Janeiro de 2000, revisto a 1 de Agosto de 2002. Disponível em: http://www.w3.org/TR/xhtml1/.