Fontes Acessíveis
Olá,
Neste meu segundo artigo, também algo simples mas que também é de grande ajuda para quem precisa trabalhar com acessibilidade.
Neste exemplo vou mostrar como fazer para criar aqueles botões que aumentam e diminuem a fonte do texto do site.
script.js
window.onload= function() {
var tam = 1 ;document.getElementById(“maior”).onclick = function()
{
document.getElementById(“conteudo”).style.fontSize = (tam += 0.1) + “em”;
}document.getElementById(“menor”).onclick = function()
{
document.getElementById(“conteudo”).style.fontSize = (tam -= 0.1) + “em”;
}
}
arquivo.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Fontes Acessíveis</title><script type=”text/javascript” src=”script.js”></script>
<style type=”text/css”>
<!–
#tela {
margin: auto;
width: 760px;
}
#topo {
text-align: right;
float: left;
width: 100%;
}
#conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 5px;
float: left;
width: 100%;
}
#maior {
font-size: 2em;
font-weight: bold;
margin: 5px;
cursor:pointer;
}
#menor {
font-size: 1.5em;
font-weight: bold;
cursor:pointer;
margin: 5px;
}
–>
</style>
</head><body>
<div id=”tela”>
<div id=”topo”><span id=”maior”>A</span><span id=”menor”>A</span></div><div id=”conteudo”>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris scelerisque ante faucibus massa. Sed placerat purus tempor nulla. Sed tristique. Cras lacinia pede ac purus cursus gravida. Curabitur eget eros ac erat cursus ullamcorper. Mauris dignissim auctor est. Phasellus ut massa nec odio euismod dapibus. In hac habitasse platea dictumst. Suspendisse varius, quam bibendum bibendum condimentum, nisl erat suscipit neque, ut sodales lectus erat ultrices orci. Proin in est. Integer mauris massa, pretium sed, consectetuer vel, lacinia et, lacus. Ut scelerisque egestas diam. Sed mauris. Praesent vulputate. Proin neque leo, auctor eget, tristique et, malesuada vel, felis. </p>
</div>
</div>
</body>
</html>
Explicando o código:
window.onload = function(){
//Ao carregar o arquivo
document.getElementById(“maior”).onclick = function()
//Ao clicar no A maior
{
document.getElementById(“conteudo”).style.fontSize = (tam += 0.1) + “em”;
//Trabalhando com o DOM aumentamos em 0.1em o tamanho original da fonte a cada click
}
document.getElementById(“menor”).onclick = function()
//Ao ckicar no A menor
{
document.getElementById(“conteudo”).style.fontSize = (tam -= 0.1) + “em”;
//Trabalhando com o DOM diminuimos em 0.1em o tamanho original da fonte a cada click
}
}
Procurei trabalhar de uma forma simples, procurando deixar o HTML mais simples possível, quando forem utilizar o código procurem colocar o CSS em um arquivo a parte, coloquei dentro do HEAD somente para facilitar o entendimento do código.
Um Abraço a Todos e Até o Próximo Artigo.
Veja um Exemplo:
http://www.mxstudio.com.br/wp-content/uploads/2008/04/fontes_acessiveis.htm
Escrito por Marcio_Diniz
on abril 30, 2008. Arquivado em Javascript.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
3 respostas a Fontes Acessíveis
Deixe uma resposta
Autor do Artigo
Marcio Diniz
Muito bom este script, fácil e pequeno.
cara preciso de ajuda para desenvolver em java uma URNA ELETRONICA, trabalho de facul..
Ótimo post ,
estou aprendendo javascript agora e estou achando ótimos materiais para estudos aki no MXS ,
parabéns =]