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).
Carlos via Rec6 | 22/03/08 - 1:02 am
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….
Gustavo Krause | 26/03/08 - 9:30 pm
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.
Gustavo Krause | 26/03/08 - 9:33 pm
h1 {
text-indent:-9999px;
margin-left:9999px
}
rsrsrsrs…
Carlos Eduardo de Souza | 27/03/08 - 1:42 am
Há um artigo sobre isto neste link. Ele também trata sobre o uso da tag H1 para título do site, enquanto o mais recomendado é a tag H2 para esta finalidade, enquanto H1 fica reservado para o título da página em si, tornando-o mais amigável com os sistemas de busca.
Em termos de CSS, como não se trata de conteúdo, acho que podemos falar em semântica em termos de nomeação de classes e ID’s, mas o uso da identação negativa, na minha opinião, não prejudica em nada.
Gustavo Krause | 27/03/08 - 11:12 am
Esse eu não gostei, prefiro usar valor negativo do que colocar um span sem nada no código.
Aqui está a solução:
Inserting and replacing content with the ‘content’ property - CSS3
Outras formas:
http://www.mezzoblue.com/tests/revised-image-replacement/
Eu estava olhando o conteúdo sobre “text-indent” no site do W3C, e ele fala que não tem problema nenhum em usar valor negativo. Apenas cita que temos que ter cuidado quando usar.
http://www.w3.org/TR/REC-CSS2/text.html
http://www.w3.org/TR/CSS21/text.html
Por isso, também estou de aconcordo que podemos usar sem problema algum.
Carlos Eduardo de Souza | 27/03/08 - 12:53 pm
O problema é esperar todos usarem navegadores que estejam de acordo com essa nova versão do CSS