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 – http://www.paciellogroup.com/resources/contrast-analyser.html
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 em 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 em http://freedomscientific.com/
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, 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.
Revisão
19/12/2009 – Texto inicial
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:
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:
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:
Dúvidas comentários e sugestões são bem vindas nos comentários abaixo deste texto.
Rui
Foi já há alguns meses que o terminei, mas só agora falo deste acontecimento, talvez o maior na minha “carreira” de webmaster.
Comentários recentes