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:
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? 🙂
