Estudo de caso sobre acessibilidade
Por Erika Sarti, em 13/08/2007. Atualizado em 28/07/2011.
Introdução
Quando eu assisti a este vídeo sobre acessibilidade, minha mente se abriu para o assunto, especialmente no que se refere ao acesso aos sites da internet por deficientes visuais.
Felizmente, este é um tema que "virou moda" recentemente, e cada vez mais web designers e usuários estão se preocupando com isso. Prova disso é que, em meados de 2007, quando o assunto estava sendo bastante discutido, o InfoWester recebeu nada menos que doze mensagens de leitores solicitando providências quanto à acessibilidade do site (provavelmente também assistiram ao mencionado vídeo) para deficientes visuais.
Acessibilidade não é apenas desenvolver um site que possa ser interpretado corretamente pelos navegadores de internet e pelos leitores de tela utilizados por pessoas com deficiência visual. Deficientes motores também se beneficiam da navegação pelo teclado, já que o uso do mouse é limitado e, muitas vezes, impossível no caso deles, sem contar que há usuários sem deficiência, mas que acessam o site a partir de dispositivos diferentes de um PC.
Foi então que colocamos o assunto em prática e adaptamos o InfoWester a essa nova realidade. O trabalho não foi longo - um layout tableless ajudou, e muito, no processo - e esperamos que o objetivo tenha sido atingido. Para servir como referência, veja as principais alterações a seguir.
Links para acesso direto ao conteúdo
Você deve ter notado que, no canto direito superior das páginas do InfoWester, existem três pequenos links: ir para o conteúdo, ir para o menu e sobre os links "ir para":
Por meio deles, usuários que navegam pelo teclado (usando geralmente a tecla Tab) não precisam passar por todos os links da barra superior ou da lateral para chegar ao conteúdo. Se quiser acessar o menu, também há um link para isso. O terceiro link serve apenas para matar a curiosidade dos usuários que estão vendo isso pela primeira vez =)
Outra solução para que a coluna do texto principal possa ser acessada antes da coluna secundária consiste, usando um layout tableless, em posicionar o <div> do texto antes do <div> secundário. Assim, o programa leitor de tela acessará seu conteúdo primeiro.
Meta tag da linguagem
Este item é importante para que softwares leitores de tela possam reconhecer a língua em que devem "dizer" o texto. Para quem não sabe, esses programas realmente pronunciam o texto aos deficientes visuais. Um dos softwares mais conhecidos do tipo é o Jaws. No caso do InfoWester, essa metatag já existia, mas apenas em uma parcela das páginas:
<META HTTP-EQUIV="content-language" CONTENT="pt-br">
Caso você não saiba o que é meta tag ou queira saber mais sobre o assunto, leia o tutorial Meta Tags - O que são e como utilizá-las.
Transformar os títulos das páginas em link, para que o leitor de tela pare neles
O leitor de tela navega pela página orientado pelo teclado, geralmente pela tecla "Tab". Assim, ele vai parando em cada link e lendo o seu conteúdo. Se o título da página não for um link, ele vai "passar reto" e só parar no primeiro link dentro do texto. Obviamente, se não existir nenhum link no artigo, o leitor de tela vai ter dificuldades, dando muito mais trabalho para o deficiente visual encontrar o conteúdo que procura.
Fazer do título da página um link é uma solução simples, mas que faz uma grande diferença, já que permite identificar onde o texto começa.
Deixar o texto dos links claro
Como o leitor de tela para em cada link, é importante que no texto fique bem claro para onde ele aponta.
Clique aqui para visitar nosso fórum pode ficar mais claro como Visite nosso fórum.
Imagens com o atributo "alt"
Quando o leitor de tela encontra uma imagem, a única maneira que ele pode interpretar seu conteúdo ao usuário é pelo atributo "alt". Se o seu site usa imagens que são fundamentais para a compreensão do conteúdo ou para a navegação, não se esqueça de definir sua descrição de maneira clara. No caso do InfoWester, a utilização do atributo "alt" já existia.
Conteúdo importante em pop-up
Se em seu site algum conteúdo importante abre em uma janela pop-up, reconsidere essa arquitetura e abra sua página na janela atual do navegador. Até porque usuários comuns, hoje em dia, têm bloqueadores de janelas pop-up ativados por padrão em seus navegadores, ou mesmo estão acessando seu site por meio de um dispositivo móvel. Assim, percebe-se que janelas pop-up se tornam um obstáculo para todos os usuários, não só para portadores de deficiência.
No InfoWester, duas páginas tinham conteúdo acessível apenas por pop-ups: a página Sobre e a página de contato. Na primeira, corrigimos o problema colocando o texto das janelas na mesma página, acessíveis por meio de âncoras; já na segunda, colocamos o formulário de contato embaixo do texto de esclarecimento (antes, o formulário abria em um pop-up).
Todos os campos de formulário explicados pelo <label>
Você conhece a tag <label>? Usada em conjunto com a tag <input> nos formulários, ela ajuda o leitor de tela a explicar para o usuário qual o conteúdo de um determinado campo. Para um campo onde o usuário deve, por exemplo, fornecer o nome, ela é usada da seguinte maneira:
<label for="nome"> <input type="text" id="nome">
Ainda na página de contato, acrescentandos a tag <label> nos três campos do formulário.
Finalizando
Esses foram os principais acertos que fizemos aqui no InfoWester e, certamente, não serão os únicos. Por isso, não interprete essas como as únicas medidas que você deve tomar para deixar seu site acessível. Este é um assunto muito vasto, e vale a pena dedicar algum tempo para aprender mais sobre isso.
Erika Sarti é web designer e trabalha como free-lancer desde 2000, sendo também responsável pelo layout do InfoWester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.
Voltar
Página inicial
Ir para o topo