JQuery – Ferramenta para aumentar e reduzir o tamanho da fonte

Pensando em acessibilidade e atendendo os pedidos que a Bia me fez a algum tempo, desenvolvi para a próxima versão do And After uma ferramenta de acessibilidade para aumentar e reduzir o tamanho das fontes do site.

Esta ferramenta é conhecida de quase todos, o famoso "A+" e "A-" que muitos sites exibem, dando maior liberdade para o usuário e auxiliando a adaptação do usuário a interface do site.

Para desenvolver a ferramenta utilizei a biblioteca jQuery, recomendo a utilização do Google Ajax Libraries para isso.

Primeiro vamos fazer dois botões, um para aumentar e outro para diminuir o tamanho da fonte, no HTML não identifiquei nenhuma ação, apenas setei um ID para cada botão que posteriorimente com o jQuery será utilizado para definir a ação de cada botão. O HTML ficou assim:

A-A+

Optei por não utilizar imagem nenhuma e fazer tudo apenas com CSS, minha folha de estilos da ferramenta ficou assim:

div.ferramentas_texto a{
	padding: 4px;
	border: 1px solid #666;
	font-size: 11px;
	font-weight: bold;
	margin-right: 7px;
	width: 16px;
	height: 16px;
	display: block;
	float: right;
	background: #fff;
}
div.ferramentas_texto a:hover{
	background: #666;
	border-color: #222;
	color: #fff;
	cursor: pointer;
}

Com os dois botões prontos falta atribuir as funções a cada um deles, agora entra o jQuery (o código está explicado abaixo):

//Guilherme Serrano - Ferramenta para aumentar e reduzir o tamanho da fonte (jQuery)
//www.odesenvolvedor.com.br
//andafter.org
$(document).ready(function(){
var fonte = 13;
    $(´#aumenta_fonte´).click(function(){
		if (fonte<17){
			fonte = fonte+1;
			$(´body´).css({´font-size´ : fonte+´px´});
		}
    });
    $(´#reduz_fonte´).click(function(){
		if (fonte>9){
			fonte = fonte-1;
			$(´body´).css({´font-size´ : fonte+´px´});
		}
    });
});

Neste caso o tamanho padrão da fonte (no CSS) é 13px, portanto minha variável fonte inicialmente tem valor 13. Ao clicar no botão #aumenta_fonte o script verifica se a fonte é menor que 17, valor que estipulei como máximo, se for menor soma 1 a variável fonte e altera o atributo font-size do body. O mesmo processo acontece quando o usuário clica no botão #reduz_fonte.

Você pode definir alterar apenas o tamanho da fonte do conteúdo e não de todo o body, para isso faça alterações como o exemplo abaixo:

//Guilherme Serrano - Ferramenta para aumentar e reduzir o tamanho da fonte (jQuery)
//www.odesenvolvedor.com.br
//andafter.org
$(document).ready(function(){
var fonte = 13;
    $(´#aumenta_fonte´).click(function(){
		if (fonte<17){
			fonte = fonte+1;
			$(´#content´).css({´font-size´ : fonte+´px´});
		}
    });
    $(´#reduz_fonte´).click(function(){
		if (fonte>9){
			fonte = fonte-1;
			$(´#content´).css({´font-size´ : fonte+´px´});
		}
    });
});

No exemplo acima a fonte alterada seria apenas do elemento com id content, supondo que esta seria a div onde está localizado o conteúdo do seu site.

É isso, uma ferramenta simples que pode melhorar a acessibilidade do seu site, espero ter ajudado.

Dúvidas críticas e sugestões nos comentários, beleza? 🙂