Acessibilidade: Aumentando e Diminuindo Tamanho de Letra em seu site

O artigo tem como objetivo mostrar como utilizar de certa forma a acessibilidade aumentando e diminuindo o tamanho da fonte em seu site.

por Mauricio Junior

Olá pessoal, meu nome é Mauricio Junior. Venho mostrar através deste artigo como utilizar de certa forma a acessibilidade aumentando e diminuindo a letra em seu site. O conceito é bem simples e fácil de entendimento.

Acessibilidade é uma forma de ajudar aos deficientes a navegarem na internet utilizando programas específicos de leitura de página. Não importa o tipo de deficiência. Existem muito mais formas de utilizar a acessibilidade na página web facilitando a vida de quem precisa verdadeiramente. Falarei mais sobre isso em outro artigo.

Requisitos:
- HTML
- JavaScript
- Div

Alguns desenvolvedores de software não sabem programar ou não gostam nem de tentar o conhecimento na linguagem de interpretação chamada JavaScript. Existe uma grande diferença entre JavaScript e Java.

JavaScript

Passarei de uma forma simples e tranqüila todo o javascript e depois o html onde aumenta e diminui o texto da página. Lembro que o mesmo funciona tanto no IE quanto no Firefox. A primeira coisa é o javascript. (Referência 1.1)

<script type="text/javascript">

var tam = 15;

function mudaFonte(tipo,elemento){
	if (tipo=="mais") {
		if(tam<24) tam+=1;
		createCookie("fonte",tam,365);
	} else {
		if(tam>10) tam-=1;
		createCookie("fonte",tam,365);
	}
	document.getElementById("txt_home").style.fontSize = tam+"px";

}

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	} else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(";");
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==" ") c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
</script>

Referência: 1.1

Este código da referência 1.1 possui três funções exclusivas feitas em JavaScript. Tente entendê-las de uma melhor forma, mas como falei anteriormente, é bem simples. O método responsável chamada mudaFonte.

A referência 1.1 mostra dois códigos em negrito, onde um é o nome da função e o outro é o nome da div cuja fonte deve ser alterada. É necessário criar um cookie para manter o aumento da letra; por isso a referência possui dois outros métodos de cookie, um para criar e outro para ler.

document.getElementById("txt_home").style.fontSize = tam+"px";

Referência: 1.2

A referência 1.2 mostra como se deve aumentar a fonte do div. Lembro que, para pegar o nome da div ou qualquer objeto, deve-se utilizar o getElementById, assim funcionará em qualquer browser. Em meu html, tenho uma div chamada txt_home onde possui um texto dentro da mesma.

Html

No HTML, posso colocar como um div ou mesmo uma tag a com href e um ID com o nome txt_nome. Segue o HTML simples: (1.3)

<a href="#" id="txt_home">A ex-primeira-ministra e líder da oposição paquistanesa, 
Benazir Bhutto, morreu vítima de um atentado durante comício, perto de Islamabad, a duas
semanas das eleições legislativas. Testemunhas afirmam que ela teria sido atingida por 
um tiro momentos antes de uma explosão.  Outras 15 pessoas morreram no ataque. O partido 
da ex-primeira ministra declarou que ela morreu como mártir. Benazir foi a primeira mulher 
a chefiar um país de maioria muçulmana. Em outro comício da oposição, atiradores mataram 
quatro pessoas e feriram três.</a>

Referência: 1.3

Note que o meu href possui um id chamado txt_home. Já tenho o meu javascript e o html, falta apenas o link para que funcione o aumento e diminuição da fonte. (1.4)

<a href="javascript:void(0);" Onclick="mudaFonte("mais"); return false">
<img src="botaoAumentaFonte.png" border="0"></a>
<a href="javascript:void(0);" Onclick="mudaFonte("menos"); return false">
<img src="botaoDiminuiFonte.png" border="0"></a>

Referência: 1.4

Um segredo, não coloque dentro do href o código "#". Caso colocar o código "#" não funcionará da melhor maneira quando estiver no IE (Internet Explorer) e Firefox. Note que o href está "javascript:void(0);", ou seja, não retorna valor algum. No atributo OnClick possui o nome da função feita em javascript chamada mudaFonte("mais") passando como parâmetro com o nome mais ou o nome menos. Coloquei uma imagem qualquer para representar o meu + ou -. Ao clicar no + aumenta a fonte, ou clicar no - diminui a fonte. (Referência 1.5)


Referência 1.5

Note que na parte de cima da figura de referência 1.5, o tamanho da fonte é normal. Ao clicar na figura (+), o tamanho da fonte aumentou o qual é mostrado na segunda parte da figura.

Bom, eu fico por aqui. Espero que este artigo tenha te ajudado de certa forma, qualquer problema favor entrar em contato.