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
32 Comentários
Michael Granados 11/01/2005 às 00:00
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
Luiz 11/01/2005 às 00:00
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!
rAuLpErEiRa 11/01/2005 às 00:00
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??
Aldemir Vieira 11/01/2005 às 00:00
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 …
Daniel 11/01/2005 às 00:00
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.
Newton Wagner 11/01/2005 às 00:00
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.
Valentín Moreira 11/01/2005 às 00:00
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.
Newton Wagner 11/01/2005 às 00:00
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.
William 11/01/2005 às 00:00
Com certeza usar image-replacements é a melhor opção.
Jonathas Scott 11/01/2005 às 00:00
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.
Valentín Moreira 11/01/2005 às 00:00
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…
Kaled 11/01/2005 às 00:00
É 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).
Bruno Torres 11/01/2005 às 00:00
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.
Leandro Nascimento Camargo 11/01/2005 às 00:00
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…
Bruno Torres 11/01/2005 às 00:00
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.
DeCo 11/01/2005 às 00:00
Usa os 2
Renato Albano 11/01/2005 às 00:00
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
Anderson 11/01/2005 às 00:00
Alguém indica um tutorial bacana aê?
Marcelo de Miranda 11/01/2005 às 00:00
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;
}
Samuel 11/01/2005 às 00:00
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
Lucas Ferreira 11/01/2005 às 00:00
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
Lucas Ferreira 11/01/2005 às 00:00
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.
Leonardo cabral 11/01/2005 às 00:00
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…
ataqlibert 11/01/2005 às 00:00
Eu aposto nos h*… afinal, você quer um título não é?
Luciano Dinapoli 11/01/2005 às 00:00
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.
Newton Wagner 11/01/2005 às 00:00
E a opinião do site!?
Nhenhenhém 11/01/2005 às 00:00
O Leonardo Cabral matou a pau. O resto, ou melhor, a maioria, só falou BOSTA.
michael 11/01/2005 às 00:00
Todo mundo pode falar o que pensa, por isso é que a gente tá aqui: Pra aprender… mesmo que a gente fale BOSTA!
André Cassal 11/01/2005 às 00:00
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)
Alan 11/01/2005 às 00:00
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)
Danilo Medeiros 11/01/2005 às 00:00
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.
Fabrício Marchezini 11/01/2005 às 00:00
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/