Arquivo de etiquetas: verificar acessibilidade de um site

Como verificar a acessibilidade e usabilidade de um site.

Nos dias de hoje é importante ao criarmos sites termos o cuidado de os tornar acessíveis a todos os possíveis visitantes. Com isso temos de contar também com visitantes com alguma deficiência tal como a falta de visão, falta de motricidade nos membros superiores etc.

O Rui Cruz publicou um texto que explica como fazer um teste para verificar a acessibilidade de um site.

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 usados neste teste:

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 print screens 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 é minimamente acessível, sendo elas.

  1. 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”.
  2. 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.
  3. 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”.
  4. 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.
  5. 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.
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

Um obrigado ao Rui Cruz por nos ajudar a tornar o nosso site acessível a todos e por ter permitido a publicação do texto aqui.