por Diego Eis
Janeiro 11th, 2005
Estava conversando com o Bruno Torres hoje, e estávamos discutindo sobre fazer títulos com image-replacement ou imagens.
Então, temos duas opções:
- Usar image-replacements (esconder texto pelo css e colocar a imagem desejada como background do objeto)
- Usar imagem “de verdade” com alt´s (texto informativo colocados nas imagens)
Qual a sua opinião?
O post iria ficar bem grande… então, fiz em forma de artigo.
Títulos: Image-Replacement x Imagens
Pode ser interessante ler:
Este post foi criado
na Terça-feira, Janeiro 11th, 2005 às 00:00 e está arquivado em Artigos, Geral, Tecnologia e Tendências.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Essa é simples… Se você quer colocar Títulos, obviamente você prescisará das tag’s "h1/h2/h3/h4/h5/h6" pra poder ser alvo dos próprios buscadores. Depois você esconde pelo CSS e coloca uma imagem de fundo. Afinal, pra que você quer um titulo com descrição (alt)?
Pagina boa é Página plana. Além do que ajuda na semântica do código. Divamos, é mais "bonito" de se ver…
<h1>Título</h1>
do que..
<img src="minhaimagem.gif" alt="Titulo" />
Conclusão. images-replaceementes é mais semântico
Concordo com o Michael, só tenho uma dúvida de acessibilidade em relação a images-replacements, se o usuário estiver utilizando um navegador textual, ou leitor de tela, ou tiver desabilitado imagens? Como será a experiência dele nesses casos? Confesso que uso o recurso de image-replacements mas nunca fiz o teste simulando essas situações!
Concordo com Michael tb sobre a semântica, porém tenho a mesma dúvida de acessibilidade que o Luiz possui. Como tratar a semântica e a acessibilidade sem afetar o conceito de um deles??
Qual o objetivo mesmo? A semântica tem a ver com o que se quer fazer/mostrar. Se é fazer títulos, então as tags H[1-6], elas foram feitas para isso, se for mostrar uma imagem, use a tag apropriada. Simples, não?
O que importa é ter semântica na mente. E pelo que parece, vc quer fazer título, então …
Escreve o Título e põe a imagem como background dele e joga o texto pra longe…
é mais certo pq se alguém ver sem css e sem imagens vai conseguir ler com os tamanhos mais adequados e a acessibilidade fica melhor. E se a visita for normal com CSS e imagens vai continuar perfeito.
Pois é pessoal, acho que o melhor é usar h1 e fazer o replace mesmo. Em navegadores que não aceitam imagens, talvez seja melhor desabilitar também as CSS, fazendo que que o h1 volte ao normal.
Acho que é melhor diferenciar entre luxos e necesidades. Necesidade é facer solo texto. Luxos é apresentar o mesmo como imagem.
Asim. XHTML e CSS apresentam nossa versao só texto do nosso título. Ahí entramos no "luxo": eu prefiro controlar o replacement com DOM:
- O pessoal recebe o mesmo efeito.
- O robot ve um <h1>titulo</h1> estándar.
- Eu posso controlar se mostrar ou nao mostrar. Ejemplo: se o cara está utilizando um tradutor on-line, eu nao mostro a imagem e deixo aparecer o texto.
Alem que com CSS é difícil controlar a informaçao caso no cara tenha desativadas as imagems (acontece as veces) e se é um background nao se pode olhar texto alternativo.
Prefiro facer isso com DOM, é mais seguro para tudos (robots e visitantes).
Disculpem os erros na escrita.
Valentín, acho que usando a substituição de textos por imagens através do CSS, vc não vai ter problemas com os robots. Eles não pegam o que é exibido no site, e sim o que está escrito no código.
Então se vc tem um texto que, com CSS, substitui por uma imagem, o robot ainda será capaz de encontrar este texto qdo percorrer o site. 
Com certeza usar image-replacements é a melhor opção.
Bem, está mais do que dito por todos.. porém sempre há a dúvida quanto ao replacements.. outro dia eu lí no listapart, algo sobre isso, mas como estava no trqabalho ficou dificil terminar a leitura, e pelo que parece, nem todos os replacements são bons semânticamente…
é isso. replacement.
Obrigado Newton pela resposta, mais tenho muito serias sospeitas de que o google nao está indexando algunos textos do site por estar com css visibility:hidden ou display:none.
Sei lá, só sao sospeitas mesmo, e também penso que se eu fosse o google faría isso. Total: ele nao sabe se o Javascript faz visible ele, e mesmo nao entende javascript…
É totalmente válido por uma questão de acessibilidade … A página tem que estar acessível não só em imagens, mas também em palavras, para quem assim o queira.
A imagem está represetando algo que vale palavras … Então, uma página acessível tanto em Author mode, quanto em User mode é totalmente necessário.
O título pode ser tranquilimante um image-replacement e imagens(alt).
Se todos os browsers fossem como o firefox (sonhando…), seria mais vantagem utilizar <img>s com atributos alt.
O firefox, na falta da imagem — ou no caso de o usuário desabilitar as imagens — exibe o conteúdo do atributo alt com o estilo do elemento que contém a imagem (no caso um <hn> aplicado.
O opera também aplica o estilo, mas envolve o texto em uma caixa, o que não é bom esteticamente. O IE é o pior de todos, como sempre. Alem de exibir uma caixa em volta do texto, diminui seu tamanho e exibe um ridículo ícone com um ‘x’ vermelho, indicando a falta da imagem.
Portanto acredito ser realmente melhor usar image-replacement.
Eu usaria o image-replacemente simsplesmente porque é mais semantico, pois suaria algum Hx com fundo..fora que se fosse visualizado em alguma mídia que não renederizasse imagens …poderíamos fazer com que o texto aparecesse no lugar…não perdendo a conteúdo do tópico/título…
O problema é exatamente esse. Usando image replacement (seja FIR ou usando text-indent:-9999px) não há como fazer — pelo menos não usando apenas css — com que o texto apareça caso a imagem não possa ser exibida.
Na minha opinião, usar image replacement é mais semântico, mas o que questionei com o Diego e gerou essa discussão, é se essa é a melhor solução quando se pensa em acessibilidade.
Se formos levar em conta para efeito de acessibilidade apenas os browsers texto, screen readers e mobiles, o image replacement não machuca, já que o texto vai ser exibido no lugar da imagem. Agora se levarmos em conta os browsers gráficos que, por algum motivo, não possam exibir a imagem, aí a questão fica um pouco mais complicada.
A decisão fica por conta do desenvolvedor mas, sem dúvida, é uma boa discussão.
Usa os 2 
Hoje em dia a melhor solução é image-replacement pois os browser não estão preparados para o padrão de que o alt é um texto alternativo e deve ser mostrado na falta da imagem e ser formatado como um texto normal inclusive aceitar seleção, link, hover e etc.
Colocar somente a imagem com o texto alt seria mais semântico na minha opnião, porém não sei se esse padrão alternative text é a melhor solução.
Lembro há alguns meses atras na lista arqhp, comentaram sobre a tag object do xhtml 2 que caso o object não fosse carregado mostraria o outro nivel da tag.
Só especulando mesmo talvez algo como:
<img src="image.png" title="image">texto alternativo</img>
Caso a image.png não fosse carregada mostraria texto alternativo.
Não sei até que ponto isso é bom ou ruim, só expeculando mesmo.
Abraços
Alguém indica um tutorial bacana aê?
seria semanticamente correto usar o <hn></hn> e no css
hn{
background-image:url(../img/titulo_bg.gif);
background-position:center center;
background-attachment:fixed;
background-repeat:no-repeat;
}
Não concordo com vocês.
1) Imagem-título não é BG para ser colocado como tal no CSS
2) <h1><img alt=’bla’ /></h1> é igual a <h1>bla</h1> para os robots
3) É importante para o USUÁRIO ter o ALT funcionando
Uma solução para fazer com que o texto apareça, caso a imagem não esteja acessível, usando replacement é o seguinte.
<h3 id="titulo" title="Titulo Qualquer">
<span></span>Titulo qualquer aaaaaaaaaaaaaaaaaaaaaa
</h3>
/* Estilo… */
#titulo {
width: 200px;
height: 15px;
position: relative;
overflow: hidden;
}
#header span {
background: url(IMAGEM-TITULO.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
Reparem que o texto fica debaixo do span. Caso a imagem de fundo do span não possa ser exibida o texto aparece. Reparem também que não há atributo alt, mas o atributo title faz algo parecido, que é exibir a caixa de diálogo quando o mouse está em cima. Outro ponto a ser considerado é que não há prejuizo quanto a posição dos elementos do layout caso o texto do cabeçalho escondido seja maior que a imagem pois usamos o overflow hidden.
Não sou expert em acessibilidade, confeso, mas isso nos browsers comuns não tem maiores problemas (mozzila, IE, etc etc…). Agora quanto à mobile e outros não sei o comportamento.
Digam os prós e contras…
Abraços, Lucasf
Correção do código acima:
<h3 id="titulo" title="Titulo Qualquer">
<span></span>Titulo qualquer aaaaaaaaaaaaaaaaaaaaaa
</h3>
/* Estilo… */
#titulo {
width: 200px;
height: 15px;
position: relative;
overflow: hidden;
}
#titulo span {
background: url(IMAGEM-TITULO.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
e… confesso, com dois "s", por favor hehehe.
Abraços.
O image-replacement é uma opção errônea difundida pela falta de homogeneidade entre a leitura semantica dos navegadores. Ok, é válido. Mas um erro não justifica outro. Pode-se usar uma tag span para definir um título, exibir uma imagem e ocultar um texto, mas semanticamente (e legitimamente) isso não é um título. Hacks para IE também não são corretos porém fazem-se necessários. É uma utopia saudável imaginar que é possível seguir à risca os padrões sem se deparar com possibilidades criativas "foras da lei". Quem sabe no futuro elas não sejam absorvidas durante a evolução. Por mim, use quem quiser, ninguém será apedrejado por isso, eu acho…
Eu aposto nos h*… afinal, você quer um título não é?
Eu estou apostando em uma nova solução: Flash-replacement. Possui duas desvantagens: necessita de Flash e usa javascript. Mas possui muitas vantagens: Se o usuário não tiver javascript ou flash habilitados, ele verá o título sem formatação; o código html fica 100% semântico, pois o flash não é mencionado nele; e pode-se continuar utilizando Hn normalmente. Ou seja: na hora de alterar o texto de um título, basta alterar o html usando um notepad, não preciso recorrer ao editor de imagens, procurar a mesma fonte que foi utilizada, criar uma nova imagem e substituí-la no meu servidor. Particularmente eu prefiro utilizar Flash replacement ao invés do image replacement.
E a opinião do site!?
O Leonardo Cabral matou a pau. O resto, ou melhor, a maioria, só falou BOSTA.
Todo mundo pode falar o que pensa, por isso é que a gente tá aqui: Pra aprender… mesmo que a gente fale BOSTA!
O q poderia ser feito pra resolver a pelea é exatametente como o colega disse, usar os 2, mas…
colocando somente multi classes
<h1 class="title noticias">titulo</h1>
*.title {
background-repeat:no-repeat;
text-indent:-9999px;
}
H1.noticias{
background-image:url(imagem.gif);
}
, e seus demais apetrechos, o detalhe aqui é q deveriamos testar por javascript se as imgs estão desabilitadas (já q não há uma propriedade pra isso, igual a cookieEnabled)e então colocar uma classe no BODY desabilitando todos os titulos em background, tipo assim:
BODY.noImageTitles *.title
{
text-indent:0;
background-image:none;
}
Hoje em dia, com a possibilidade de escrevermos img’s dinâmicas no server com qualquer fonte instalada e apenas devolver ao cliente, devemos pensar não só em semântica mas tb em dinamismo.
Penso que deixar para o CSS a escolha de como o Parser deve agir é uma forma errada, pensemos no código semântico, mas tb pensemos em ter as camadas de funcionalidades bem definidas e (infelizmente) ainda não conseguimos criar regras condicionais no CSS (não no IE pelo menos)
Não sei exatamente se isso interfere na semântica da coisa, mas quanto ao "problema" de ter que trocar aquela fonte daquela "imagem título" do site com o código <img>, podería-mos usar um titulo.js com document.write(…) por exemplo e chamá-lo no código. Se precisasse trocar a imagem por texto futuramente, bastaria modificar o js.
(particularmente, isso aí quebra um galhão como template)
oi pessoal, passei por esse problema ha pouco tempo e acho que a melhor solucao veio la do pessoal da ALA - substituir os textos dinamicamente por javascript. Deem uma olhada no artigo:
http://www.alistapart.com/articles/dynatext/
A solucao e otima pq permite a substituicao de textos sem que isso detone o html. E as imagens sao geradas no proprio servidor, o que ainda facilita na administracao de sites dinamicos. A solução apresentada, no entanto, precisa de PHP com algumas bibliotecas graficas.
Aparentemente a técnica de substituição de textos tem alguns problemas com leitores de tela, o que prejudica a acessibilidade. Foi publicado um estudo mais aprofundado no A List Apart:
http://www.alistapart.com/articles/fir/