fev / 2008
Home  »  PHP DEV   »   Acessibilidade

Acessibilidade

…

Opa, um exemplo basicão de Acessibilidade usando JavaScript para alterar o tamanho de uma determinada TAG, ex. P, span, li etc….

A acessibilidade é muito importante, ao fazer um site/página lembre-se sempre que nem todos os visitantes por exemplo, enxergam bem como você! Procure na internet sobre como aplicar a acessibilidade de maneira eficiente e usável.

Vamos ao index.html  – Seguindo o mesmo padrão de sempre -> todo o conteúdo dentro da Tag Div conteudo

<html>
<head>
 <title>Acessibilidade</title>
   <script src=”acess.js”     type=”text/javascript”></script>
   <link  href=”lupa.css”      type=”text/css” rel=”stylesheet” />
</head>
<body>
   <div id=”conteudo”>
    <!– Todo conteudo dentro da div conteudo–>
 <ul>
        <p>Este parágrafo terá sua propriedade font-size alterada</p>
        <p>Texto Texto</p>
        <p> </p>
        <span>Texto Span 1</span>
        <span>Texto Span 2</span>
        <p>
          <button onclick=”ChangeFont(‘p’,12)”>P 12px</button>
          <button onclick=”ChangeFont(‘p’,20)”>P 20px</button>
          <button onclick=”ChangeFont(‘p’,28)”>P 28px</button>
          <button onclick=”ChangeFont(‘span’,12)”>span 12px</button>
          <button onclick=”ChangeFont(‘span’,20)”>span 20px</button>
          <button onclick=”ChangeFont(‘span’,28)”>span 28px</button>
        </p>
 </ul>  
   </div>
</body>
</html>

 Acima, perceba que temos algumas Tag’s P e outras SPAN, no evento onclick dos botões estamos passando por parâmetro a Tag a que queremos alterar e também o novo tamanho da fonte. Claro que ao invés de utilizar botões comuns você irá dar um rolezinho no google para encontrar uns botões mais apropriados com por ex: algo que represente um texto ou fonte, um icone/botão que acho legal para isso é: uma lupa com tamanhos diferentes para se ter idéia da alteração, use um tamanho menor da imagem para o menor tamanho da fonte e um tamanho maior para uma fonte maior…algo que faça o usuário entender o que vai acontecer por ex: se ele clicar na lupa grande quer dizer que a fonte irá aumentar e assim por diante…  Você pode fazer isso com a mesma imagem definindo os tamanhos na própria tag. vai ai um exemplo

    <img src=”lupa.jpg”    id=”peq”    onclick=”ChangeFont(‘p’,12)”>
    <img src=”lupa.jpg”    id=”med”   onclick=”ChangeFont(‘p’,20)”>
    <img src=”lupa.jpg”    id=”gra”     onclick=”ChangeFont(‘p’,28)”>

Acho que já entendeu, não é ?

Então vamos passar para o JavaScript com o arquivo acess.js

// a funcao recebe 2 parametros o primeiro tag e segundo tamanho
function ChangeFont(tag,tam){
    // recupera as propriedades da tag passada por paramentro
 obj = document.getElementsByTagName(tag);
 // verifica quantas tags possuem o objeto (ex: 3 paragrafos)
 var tags = obj.length;
 // faz o laço alterando a propriedade font das tags
 for(i=0; i<=tags-1; i++){ 
   // recupera as propriedades da tag atual para o indice I
   obj = document.getElementsByTagName(tag)[i];
   // altera o tamanho
   obj.style.fontSize = tam+’px’;
  }
}

Bem, não há mistérios como podem perceber!

Você passa a Tag (P, Span, Li….) no primeiro parâmetro e entre aspas/apostrofos e passa o tamanho da fonte sem aspas. A funcao ChangeFont irá verificar quantas Tags(ex. paragrafos) existem  após guardar a quantidade de Tags encontradas ele irá fazer um laço (loop for) de 0 até a quantidade de Tags-1, só  para esclarecer poderia ser de 1 até quantidade de Tags, mas é bom lembrar que os vetores ou arrays no JavaScript começam pelo indice 0 (zero) e é bom que façamos algo dentro dos padrões, claro que você poderia alterar o laço e deixar dessa forma: 

for(i=1; i<=tags; i++) // mas isso não é muito legal, quero dizer, devemos começar do começo, de toda forma postarei algo sobre vetores e arrays em breve.

