Acessibilidade com jQuery – Redimensionando texto

Uma certa vez me pediram para desenvolver uma gambiarra ferramenta que permitisse redimensionar o texto de uma página. Isso foi logo no começo deste ano, pouca experiência com jQuery e malícia zero na arte do POG (Programação Orientada a Gambiarra.)

O primeiro impulso foi procurar por alguma solução pronta, estilo os plugins de Lightbox do jQuery, mas na época não obtive o sucesso desejado, então abri meu Siple Text 2 e comecei a trabalhar.

A primeira solução que desenvolvi envolvia alterar a propriedade zoom, mas isso implicava em utilizar CSS3 e já devem imaginar a arte que seria “adaptar” isso ao querido Internet Explorer. Mas como o tempo não estava ao meu favor acabei usando isso mesmo.

Recentemente houve novamente a demanda pelo tal código, mas desta fez decidi fazer da maneira correta. Munido da documentação do jQuery e um pouco de água mineral (Yeah, sou um programador que não toma café) reuni o que ia precisar e comecei a desenvolver a lógica:

Primeira necessidade era delimitar o que seria afetado, ou seja, um container em que eu deixaria o código agir, já que não queria que todos os elementos da página fossem redimensionados.

Outro ponto era “guardar” o tamanho original do texto, para permitir o redimensionamento correto e permitir que o texto voltasse ao seu estilo original com apenas um click (sem reload). Para esta tarefa utilizei o método jQuery.data() do próprio jQuery, que permite armazenar qualquer informação do elemento selecionado.

O código divide-se basicamente em duas etapas, na primeira é feita a definição do container e das tags que serão afetadas, além da leitura dos elementos desejados e a cópia de seu tamanho original:

/* Proporção atual */
  var currentRatio = 100;

/* Container - Elemento que contém o que será redimensionado */
  var container = '#main-content';
  
/* TAGs permitidas */
  var tags = container+' p, '+container+' span, '+container+' h2, '+container+' h3, '+container+' h4, '+container+' h5, '+container+' a';
  
  /* Armazena o tamanho original */
  jQuery(tags).each(function(){
    var obj = jQuery(this);
    var fontSize = obj.css('font-size');
    obj.data('originalSize',parseInt(fontSize.replace('px','')));
  });
									

Com os tamanhos copiados, é hora definir o “gatilho” da ação. No meu caso utilizei três links, dentro de uma div#acessibilidade:

<div id="acessibilidade">
  <span class="small"><a href="#sml" title="Diminuir fonte">A</a></span>
  <span class="medium"><a href="#nrm" title="Tamanho normal">A</a></span>
  <span class="large"><a href="#lar" title="Aumentar fonte">A</a></span>
</div>
									

E atribuí a ação necessária ao link através do método $.click:

jQuery('#acessibilidade a').click(function(){
    var obj = jQuery(this);
    var act = obj.attr('href');
  
    switch(act){
      case '#sml':    currentRatio = currentRatio-10;
              if(currentRatio <= 40)
                currentRatio = currentRatio + 10;
              break;
      case '#nrm':    currentRatio = 100;
              break;
      case '#lar':   currentRatio = currentRatio+10;
              if(currentRatio >= 160)
                currentRatio = currentRatio - 10;
              break;
              
    }
    
    jQuery(tags).each(function(){
      var obj = jQuery(this);
      var orgSize = obj.data('originalSize');

      obj.css('font-size',parseInt(orgSize*(currentRatio/100)));
    });
    
    return false;
  });
									

Neste meu exemplo, defini que ao carregar a página ela está com o seu tamanho normal (ratio = 100). Ao clicar em aumentar ou diminuir a fonte, é acrescido ou subtraído 10 da variável ratio, caso o usuário clique no link para retornar ao tamanho original, a variável ratio volta a ter 100.

Com a variável ratio definida, é feito o cálculo do novo tamanho da fonte, recuperando o valor armazenado no elemento e multiplicando pelo ratio e dividido por 100 para obter o novo tamanho.

Utilizando a mesma lógica, é possível substituir os 3 links pelo slider do jQuery UI, permitindo um ajuste mais “fino” no tamanho da fonte.