Para quem não sabe, estive envolvido em parceria com a ACAPO no novo website do Banco de Portugal e do Portal do Cliente Bancário.
Aqui vai uma dica, um guia que leva aproximadamente uma hora a verificar (não a corrigir) um website para a sua total acessibilidade.
http://www.ruicruz.pt/como-verificar-a-acessibilidade-de-um-website.htmlSegue o texto (sem formatação) abaixo.
SL
- - -
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
