Técnicas para as WCAG 2.0

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

-

SCR34: Calcular o tamanho e a posição de modo a ficarem ajustados ao tamanho do texto

Aplicabilidade

Scripting do lado do cliente.

Esta técnica está relacionada com:

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

O cálculo do tamanho e da posição pode ser complexo e diferentes browsers podem produzir diferentes resultados. Isto pode ocorrer quando o estilo CSS mistura o preenchimento, as margens e as larguras de um objecto, ou quando mistura um valor desfasado e claro, por ex., offsetWidth e largura. Alguns destes comportam-se de forma diferente na reacção ao zoom (ampliar/reduzir). Para obter uma explicação sobre a diferença entre o Internet Explorer 6 e posterior e as versões anteriores do Internet Explorer, consulte MSDN: Arranjar a Caixa Em Vez de Ler o Contéudo Fora Dela (página em inglês) .

Descrição

O objectivo desta técnica é calcular o tamanho e a posição dos elementos, de modo a serem ajustados correctamente à medida que o tamanho do texto é ajustado.

Existem quatro propriedades em JavaScript que ajudam a determinar o tamanho e a posição dos elementos:

Calcular a altura e a largura utilizando offsetHeight e offsetWidth é simples, mas para calcular as posições à esquerda e superior de um objecto como valores absolutos, é necessário considerar o elemento principal. A função calculatePosition abaixo é executada em todos os nós principais de um elemento para apresentar um valor final. A função utiliza dois parâmetros, objElement (o nome do elemento em questão), e a propriedade offset (offsetLeft ou offsetTop):

Exemplos

Exemplo 1

A função Javascript:

Código Exemplo:

function calculatePosition(objElement, strOffset)
{
    var iOffset = 0;

    if (objElement.offsetParent)
    {
        do 
        {
            iOffset += objElement[strOffset];
            objElement = objElement.offsetParent;
        } while (objElement);
    }

    return iOffset;
}

O exemplo seguinte ilustra a utilização da função acima, alinhando um objecto debaixo de um objecto de referência, à mesma distância da esquerda:

Código Exemplo:

// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');

objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px'; 

Recursos

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

Testes

Procedimento

  1. Abra uma página que tenha sido concebida para ajustar os tamanhos das caixas à medida que o tamanho do texto é alterado.

  2. Aumente o tamanho do texto até 200% utilizando o ajuste do tamanho do texto do browser (não a funcionalidade de zoom (ampliar/reduzir).

  3. Verifique o texto para se certificar de que o tamanho da caixa de texto é ajustado de modo a acomodar o tamanho do texto.

  4. Certifique-se de que não existe texto "cortado" ou que tenha desaparecido como resultado do aumento do tamanho do texto.

Resultados Esperados