Tem um arquivo CSS também é o  lupa.css usado para formatar o tamanho das lupas

#peq
{
 cursor:pointer;
 width:16px;
 height:16px;
 border:0px;
}

#med
{
 cursor:pointer;
 width:18px;
 height:18px;
 border:0px; 
}

#gra
{
 cursor:pointer;
 width:20px;
 height:20px;
 border:0px; 
} 

Bem, alterando um pouco o JS poderiamos claro passar um terceiro parâmetro ou quantos forem necessários.

Vamos ver uma pequena alteração no Js passando também a cor da fonte, o que acha?

É importante usar com moderação, tudo demais acaba ficando feio e inútil!

Nessa nova função poderiamos utilizar uma outra imagem, por exemplo um pequeno retângulo que represente cada cor, poderia também, a função alterar apenas a cor, seria mais objetivo, mas como sei que você irá explorar tais mudanças no script deixei com as mesma imagem, a lupa, também deixei com que o script altere não só a cor mas também o tamanho da fonte, se você encarar como um desafio alterar o script para que ele mude apenas a propriedade COR dos elementos será legal para você não perder o ritimo, além disso estou aqui para tirar suas dúvidas, então comente a vontade e coloque suas dúvidas ai, certo? 😉  Vamos lá !

// a funcao recebe 3 parametros  tag, tamanho e cor
function ChangeFontCor(tag,tam,cor){
   // recupera as propriedades da tag passada por paramentro
 obj = document.getElementsByTagName(tag);
 // verifica quantas tags possuem o objeto (ex: 3 paragrafos)
 var tags = obj.length;
 // faz o laço alterando a propriedade font das tags
 for(i=0; i<=tags-1; i++){ 
   // recupera as propriedades da tag atual para o indice I
   obj = document.getElementsByTagName(tag)[i];
   // altera o tamanho
   obj.style.fontSize = tam+’px’;
   //altera a cor
   obj.style.color = cor;
  }
}

Perceba que alterei o nome da função para ChangeFontCor para que possamos usar as duas no mesmo Js alterando nos eventos o nome da função e adicionando um terceiro parâmetro, junte as duas funções no mesmo arquivo Js.  A alteração  ficaria assim:

  <img src=”lupa.jpg”   id=”peq”   onclick=”ChangeFontCor(‘p’,12,’#369′)”>
  <img src=”lupa.jpg”   id=”med”  onclick=”ChangeFontCor(‘p’,20,’#f00′)”>
  <img src=”lupa.jpg”   id=”gra”    onclick=”ChangeFontCor(‘p’,28,’green’)”>

Ahhh se você não sabe, Acessibilidade não se resume apenas ao tamanho da fonte, não pense isso por favor, existem muitos fatores que contribuem para que uma página tenha acessibilidade, ao tempo certo postarei outros exemplos de acessibilidade.Então veja funcionando o Exemplo Accessibilidade  testado no IE7 e Firefox

Download da lupa.jpg   (só para aqueles que querem aprender)

Download do Exemplo completo (só para aqueles não que querem aprender)

Comments

  1. By Elky Klerk

    Olá, Rafael,

    Parabéns pelo blog, estava procurando algo semelhante em outros sites e achei o seu mais p´rático, estou trabalhando netse site indicado e gostaria de implementar acessibilidade , e achei ótimo suas dicas.
    Parabéns pela biblioteca light box, vou usá-la para este site.
    Quero saber se os icons do site indicado por voc~e é de uso free, sem problemas de direitos autorais, o mesmo gostaria de saber sobre a imagem da lupa, sem mais, grato, e felicidades,

    Elky

  2. By Guilherme Borges

    Ola, suas dicas sao extraordinarias, de muita utilidade parabens pelos artigos, quanto a acessibilidade, no caso de mudar tamanho de fontes, teria alguma forma de armazenar a preferencia do visitante? escolho uma fonte maior e se eu der f5 ela continuara com a fonte maior… sera que isso so seria possivel com cookies

    Atenciosamente,

    • By Rafael Clares

      Guilherme, obrigado pelo comentário.
      Sim, o ideal é fazer com cookies, no caso de haver muitas informações para armazenar talvez uma sessão seja mais indicada.
      Quantos aos cookies, veja em http://br.php.net/cookies …

%d blogueiros gostam disto: