Acessibilidade e usabilidade do teu website – guia prático de uma hora

A acessibilidade de um website, é um processo reconhecido mundialmente por diversas normas, mais ou menos oficiais, que possibilita a navegação dentro do website por pessoas com ou sem deficiência. Das possíveis pessoas deficientes a aceder ao website, encontram-se alguns exemplos como a falta de visão, a falta de motricidade nos membros superiores, etc. Este teste também vai aumentar a possibilidade da compatibilidade entre browsers e promover a usabilidade do website.

Disclaimer

Este texto pode conter erros gramaticais e de informação. Este texto não é oficial em lado algum a não ser na minha prática como webmaster. O uso deste texto por ti é apenas uma guideline. A reprodução é proibida sem consentimento prévio pedido por e-mail em mail@ruicruz.pt

Material necessário:

• Internet Explorer
• FireFox
• Google Chrone
• Color Contrast Analyser 2,2
• Leitor de ecrã JAWS ou equivalente
• Ampliador de ecrã MAGic ou equivalente
• Conhecimentos médios de informática

Passo 1 – A validação do website

A validação automática de um website é uma forma descritiva e puramente técnica de avaliar, do ponto de vista das regras de acessibilidade mais usadas, se o código HTML de um site é correctamente interpretado. No entanto, esta validação não é certa nem definitiva. O google.pt apresenta erros em vários validadores, no entanto está perfeitamente acessível.

A lista de validadores que eu uso são:

• http://validator.w3.org – validador do World Wide Web Consortium
• http://www.sidar.org/hera/ – validador baseado nas regras WCAG 1.0 que disponibiliza sugestões de código e outras funções além do validador anterior
• http://www.acesso.umic.pt/webax/examinator.php – validador alojado no Programa ACESSO da UMIC – Agência para a Sociedade do Conhecimento, I.P.

Passo 2 – Compatibilidade

A compatibilidade é o primeiro passo para a acessibilidade. Isto porque, se for compatível, é um bom passo para ser acessível. Cada browser é diferente à sua maneira. O K-Maleon e o FireFox usam o mesmo “motor”, mas “combustível” diferente. Significa que usando o mesmo rendering, podem apresentar websites de forma diferente.
O mais importante é testar o Internet Explorer e o FireFox no teu  site, e prestar atenção às possíveis diferenças no website.
Para uma verificação mais exaustiva, existe um URL que tira shots dos websites em mais de 50 browsers diferentes, o http://browsershots.org
Os erros mais comuns são o tipo de letra e o uso de flash, que alguns browsers não suportam.

Passo 3 – Os básicos da acessibilidade

Existem para mim 5 regras base que ao  olharmos para o site podemos ver se o mesmo é mínimamente acessível, sendo elas.

• As imagens terem legenda. Com o IE ou o FireFox, passa o rato por cima da imagem. Se a mesma apresentar legenda ou também conhecido como texto alternativo, este passo está feito. Caso contrário, consulta manuais de HTML para o uso da tag “alt” e “longdesc”.
• O website ser limpo. O website não pode ter banners, ou elementos AJAX que coloquem a visibilidade do texto parcialmente ou totalmente oculta, sempre ou por breves períodos de tempo. A informação é tempo, mas demasiada informação pode-te custar dinheiro.
• Os links são para onde devem ser. Cada link pode ter uma descrição quando passas o rato por cima. Se não tem, consulta o manual HTML para a tag “title”.
• Adeus aos sons. O único som que se deve ouvir, é o do Windows. Sites de música ou com MP3 não devem iniciar automaticamente, bem como sons ao entrar numa página devem ser retirados.
• Formulários e  caixas de texto ordem. Como os links, os formulários devem estar ordenados. Se tens Nome, Morada, Telefone e Submeter, é inapropriado se ao usares a tecla TAB vás directamente para o Nome e depois Submeter.

Passo 4 – Agora és tu que experimentas

Por esta altura já verificaste se tudo o que disse anteriormente está mais ou menos aplicável. Agora está na hora de seres tu a experimentar. Instala as versões de demonstração do JAWS e o MAGic  que podes encontrar no link acima indicado.

• Com o MAGic. Ir ao menu Magnification, e procurares colocar várias configurações. Em seguida, activa a magnificação. O website é visualizado de forma correcta, se por exemplo, seleccionares um padrão de cor cinzento? Tenta outras opções, e confere. Se algo estiver errado, modifica o CSS (ver mais à frente neste guia) ou a cor do texto.
• Com o JAWS: No website, usar o TAB para navegares nos links. A ordem dos links faz sentido? Podes também usar a combinação de teclas INSERT+SETA PARA BAIXO para leres o website.

Passo 5 – A cor

A cor é um dos passos fundamentais para um website. Não só para a acessibilidade, nem para a usabilidade. É mais para o bem comum, chamemos-lhe assim. O programa Color Contrast Analyser pode ser encontrado no link http://www.paciellogroup.com/resources/contrast-analyser.html#download.
Se preferires, como eu, podes instalar uma extensão no FireFox, aqui está ela: https://addons.mozilla.org/pt-PT/firefox/addon/7313
No caso da página gerada no FireFox ao ser efectuado o teste, se alguma cor aparecer a vermelho, terás que verificar a cor e alterar de acordo com as guidelines de acessibilidade.

Passo 6 – E se tudo resultar…

O teu website está agora preparado para algumas das muitas dificuldades que se encontram na web, dificuldades essas que pessoas que como eu ou possivelmente tu não temos. No entanto, é sempre bom sermos reconhecidos pelo trabalho, quanto muito pelo esforço.
Para isso, afixa no teu site, normalmente no footer, os seguintes selos:

• Se o teu wesite passa no http://validator.w3.org/ , usa estes selos: http://www.w3.org/QA/Tools/Icons
• Caso contrário, usa o Simbolo da Acessibilidade Web: http://www.acessibilidade.net/web/sawdesc.php

Dúvidas comentários e sugestões são bem vindas nos comentários abaixo deste texto.

Rui