Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 10/01/07

Mantendo a semântica com imagens e textos

Muitos iniciantes ainda encontram dificuldades em aliar um bom design, com um código bem feito e semanticamente correto.

Posso dar como maior exemplo, aqueles sites com utilização de fontes bem elaboradas para a logo, título do site, das páginas, dos textos, etc. Porém, como todos sabemos, textos “puros” devem ser escritos com fontes que todos possam visualizar, ou seja, vocę deve planejar seu site com uma fonte em que todos possam visualizar da mesma maneira, senão o layout vai por água abaixo.
Uma boa saída é utilização de imagens ao invés de simples texto, nestes casos em que é estritamente necessária a utilização de fontes diferentes. Digo isso somente em casos extremos, nos quais o visual do site irá se prejudicar bastante, caso não seja utilizada uma fonte padrão.

Porém, muitos não sabem que a semântica e indexação nos sistemas de busca será afetada com utilização de imagens para fins de leitura. Na verdade, imagens não possuem significado de texto, no máximo podemos utilizar o atributo alt para definir uma legenda para tal imagem.

Para poder utilizar uma imagem em títulos e que ela possa ter uma semântica correta, sem afetar a indexação do conteúdo nos sistemas de busca (além da acessibilidade, etc.), podemos seguir o exemplo abaixo, caso a intenção seja utilizar uma imagem para o título de uma página:

Código HTML:

<h2>Título da Página</h2>

No CSS fica assim:

h2 { width: largura desejada; height: altura desejada; background: url(endereço da imagem) no-repeat; text-indent: -9999em; }

Este é um exemplo muito básico, mas basta para mostrar a idéia da prática. O que fizemos nada mais foi que, no código HTML, mantivemos o texto limpo, sem inserção de tags img, deixando-o limpo e acessível, tanto para pessoas como máquinas.
Agora, no CSS, definimos uma largura, altura, uma imagem de fundo e, ao final, adicionamos a propriedade text-indent, fazendo com que o texto desapareça, mantendo, somente, a imagem de fundo.

Desta maneira, seu site possuirá imagens com as fontes desejadas sem perder a semântica, acessibilidade, indexação, etc.

O único contra desta “técnica” seria a dificuldade na atualização destas imagens, pois se trata de um processo manual. Mas há técnicas de image replacement que podem ser pesquisadas, caso a intenção seja esta.

Trackback Feed deste artigo

2 comentários para "Mantendo a semântica com imagens e textos"

  1. Cledison Eduardo Fritzen | 19/01/07 - 10:03 am

    Dica simples, porém eficiente e prática para quem não possui conhecimento avançado sobre semântica.

    Topo
  2. Devemos usar image replacement? · project.47 - Portfolio e blog sobre Web Standards | 22/03/08 - 12:42 am

    […] resolver este problema, utilizando CSS, surgiram as técnicas de image replacement, ou seja, o código HTML permanece intacto, com o texto puro mas, através das folhas de estilo, […]

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons