Busca

Boas práticas de Desenvolvimento com Padrões Web


Lições sobre semântica #3

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 [...]

11/01/2005 por Diego Eis
32 Comentários

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:

  1. Usar image-replacements (esconder texto pelo css e colocar a imagem desejada como background do objeto)
  2. 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
Leia também:


    Sua opinião:

    Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



    RSS dos comentários deste post
    URL para Trackback

    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&#237;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&#237;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 :D

    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:
    &lt;img src="image.png" title="image"&gt;texto alternativo&lt;/img&gt;
    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!? :D

    Nhenhenh&#233;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&#233; 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&#237;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/