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 22/03/08

Devemos usar image replacement?

Nós, designers voltados para a Web, sabemos muito bem que este tipo de mídia oferece várias limitaçőes (como qualquer outra) e, entre elas, está utilização de fontes diferentes do padrão adotado pelos sistemas operacionais. Ou seja, se eu desejar utilizar uma fonte Helvetica, os usuários de Mac poderão abrí-la tranqüilamente, enquanto os usuários de Windows só poderão visualizá-la caso consigam instalá-la em seus computadores.

Todo mundo que tem bom senso sabe que devemos nos preocupar em manter o layout de nosso site o mais padronizado possível, independente da plataforma e sistema utilizado para acessá-lo.

Por isso, surgiram técnicas para “driblar” essa dificuldade, utilizando imagens ao invés de texto puro. Só que esta prática acabava dificultando a indexação do conteúdo, caso o desenvolvedor do site não utilizasse o atributo “alt” nas imagens, pois os sistemas de busca não conseguiam interpretar o conteúdo utilizado na imagem.

Para 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, trocamos o texto por uma imagem. Essa prática é muito utilizada pelos desenvolvedores, pois serve como uma verdadeira mão-na-roda no momento que o designer escolhe uma fonte fora do padrão dos sistemas.

Porém, surgiu uma notícia de que o Google poderia penalizar quem utilizasse esse tipo de técnica pois o desenvolvedor do site não estaria mostrando exatamente o que está no código HTML, fazendo com que este texto não aparecesse na tela para exibir uma fonte diferente em seu lugar.

E o que vocęs acham? Uma imagem com o atributo “alt” substitui a relevância de um título (h1, h2, h3…) no código?

Acredito que há lugares onde devemos utilizar o image replacement e até mesmo o sIFR, quando necessário, assim não perdemos a hierarquia no código e relevância do conteúdo.

Como sempre, cabe a nós pensar sempre no usuário. Há várias maneiras para se fazer a técnica do image replacement, algumas que dificultam ou não a acessibilidade do site. Por isso, indico escolher o método mais acessível, assunto discutido neste artigo (em inglęs).

Trackback Feed deste artigo

4 comentários para "Devemos usar image replacement?"

  1. Carlos via Rec6 | 22/03/08 - 1:02 am

    Devemos usar image replacement?…

    Nós, designers voltados para a Web, sabemos muito bem que este tipo de mídia oferece várias limitaçőes (como qualquer outra) e, entre elas, está utilização de fontes diferentes do padrão adotado pelos sistemas operacionais….

    Topo
  2. Gustavo Krause | 26/03/08 - 9:30 pm

    O (X)HTML fica limpo e mais semântico. Mas agora se pensar em CSS… text-indent: -9999em, não é nada semântico. Eu considero como um “hack”. Mas dependendo da situação é legal e seu uso é uma solução. As vezes nada melhor do que um simples “_padding”, para resolver tudo.

    Pensando em dispositivo que não renderiza CSS, com alguns móveis, o uso de image replacement é muito interessante.

    Se tivesse disponível algo como:

    h1 { content:hidden; }

    seria algo maravilhoso.

    Mas o fato é que não existe, e com certeza teve(W3C) ter seus motivos, ou não.

    Outro fato que também todos já sabem é que esses navegadores são todos umas “%*#&@8~”. Por isso eu não tenho nada contra e também nada a favor.

    Mas é isso.

    Topo
  3. Gustavo Krause | 26/03/08 - 9:33 pm

    O que vocęs acham disso?

    h1 {
    text-indent:-9999px;
    margin-left:9999px
    }

    rsrsrsrs…

    Topo
  4. Carlos Eduardo de Souza | 27/03/08 - 12:53 pm

    Essa solução, através da propriedade “content” do CSS3 é muito interessante mesmo…

    O problema é esperar todos usarem navegadores que estejam de acordo com essa nova versão do CSS :(

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

Links Randômicos
Meta
Apoio
Créditos
Creative Commons