Web standards, arquitetura da informação, usabilidade, acessibilidade, tecnologia, filosofia de buteco (sic), e qualquer coisa em uma casca de noz!

Ir direto para o conteúdo

Acessibilidade, Validações e Mecanismos de Busca

Por: Henrique Pereira

Saturday 12 November 2005 às 08:43

Categoria: Acessibilidade, HTML / CSS / JavaScript, Internet / Web

A introdução das técnicas de acessibilidade vai além do que simplesmente tornar sites acessíveis a certos tipos de software utilizados por deficientes visuais, estas técnicas ajudam de forma eficaz a melhorar o hanking do seu site nos mecanismos de busca. Vou explicar melhor.

Diversos desenvolvedores usam técnicas sujas para poderem melhorar seus sites no hanking do PageRank do Google. Você pode notar isso quando você faz uma busca por alguma coisa e vê a quantidade de sites que não falam sobre aquilo que você procurava, na frente daqueles sites que realmente contém a informação relevante. Dessa forma a internet é lotada de lixo sem significado no meio da informação relevante, como eu escrevi aqui anteriormente, dificultando as buscas por informação real e causando indigestão nos mecanismos de busca. Mas existem maneiras honestas e limpas de melhorar e muito a relevância do seu site entre tantos ecos inúteis. A receita é web standards e acessibilidade.

O Google utiliza um algoritmo que interpreta o seu site utilizando alguns critérios muito importantes. Dentre eles, os que mais podem tornar seu site importante são as técnicas de acessibilidade bem aplicadas, somado a um código semântico e racional. Se você observar bem as sugestões do WCAG você vai observar que seu site ficará mais compreensível não só para deficientes visuais e sim para mecanismos de indexação. E isto está além da validação.

O fato de você ter um site validado ou não por mecanismos como o Cynthia Says, não necessariamente indicará que seu site esteja acessível. Primeiro por que mecanismos interpretam código e não conteúdo. Nenhum destes mecanismos vai dizer se seu texto ficou acadêmico ou colegial, ele simplesmente vai interpretar sintaticamente o seu código, ou seja, ele vai verificar se não tem tag escrita errada, tags que não fecham, caracteres estranhos etc, nada além disso. A importância de validar um site só tem real valor na utilização de um código semanticamente correto, coisa que não existe mecanismo nenhum que pode avaliar além do olho humano. Nenhum mecanismo vai saber a diferença entre o endereço de uma loja, uma citação ou um outro texto qualquer se você não der significado a ele. Numa relação mais humana, quem dá o significado ao conteúdo é o desenvolvedor que escolhe colocar um endereço em uma <table> ou em <address> e não as máquinas. Você pode ter um em XHTML e nunca usar <h1> nem <address> e nenhuma <li> e ainda assim validar seu trabalho em XHTML Strict e WCAG AAA no Cynthia Says.

Temos então um outro ponto de vista sobre os validadores e sobre acessibilidade. Elas não te ajudam a dar significado para o conteúdo do seu site, mas te ajudam a verificar se você não cometeu nenhum erro na sintaxe do seu código. É para isso que os validadores na internet servem. As dicas para deixar o seu site relevante é saber dar significado para a informação. Veja algumas dicas.

