Felizmente, este é um tema que “virou moda” recentemente, e cada vez mais web designers e usuários estão preocupandos com isso. Prova disso é que, nas últimas semanas, o InfoWester recebeu nada menos que doze mensagens de leitores pedindo providências quanto à acessibilidade do site (provavelmente também assistiram ao mencionado vídeo) para deficientes visuais.

Continue lendo Estudo de Caso – “Melhorando a acessibilidade do InfoWester” no InfoWester…

Related posts:

1. Acessibilidade
2. Pequenas novidades no orkut
3. Criando um menu lateral com CSS
]]> http://erikasarti.net/blog/2007/08/estudo-de-caso-melhorando-a-acessibilidade-do-infowester/feed/ 1 http://erikasarti.net/blog/2007/08/deixando-o-o-portfolio-mais-acessivel/ http://erikasarti.net/blog/2007/08/deixando-o-o-portfolio-mais-acessivel/#comments Fri, 03 Aug 2007 13:17:00 +0000 Erika Sarti http://erikasarti.net/blog/?p=65
4. Os piores erros do web designer
5. Novo trabalho no portfolio: Intuição.com
6. Meta Tags Parte 3 – Mais do que divulgar seu site nos buscadores
]]> Durante a reforma do meu portfolio, a maior mudança foi arrumar seu código HTML para deixá-lo o mais acessível possível para usuários com algum tipo de deficiência ou necessidades especiais. Já que o código HTML já estava dentro dos padrões da W3C, o trabalho estava nos detalhes. Por exemplo, eu havia esquecido de colocar a meta-tag da linguagem, necessária para que programas leitores de tela saibam em que língua devem “ler” o código:

<meta http-equiv="Content-Language" content="pt-br" />

Como o menu é pequeno e em texto, o usuário precisa de poucos toques na tecla tab para chegar até o conteúdo, onde estava o maior problema: os programas que lêem a tela fazem isso da esquerda para a direita, de baixo para cima. Meu portfolio tem essa coluna à esquerda do conteúdo, com links complementares. Porém, não é necessário navegar por ela para ter a compreensão do conteúdo.

Aqui é visível a vantagem de um layout tableless: bastou inverter no código fonte a ordem dos divs: o div principal, com o texto, agora fica antes do div da coluna esquerda no código HTML. Visualmente, o resultado é o mesmo; porém, a navegação com tab acessa primeiro o conteúdo principal. Usando tabelas para obter o mesmo resultado visual essa solução seria impossível e o site precisaria ser refeito.

Outra solução para fazer o usuário acessar o texto principal diretamente, que é apropriada para sites com propagandas e menus com muitos itens no topo da página, seria inserir uma âncora para o conteúdo antes do menu, como acontece no site Acesso Digital ou como foi implementado no InfoWester.

Na navegação sem imagens não tive muitos problemas. A única coisa que faltava era uma descrição dos screenshots de cada site no portfolio. Como cada trabalho tem uma descrição em texto detalhada ao lado, simplesmente coloquei o texto “clique para visitar o site” em cada imagem.

Ainda navegando sem imagens, reparei que tanto no Firefox quanto em dispositivos móveis o link para meu segundo sistema de estatísticas (que fica “escondido” no cabeçalho de cada página) era visível. Resolvi este problema adicionando o código fornecido pelo sistema no final da página, antes do , ao invés de colocá-lo no começo do código.

Na página de contato, coloquei o formulário logo de cara, com a opção de envio de mensagem por e-mail também. Assim, quem quiser me enviar uma mensagem não precisa mais passar por toda a página de FAQ (embora eu tenha colocado as perguntas do FAQ na página de contato, embaixo do formulário, para facilitar o acesso a elas).

No formulário, coloquei a tag <label for> em todos os campos, para que o leitor de tela identifique o conteúdo de cada <input>.

E finalmente, transformei os títulos de todas as páginas em links, assim o leitor de tela irá “parar” neles quando estiver lendo a página.

 

O único problema que eu ainda não resolvi é o captcha nos comentários do blog. Sei qual é a solução mais adequada: colocar uma pergunta que possa ser entendida por um humano, mas não por um robot de envio de spam, como “quanto é dois mais dois”; mas ainda não encontrei um script que faça isso direito.

 

Fiz alguns testes com o JAWS e, aparentemente, está tudo certo. Se você acessa este site através de algum dispositivo diferenciado ou tem alguma necessidade especial, entre em contato e diga o que você achou da reforma.

 

Links úteis:
http://acessodigital.net/
http://www.bengalalegal.com/
http://diadefolga.com/seu-blog-e-acessivel/

Related posts:

1. Os piores erros do web designer
2. Novo trabalho no portfolio: Intuição.com
3. Meta Tags Parte 3 – Mais do que divulgar seu site nos buscadores
]]> http://erikasarti.net/blog/2007/08/deixando-o-o-portfolio-mais-acessivel/feed/ 2 http://erikasarti.net/blog/2007/06/acessibilidade/ http://erikasarti.net/blog/2007/06/acessibilidade/#comments Tue, 19 Jun 2007 14:49:23 +0000 Erika Sarti http://erikasarti.net/blog/?p=57
4. Deixando o portfolio mais acessível
5. Estudo de Caso – Melhorando a acessibilidade do InfoWester
]]> Nas próximas semanas, estarei reformando o portfolio. Mas, fora alguns detalhes que vou aproveitar para arrumar, não será uma reforma visível para a maioria dos visitantes.

Estou seguindo as recomendações do Acesso Digital quando à acessibilidade do portfolio. De cara percebi que, seguindo os padrões da W3C e tendo um layout tableless, não vou ter muito trabalho para adequar meus sites a deficientes visuais e motores.

Também quero melhorar a navegação através de dispositivos móveis, principalmente no que diz respeito à exibição da página sem imagens.

Será um processo lento, com muita calma, prestando atenção a todos os detalhes.

Portanto, se você acessa este blog/portfolio de alguma maneira especial e está tendo dificuldades, essa é a hora de entrar em contato apontando o problema ;)

Related posts:

1. Deixando o portfolio mais acessível
2. Estudo de Caso – Melhorando a acessibilidade do InfoWester
]]> http://erikasarti.net/blog/2007/06/acessibilidade/feed/ 2