tadarank afiliados

23 agosto, 2006

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.

8 comentários:

  1. Dicas muito importantes... Vou dar uma olhada no simulador do Opera Mini =)

    Abraço!

    ResponderExcluir
  2. Ainda não conhecia o DaSilva, valew pela dica =)

    ResponderExcluir
  3. Muito bom, qualquer desenvolvedor que não use o daSilva deveria se envergonhar!

    :D

    ResponderExcluir
  4. "qualquer desenvolvedor que não use o daSilva deveria se envergonhar"

    Que vergonha, então! heheheh

    Muito bom esse post!
    Eu realmente não conhecia.. é, eu juro! :P

    ;*

    ResponderExcluir
  5. Para testar em navegadores de texto, pasta utilizar o navegador w3m, que se encontra em qualquer distribuição linux. "w3m www.google.com.br"

    ResponderExcluir
  6. um bom tambem e o
    http://www.accesible.com.ar/examinator/index.php
    o legal desse que mostra um rank e dicas para vc melhora no rank ,ablas
    espanol ,foi mal eu sou numero 5 la
    respeita hehehehe
    valeu Micox pela dicas aqui,se pude colocar um lance de xslt to me ferrando para aprende isso

    ResponderExcluir
  7. heheh. Muito bom o teste Henrique. Gostei mesmo. Vou adicionar ao post.

    O seu tá em 5o lugar hehe.
    Um que eu fiz (www.lgcom.com.br) ficou em 15o por causa de um flash que o cliente insistiu :(

    O ElMicox aqui tá um lixo, não vou nem falar. hehhe

    ResponderExcluir
  8. micox eu tava meio sumido pq eu to com um pepino aqui ,
    depois eu te passo um material sobre acessibilidade no flash valeu

    desculpe pela minha ausencia
    no codigo fonte do meu site esta meu gmail adicionar para trocas umas ideias estou abrindo uma agencia e meus socios estao acabando com a minha vida

    colocando o ruby nos trilhos
    com code igniter + php

    um abraço

    henrique

    ResponderExcluir

Resultado! Concursos