1 – Coloque imagens relativas a estrutura do layout por CSS:
Evite ao máximo e, se conseguir, totalmente, colocar imagens referente a estrutura do layout no código XHTML. Coloque-as todas por CSS. A razão disso é que estas imagens não tem significado nenhum, são simplesmente usadas para dar uma aparência ao site e não complementam a informação.
2 – Só use imagens no código XHTML se elas ilustrarem a informação caso contrário coloque-as por CSS:
Se você vai publicar na internet a receita de um bolo, nada mais adequado do que ilustrar a matéria com uma foto do próprio bolo, ou seja, neste caso, coloque a imagem no código XHTML devidamente acompanhada do atributo atl, mas se você quer colocar uma imagem de degradê acima do título do seu site, coloque por CSS e nunca no código. Porque? Porque o degradê não possui nenhum significado relativo ao conteúdo do seu site senão pura aparência.
3 – Quando colocar imagens, SEMPRE use conteúdo alternativo, o bom e velho “alt” nas imagens:
Sabe quando você faz uma busca por imagens no Google? É o alt que ele usa para indexar as imagens e é ele que dá significado para imagem. O Google é cego para as imagens, assim como um deficiente visual, mas nem por ser “deficiente” que ele deixa de "ler", assim como alguém lê em braile, o Google vai ler o alt da sua imagem e indexa-la.
4 – Utilize links textuais sempre:
Alguns mecanismos de busca tem os links como o fator mais importante nos algoritmos de indexação. Se você utiliza mapa de imagens ou flash nos menus do seu site sem fornecer conteúdo alternativo para o flash, esqueça a indexação. Utilizar links textuais juntamente com o atributo title, pode dar significado melhor para o Google e para o usuário do seu site.
5 – Verifique se seu site é igualmente acessível em browsers com applets e JavaScript desabilitados:
Não é muito incomum pessoas desabilitarem o JavaScript em seus browsers. Verifique sempre se a navegação e o conteúdo do seu site não serão comprometidos se o browser estiver com estas opções dasabilitadas. Se um usuário não tiver acesso a uma informação que vem exclusivamente de um Java script, tão pouco o Google terá acesso.
6 – Quer ter imagens como títulos? Use técnicas de Image Replacement e deixe conteúdo textual nos headings (<h1>, <h2>, <h3> etc) no seu XHTML:
Nunca coloque uma imagem no código fonte como título de alguma coisa. Se você quer ter um título personalizado por uma imagem, insira essa imagem por CSS deixando o texto que será interpretado pelos mecanismos no seu código fonte. Utilizar headings no código é tão importante quanto ter o DocType correto no seu site.

Essas dicas já são até disciplinas de estudo nas faculdades de comunicação para web no exterior, elas se chamam de Search Engine Optimization (SEO), ou seja, otimização dos mecanismos de busca.

Artigos relacionados:

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!



Existem 11 comentários para “Acessibilidade, Validações e Mecanismos de Busca”

# 1° Bartus Saturday 12 November 2005 às 21:32GMT

Opa!
Duas coisinhas: PageRank e ranking é com “R”. Se foi um trocadilho com as palavras não entendi.

No mais as dicas são muito úteis. Uma boa olhada no HTMLdog também pode ajudar a entender mais o sentido e usabilidade de cada TAG.

E pra quem acha que o uso destas dicas acaba engessando o layout, dá uma olhada nesse layout.

# 2° Flavio Mendes Sunday 13 November 2005 às 01:00GMT

Tenho sempre acompanhado seus posts que têm sido de muito proveito para mim e para os meus alunos. Go ahead!

# 3° Mauricio Saturday 12 November 2005 às 13:01GMT

Ficou muito bom texto! Linguagem bem simples. Incrível como conseguiu falar tudo isso sem utilizar a palavra ‘parser’!! hehe

# 4° Henrique Boaventura Tuesday 22 November 2005 às 20:35GMT

Conteúdo indispensável para qualquer um que queira fazer um site webstandards

# 5° Brunno dos Santos Wednesday 21 December 2005 às 12:51GMT

Ae Henrique, não conhecia seu blog, mas agora que conheço já assinei seus feeds (hehehehe)

Gostei muito do conteudo desse post, as pessoas tem que usar essas “regrinhas” sempre!!

Parabens

# 6° Nelson Wednesday 21 December 2005 às 18:01GMT

Muito bom o texto :D

# 7° Rafael Slonik Wednesday 21 December 2005 às 21:36GMT

Viva la Revolución!

Excelente Texto. Muito importante avisar aos desavisados sobre o lugar das imagens de layout!

# 8° Rodrigo Tuesday 27 June 2006 às 16:22GMT

Olha só que belo exemplo (de não se seguir!!!):

http://www.cynergia.com.br/website.php

Deixe um comentário

Observação: Todos os campos obrigatórios estão marcados com um asterisco (*).

Informações de Contato

Sobre o Revolução Etc

Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Publicidade

  • Banner
  • Banner

Henrique Costa Pereira - Revolução Etc - (CC) Alguns Direitos Reservados - Powered by WordPress

O conteúdo deste site de autoria de Henrique Costa Pereira está sob a licença de Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil. Permissões e/ou restrições além do escopo desta licença podem ser vistas e/ou requeridas na minha página de licença.

Nenhum conteúdo deste site pode ser copiado e reproduzido em outro site sem autorização do autor! Mais detalhes aqui!

Powered by WordPress