Erika Sarti :: web designer

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/