← UI & UX Design

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

Lida 3268 vezes

Offline

ruicruz 
Membro
Mensagens 1105 Gostos 0
Feedback +1

Troféus totais: 32
Trófeus: (Ver todos)
Apple User Level 6 Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5 Level 4 Level 3

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.html


Segue o texto (sem formatação) abaixo.


SL


- - -

Citar
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
Offline

DATTER 
Membro
Mensagens 33 Gostos 0
Troféus totais: 18
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1 10 Posts First Post Karma

Obrigado pela info SlAiD ;)

Um abraço.
Offline

designi1 
Membro
Mensagens 27 Gostos 0
Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Signature

Estava para criar um post a perguntar por isto mesmo. Se não seria interessante dar destaque acessibilidade e usabilidade, visto que estas têm implicações directas muitas das vezes no SEO.

Aproveito e partilho 3 sites que me baseio para os testes de usabildiade e assebilidade:

http://www.tawdis.net/
http://wave.webaim.org/
http://www.etre.com/tools/accessibilitycheck/