G146: Utilizar disposições líquidas | Técnicas para as WCAG 2.0
Anterior: Técnica G145
Próximo: Técnica G148
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:
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;
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.
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".