Testes de acessibilidade e usabilidade incomuns

Olá povo.

Nós entusiastas das WebStandards sempre pregamos a acessilidade e usabilidade como uma de nossas bandeiras, mas muitas vezes, ao desenvolvermos nosso site, só lembramos desta acessibilidade apenas no quesito "ser visualizado em diversos navegadores" e nos esqueçemos dos outros dispositivos.

São poucos os que verificam a acessibilidade e usabilidade de seu site lembrando de outros quesitos também como:

1. Navegadores sem suporte a CSS
2. Navegadores sem suporte a imagens
3. Navegadores sem suporte a Javascript
4. Navegadores de dispositivos móveis
5. Navegadores de texto
6. Navegador com letras grandes ativadas
7. Visualização de Impressão

É claro que existem outras verificações que devem ser feitas como a da área útil da tela e contraste de cores, mas nesta postagem, vou focar apenas nos 6 itens acima e mostrar maneiras de testá-los.
O importante não é manter o super-ultra-moderno visual que você fez para seu site, mas sim manter o conteúdo, a navegação e a organização. Para não ter que ficar repetindo estes 3 termos toda hora, vou chamá-los de 3 básicos de um site.

Teste sem suporte a CSS

Este é o teste mais básico.
Para não ter que ficar baixando navegadores antigos só pra testar isto, você pode usar os recursos do seu browser para desabilitar o CSS.
Todo navegador decente possui um menu "Exibir > Estilos > Nenhum estilo" ou algo similar.
Assim você pode desabilitar o CSS e ver se sua página mantém os 3 básicos e permitem que seus visitantes usem o site.

Teste sem suporte a imagens

Para desabilitar as imagens e ver se seu site mantém os 3 básicos da usabilidade, podemos fazer uso da WebDeveloper Toolbar (ou WDT) no Firefox ou do menu "Exibir > Imagens" no Opera.

Teste sem suporte a Javascript

Este aqui acho que é básico para todos. Todos os navegadores modernos possuem mecanismos para desabilitar a execução de Javascript através da configuração de opções. Eu pessoalmente, acho que a dobradinha Firefox/WDT saem na frente por deixarem a tarefa bem mais fácil.

Teste com navegadores de dispositivos móveis

Enquanto estiver desenvolvendo, tenha em mente que estes dispositivos possuem tela pequena (400px ou menos). Não se esqueça também que possuimos o media type handheld como "carta na manga", apesar das media types não estarem completamente habilitadas em todos os dispositivos.
Todos sabemos que o Opera Mini é um navegador que está se popularizando para estes dispositivos. Para não ter que tirar o celular do bolso, você pode usar um simulador online do Opera Mini para PCs (feito em Java).
Na fase de desenvolvimento, podemos ver uma prévia de como está nossa página através da WDT em "Miscellaneous > Small Screen Rendering".

Teste com navegadores de texto

Novamente, pra não ficar baixando navegador demais, eu prefiro utilizar o Opera pra simular a renderização em navegadores de texto. Vou em "Exibir > Estilo > Modo usuário > Emular navegador de texto". Observação:Não sei se o CSS media type "tty" deveria funcionar aqui, só sei que não funcionou.

Teste com letras grandes

Não pense que isto não tem importância. Muitas e muitas pessoas usam sim a configuração para aumentar o tamanho de letras e facilitar a leitura, porém, nós desenvolvedores sempre nos esquecemos disso e nosso layout e os 3 básicos vão por água abaixo. Enfim, trabalhar com letras grandes é algo que pode te trazer muitas dores de cabeça se seu site não estiver bem planejado.
Pra efetuar o teste é fácil: todos os navegadores possuem um menu "Exibir > Tamanho do texto" ou algo similar.

Visualização de impressão

Este também é algo muito importante e agente sempre esquece.
Após desenvolver seu site, não custa nada dar uma passada no visualizador de impressão pra ver se está tudo ok.
Não se esqueça que, pra nos ajudar, há o media type "print" nos navegadores modernos.

Ao desenvolver suas declarações CSS para o media "print", seja bonzinho com seu usuário e com o cartucho de tinta dele: retire imagens desnecessárias, cores desnecessárias, negritos desnecessários, layouts desnecessários e mantenha o foco no conteúdo daquela página apenas, nada de ficar exibindo menus, cabeçalhos e rodapés em excesso, afinal, não há como navegar via folha de papel não é?

 

Enfim, aqui você acabou seu pequeno teste de acessibilidade e usabilidade. Espero que seu site não tenha dado muitos problemas :) . Lembrando para os que ainda não se converteram, tudo fica mais fácil quando você é adepto dos WebStandards (duvida? faça estes testes com minhas 2 conversões). Não se esqueça que o importante não é seu visual mas sim os 3 básicos citados anteriormente: conteúdo, navegação e organização.

Outras ferramentas úteis pra avaliar sua acessibilidade são: o validador de acessibilidade DaSilva (pra mim é lei) e a Mozilla Accessibility Extension (que eu ainda não testei - testem aí e comentem hehehe ). Editado 04/01/07: Tem também o Examinator que o Henrique indicou nos comments.

Ah, não se esqueçam de assinar a lista de presença quem ainda não assinou.
Este primata se despede aqui. Até o próximo episódio. :)

// Dúvidas? Este artigo também foi postado no fórum iEvolution. Joque suas dúvidas lá!
// Se eu falei alguma bobeira, comente aí :) !!

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.