Projetar sites com AJAX para acessibilidade

Muitos proprietários de site descobriram as vantagens de usar o AJAX para melhorar a experiência do usuário, criando páginas dinâmicas que agem como poderosos aplicativos da Web. Assim como o Flash, o AJAX pode dificultar a indexação de um site para mecanismos de pesquisa se a tecnologia não for implementada com cuidado. Há dois problemas principais com mecanismos de pesquisa que envolvem o AJAX: verificar se os bots do mecanismo de pesquisa podem ver seu conteúdo e se podem ver e seguir sua navegação.

Embora o Googlebot entenda muito bem a estrutura de links HTML, ele talvez tenha dificuldade para encontrar sites que usam JavaScript para navegação. Estamos trabalhando para entender cada vez mais o JavaScript, mas sua melhor opção para criar um site que possa ser rastreado pelo Google e por outros mecanismos de pesquisa é fornecer links HTML para seu conteúdo.

Projetar para acessibilidade

É recomendado que os proprietários de site criem páginas para os usuários, não apenas para os mecanismos de pesquisa. Quando estiver projetando seu site AJAX, pense nas necessidades dos usuários, inclusive daqueles que talvez não usem um navegador compatível com JavaScript (por exemplo, pessoas que usam leitores de tela ou dispositivos móveis). Uma das maneiras mais fáceis de testar a acessibilidade de seu site é visualizá-lo no navegador com o JavaScript desativado ou visualizá-lo em um navegador apenas de texto, como o Lynx. Visualizar o site como somente texto também pode ajudar a identificar outros conteúdos que talvez não sejam vistos com facilidade pelo Googlebot, como texto incorporado em imagens ou Flash.

Evitar iFrames ou adicionar link com seu conteúdo separadamente

O conteúdo exibido por iframes pode não estar indexado nem disponível nos resultados da pesquisa do Google. É recomendável evitar o uso de iFrames para exibir conteúdo. Se você incluir iframes, forneça links adicionais baseados em texto para o conteúdo exibido. Assim o Googlebot poderá rastrear e indexar esse material.

Desenvolver com melhoria progressiva

Se você está começando do zero, uma boa estratégia é criar a estrutura e a navegação do site usando apenas HTML. Em seguida, depois de ter colocado as páginas, os links e o conteúdo do site no lugar, é possível arrumar a aparência e estabelecer uma interface com o AJAX. O Googlebot ficará satisfeito com o HTML e os usuários com navegadores modernos poderão aproveitar seus recursos com AJAX.

Obviamente, é provável que haja links que requerem JavaScript para a funcionalidade AJAX. O desenvolvedor da Web Jeremy Keith chamou essa técnica de Hijax, e é uma maneira de ajudar a coexistência do AJAX e de links estáticos.

Ao criar seus links, formate-os de modo que ofereçam um link estático e chamem uma função JavaScript. Desse modo, você terá o recurso AJAX para usuários de JavaScript, enquanto os usuários que não usam JavaScript poderão ignorar o script e seguir o link. Exemplo:

<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32');
 return false">foo 32</a>

O URL do link estático tem um parâmetro (?foo=32) em vez de um fragmento (#foo=32), que é usado pelo código AJAX. Isso é importante, já que os mecanismos de pesquisa entendem parâmetros de URL, mas normalmente ignoram fragmentos. Como agora você pode oferecer links estáticos, os usuários e mecanismos de pesquisa podem vincular o conteúdo exato que desejam compartilhar ou ao qual querem fazer referência.

Embora estejamos melhorando constantemente nossos recursos de rastreamento, o uso de links HTML ainda pode nos ajudar muito (bem como outros mecanismos de pesquisa, dispositivos móveis e usuários) a entender a estrutura de seu site.

Seguir as diretrizes

Além das dicas descritas aqui, é recomendado consultar também as diretrizes para webmasters para receber mais informações sobre como criar um site bom para o Google e para os usuários. As diretrizes também destacam algumas práticas a serem evitadas, incluindo redirecionamentos não autorizados de JavaScript. Como regra geral, os usuários podem ter experiências diferentes com base nos próprios recursos, mas o conteúdo deve permanecer o mesmo. Por exemplo, imagine que tenhamos criado uma página para a Fazenda de hamsters do José. A parte superior da página tem o cabeçalho "Fazenda de hamsters do José" e, abaixo dele, há uma apresentação de slides compatível com AJAX sobre a chegada dos últimos hamsters. A desativação do JavaScript na mesma página não deve impedir que o usuário leia o seguinte texto adicional:

Criação de hamsters do José -- hamsters, melhores hamsters, hamsters baratos, hamsters de graça, pets, criações, criadores de hamsters, hamsters que dançam, roedores, hampsters, hamsers, melhor vendedor de hamsters, brinquedos para pet, aulas de dança, bonitinhos, travessuras dos hamsters, ração para pets, habitat dos hamsters, hotéis para hamsters, ideias para presente de aniversário de hamster e muito mais.

Uma implementação melhor exibiria o mesmo texto independentemente da ativação do JavaScript e, no cenário ideal, ofereceria uma versão HTML da apresentação de slides para os usuários que não usam JavaScript. Mais informações sobre texto oculto.