|
Audio
|
Na construção de websites nem sempre é levado em conta a questão da acessibilidade. No entanto, é imprescindível que ao se desenvolver um site tenha-se em mente que ele deve atender o maior número possível de pessoas. Tendo isso em vista, torna-se necessário investir em formas que tornem isso possível, até mesmo ao implementar uma tarefa simples como inserir ícones que permitam o usuário aumentar e reduzir a fonte do site, você estará atendendo a um público que antes não atendia.
Usuários com deficiência visual parcial nem sempre conseguirão ler com facilidade alguns textos dependendo do tamanho da fonte que foi aplicada. Assim sendo, o ideal seria que o próprio site disponibilizasse de forma acessível um meio para que o usuário possa ajustar o tamanho da fonte à sua necessidade.
Criando ícones para aumentar e reduzir o tamanho da fonte
Para adicionar os ícones que aumentam e diminuem a fonte dos textos das páginas utilizaremos apenas HTML e jQuery.
Primeiramente, utilizando o HTML, criaremos dois ícones, um para aumentar a fonte e outro para diminuir a fonte. Para isso você também pode fazer o uso de imagens.
Em seguida, dentro da single e/ou page do site insira o código abaixo onde você desejar que os ícones apareçam.
<!-- DIMINUIR FONTE --> <span id="diminuir-fonte"> <a title="Diminuir Fonte" alt="Diminuir">A-</a> </span> <!-- AUMENTAR FONTE --> <span id="aumentar-fonte"> <a title="Aumentar Fonte" alt="Aumentar">A+</a> </span>
Agora é preciso fazer com que os ícones funcionem, para isso é necessário que façamos a chamada da biblioteca jQuery. Caso seu site já faça a chamada do jQuery esta etapa deve ser ignorada. Caso contrário isto pode ser feito adicionando essa linha entre as tags head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>;
Nesse exemplo o arquivo de jQuery é disponibilizado pelo Google, onde ele está hospedado.
Por fim, o seguinte script é inserido entre as tags <head> </head>. Ele contém as funções que farão os ícones funcionarem. Ao clicar no ícone de aumentar a fonte, o texto que estiver dentro da área da tag com o id content irá aumentar 2px da fonte, somando isso a cada clique, já no ícone de diminuir ele irá reduzir 2px da fonte.
<script type="text/javascript" charset="utf-8">
var $z = jQuery.noConflict();
$z(document).ready(function(){
$z("#aumentar-fonte").click(function () {
var size = $z("#content p").css('font-size');
size = size.replace('px', '');
size = parseInt(size) + 2;
$z("#content p").animate({'font-size' : size + 'px'});
return false;
});
$z("#diminuir-fonte").click(function () {
var size = $z("#content p").css('font-size');
size = size.replace('px', '');
size = parseInt(size) - 2;
$z("#content p").animate({'font-size' : size + 'px'});
return false;
});
});
</script>
Vantagens
Ao inserir nos sites ícones que permitem de forma intuitiva aumentar e diminuir o tamanho das fontes, você estará atendendo um grupo de pessoas que antes não atendia, facilitando o acesso e melhorando a experiência delas ao acessar seu site. Ou seja, com algo de simples implementação você promove a inclusão digital de deficientes visuais parciais e ainda garante a sua responsabilidade social.
Sobre nosso desafio de implementação de recursos não solicitados pelos clientes
Temos um desafio interno onde precisamos implementar a cada ciclo quinzenal de desenvolvimento uma novidade, inovação, benefício para nossos clientes. Isso tem nos permitido agregar valor aos projetos e experimentar novos recursos.
A desse ciclo foi a implementação do ícone de aumento e redução de fonte para nossos clientes.
Excelente conteúdo. Parabéns ao autor que escreveu esse belo artigo. Acho queria interesante ter mais conteúdo relacionado a acessibilidade.
Excelente!