Nos últimos tempos, com a iminente web 2.0, fala-se muito em acessibilidade: motores de busca, deficientes, equipamentos precários ou dispositivos móveis, e uma infinidade de outras coisas.

Por incrível que possa parecer, a grande parte dos desenvolvedores torna suas aplicações utilizando Ajax completamente (ou quase completamente) inacessíveis, principalmente para os motores de busca.

Como os motores de busca não lêem JavaScript, como eles encontrarão o conteúdo de seu site, se ele for feito completamente em Ajax? E os seus usuários, como irão “favoritar” algum artigo que gostaram, se não há links?

Como já disseram, e eu repito, use ajax com moderação. Mas se você ainda deseja utiliza-lo ao extremo, seja por modismo, necessidade ou mesmo para se mostrar para os amigos, vamos tornar isso tudo acessível.

Antes de Tudo…

Como o Micox já disse em seu artigo, você deve planejar todo seu site como se Ajax não existisse. E eu estendo um pouco: planeje seu site como se nem o JavaScript existisse. Mais acessibilidade ainda? Planeje seu site como se CSS não existisse. Não, não estou louco. É possível, bem difícil, mas é possível. Essa é a grande sacada do desenvolvimento em camadas: primeiro o conteúdo, depois a apresentação e por último o comportamento.

Tá certo que hoje em dia são poucos os navegadores que não suportam CSS, mas nunca se sabe. Já o JavaScript é bem complicado mesmo.

Links

Primeiro de tudo: Ajax não veio para reinventar o link. O link é a alma da web. Mas podemos incrementa-lo, lógico. Utilizando o conceito de que você deve pensar em sua página como se JavaScript não existisse, o href não pode ser deixado de lado. Trocar o href de uma página por “javascript:” é suicídio. E pior ainda: trocar por “#alguma-coisa”. Se o usuário não tiver o JavaScript ativo, adeus pra seu site.

Então, como fazemos? Deixe o href como o link verdadeiro para suas páginas, sem ajax, sem javascript. E aí, no onclick, use:

ajax.request(...); return false;

Com o tempo a gente acaba descobrindo coisas interessantes: onclick não é a melhor maneira para capturar links. Leia: Hijax: Ajax Acessível

Isso fará com que, depois de clicado, o link apenas ative o JavaScript desejado, retornando false, para que não aconteça mais nada.

E quanto ao nosso querido hash? Sim, há lugar para ele também. Depois de toda a ação do JavaScript, antes de terminar sua função, inclua: top.location.hash = .... Simples, rápido e indolor.

Costume dos Usuários

Convenhamos: a tecnologia chega, mas nem todos estão preparados para ela. A maioria dos usuários está acostumado a esperar o “loading” do browser, e não dentro da página. Isso é um problema. Se você esquecer do seu “Carregando…”, o usuário pensará que a página travou, parou de funcionar, deu tilt, já era, babaus, enfim. Uma imagem que se mexe ajuda a dar a impressão que algo vai acontecer.

Outro costume dos usuários é o famoso botão voltar. Já postei aqui no blog uma solução para histórico. Não esqueça dela, torne-a melhor, se for o caso.

Várias requisições ao mesmo tempo

Nem todos sabem, mas os que já sabem se irritam bastate. Quando se clica em um link e, instantaneamente, se muda de idéia e clica em outro, a página vai para o último link clicado. Em ajax isso costuma não acontecer. Só a primeira requisição é carregada (nem sempre, claro). Já tive essa desagradável experiência. Coloque uma “fila de espera” para as requisições, para ocorrerem em ordem, ou para requisitar apenas o último clique. Cada uma das soluções se aplica a um caso em particular, não é uma receita específica para todos os tipos de bolo.

Bem, existem vários outros problemas relacionados a acessibilidade, mas já solucionamos os mais “críticos” (outras idéias podem ser encontradas aqui). Vai do bom senso de cada um tornar seu site compatível e acessível. Contribua para o verdadeiro espírito da Web 2.0!