Ao longo do tempo convenções e melhores práticas tem sido desenvolvidas para ajudar a melhorar de forma geral a usabilidade de websites durante a construção do layout e da codificação. Este post destaca os 10 crimes de usabilidade mais cometidos seja por erro ou negligencia na área de web design e provê uma solução alternativa para ajudar a melhorar a usabilidade do seu web site.
1º – Label de formulário não associado à campos
Label de formulário não associado à campos
Usando o atributo ‘for’ permite que quando o usuário clique no label automaticamente é selecionado o campo input. Isso é muito importante para campos checkbox e radio pois permitem uma maior área clicável.
2º – Logo não faz link para a página inicial da empresa
Logo não faz link para a página inicial da empresa
Linkar o logo do site para a página inicial tornou-se uma prática comum e atualmente os internautas esperam que ao clicar no logo, ele seja redirecionado para a página inicial. Também vale mencionar que é legal o logo aparecer no canto superior esquerdo.
3º – Não especificar o estado de link visitado
Não especificar o estado de link visitado
O estado de link visita é o que o próprio nome diz. Este não é um dos mais avançados seletores do CSS, mas é quase sempre esquecido. Dar uma dica a um usuário sobre qual link ele já clicou é sempre uma boa!
4º – Não indicar um campo formulário ativo
Não indicar um campo formulário ativo
Você pode usar o seletor :focus em diversos elementos, mas ele é super acessível quando usado para inputs e textareas para indicar que determinado campo está ativo. Adicionar estilo CSS, tipo destacar a borda ou alterar sutilmente a cor de fundo do elemento.
5º – Uma imagem sem uma descrição no atributo alt
Uma imagem sem uma descrição no atributo alt
Isto é desviar um pouco no campo da acessibilidade, mas isso continua sendo algo importante a se considerar. Lembre-se sempre de adicionar o atributo alt nas suas imagens, ele será usado somente com proposito decorativo, você pode até deixar o atributo vazio, mas ele sempre deverá existir. Quando usar uma imagem como link, preencha a descrição indicando para onde este link levará.
6º – Uma imagem de fundo sem uma cor de background
Uma imagem de fundo sem uma cor de background
É comum o uso de imagens de fundo com texto escrito sobre elas, mas vale a pena lembrar que as imagens de fundo podem ser desabilitadas pelos usuários, e isso faz-se necessário que uma cor com tom similar seja colocada como fundo para que o texto não se torne ilegível.
7º – Usando longos textos chatos para conteúdo
Usando longos textos chatos para conteúdo
Não há nada mais irritante do que chegar em um website e encontrar um texto longo. Divida o seu conteúdo com imagens, cabeçalhos e sessões claras para manter o texto compreensível e que dê gosto de ler.
8º – Sublinhar coisas que não são links
Sublinhar coisas que não são links
Todos sabem que um texto sublinhado ou com uma cor diferente é provável que seja um link. Não confunda as pessoas sublinhando texto em outro lugar. Para dar destaque a certas palavras tente usar as tags <strong>(negrito) ou <em>(enfâse).
9º – Falando para as pessoas clicarem aqui
Falando para as pessoas clicarem aqui
As palavras “clique aqui” cercaram a internet desde o seu início, mas tem sido evitadas em favor de opções mais usáveis. Usar as palavras “clique aqui” obriga ao usuário ler toda a sentença para saber o que acontecerá ao clicar. Em vez disso, é muito melhor que você descreva o que acontecerá na âncora do link.
10º – Usar texto justificado
Usar texto justificado
Esta é outra dica que está indo um pouco mais a fundo em acessibilidade mas não deixa de ser um ponto important a considerar. Texto justificado pode fazer com que se olhe para o texto de forma pura e quadrada, mas isso pode gerar certos problemas com leitura, particularmente para usuários disléxicos que podem encontrar problemas para identificar palavras devido ao espaçamento nos paragrafos.
Este texto foi criado originalmento por Chris Spooner e pode ser encontrado em 10 Usability Crimes You Really Shouldn’t Commit (inglês)
Espero que aproveitem este post.
Paulo Fernandes
Pingback: links for 2010-11-18 « DUODRACO