Técnicas para as WCAG 2.0

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

-

G146: Utilizar disposições líquidas

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é poder apresentar conteúdo sem introduzir barras de deslocamento horizontais, utilizando técnicas de disposição que se adaptem ao espaço horizontal disponível. As disposições líquidas definem áreas de disposição que são redimensionadas com o texto e que refluem conforme necessário para acomodar a apresentação no ecrã. Embora a disposição exacta varie, a relação dos elementos e da ordem de leitura mantêm-se as mesmas. Esta é uma forma eficaz de criar concepções que tenham uma boa apresentação em diferentes dispositivos e para utilizadores com diferentes preferências de tamanho de letra.

Os princípios básicos das disposições líquidas são:

  1. Definir o tamanho das áreas de disposição utilizando unidades que irão fazer com que a área seja ajustada de acordo com o texto, ou seja, aumente ou diminua à medida que o texto aumenta ou diminui;

  2. Colocar as áreas de disposição como uma linha de caixas flutuantes adjacentes, que se moldam a novas linhas conforme necessário, tal como as palavras se moldam num parágrafo.

As disposições líquidas complexas podem ser alcançadas encaixando áreas de disposição, criando assim disposições líquidas localizadas numa disposição líquida maior. Até as disposições líquidas simples necessitam de uma concepção delicada para alcançar resultados com bom aspecto numa vasta variedade de tamanhos de texto, mas as disposições líquidas com uma boa concepção podem ser a concepção da página mais eficaz.

Exemplos

Exemplo 1: Disposição líquida simples em HTML e CSS

O seguinte exemplo simples utiliza HTML e CSS para criar uma disposição líquida. As três colunas ajustam o respectivo tamanho à medida que o tamanho do texto é ajustado. Quando a largura horizontal total exceder a largura disponível das colunas, a última coluna molda-se para ser posicionada abaixo, em vez de ao lado, da coluna anterior. O tamanho da letra pode ser aumentado sem cortar ou introduzir deslocamento horizontal até a palavra mais extensa deixar de caber numa coluna. Este exemplo em particular utiliza tamanhos de percentagem para as colunas e define-as como áreas flutuantes utilizando a propriedade "flutuar".

Código Exemplo:

                                                             
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example of Basic Liquid Layout</title>
<style type="text/css">

 .column
        {
        border-left: 1px solid green;
        padding-left:1%;
        float: left;
        width: 32%;
        }
#footer
        {
        border-top: 1px solid green;
        clear: both;
        }
</style>

</head>
<body>
   <h1>WCAG Example</h1>
   <h2>Text in Three Columns</h2>
      <div title="column one" class="column">
        <h3>Block 1</h3>
        <p> The objective of this technique is to be able to present content 
            without introducing horizontal scroll bars by using layout 
            techniques that adapt to the available horizontal space.
        </p>
      </div>

      <div title="column two" class="column">
        <h3>Block 2</h3>
        <p> This is a very simple example of a page layout that adapts as the
            text size changes.
        </p>
      </div>

      <div title="column three" class="column">
      <h3>Block 3</h3>
        <p> For techniques that support more complex page layouts, see the
            Resources listed below.
        </p>
      </div>

      <p id="footer">Footer text</p>
</body>
</html> 

Recursos

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

Testes

Procedimento

  1. Visualize o conteúdo num agente de utilizador.

  2. Aumente o tamanho do texto para 200%.

  3. Verifique se todo o conteúdo e toda a funcionalidade estão disponíveis sem deslocamento horizontal.

Resultados Esperados