em
Image Replacement acessível

Image Replacement acessível

Muitas vezes, as pessoas que usam leitores de tela acabam se queixando de que não conseguem literalmente “ler” o que está escrito em uma página por que, em certas imagens, como o logo do site, por exemplo, não foi usada nenhuma técnica de Image Replacement. Mas no que consite essa técnica?

O objetivo dela é o seguinte: manter o texto “visível” ao browser, mas escondido do usuário. O texto está escondido do usuário que está vendo o site, mas ele ainda está lá. Vamos citar um exemplo, eu quero colocar um logo em meu site, mas quero usar a técnica de Image Replacement, então faça o seguinte:

Aqui o CSS:


h1 {
text-indent:-9000px;
background:url(replacement.jpg) no-repeat;
width:500px;
height:214px;
}

O que isso faz é movimentar o texto a 9000 px a esquerda, o texto ainda está lá, porém, você não o está vendo. Em background você coloca a imagem que deseja usar e deve também definir para não repetir. E width e height são as dimensões da imagem usada.

Aqui o HTML:


<h1>Pinceladas da Web - Onde ser simples é ser Inteligente!</h1>

Com isso, todo h1 será substituído por uma imagem. Aqui você pode ver um exemplo dessa técnica, em seu navegador, procure desabilitar o CSS que você verá que o texto aparecerá, ou então dê uma olhada no código fonte.

Comentários

  1. Show de Bola o Tuto!!
    parabéns..
    um abraço

    por Túlio Vargas Responder
    1. Isso é um trabalho que pode ser dispensado. Quer colocar uma imagem no lugar de um texto e ser acessível, use o atributo alt do html. Os leitores de tela leem esse atributo e o googlebot também. Assim o Google vai indexar seu site normalmente. Não use image-replacement.
      Image-replacement é técnica de Black Hat SEO!
      Olhe o que o google diz sobre essa forma de ocultar o texto:

      http://www.google.com/support/webmasters/bin/answer.py?answer=66353

      “Ocultar texto ou links pode fazer parecer que seu site não tem credibilidade, já que apresenta informações distintas para os mecanismos de pesquisa e para os visitantes. O texto (por exemplo, palavras-chave em excesso) pode ser ocultado de diversas formas, incluindo:

      Uso de texto com fonte branca em fundo branco
      Inclusão de texto atrás de imagens
      Uso de CSS para ocultar texto
      Configuração do tamanho da fonte para 0 (zero)

      Se você encontrar textos ou links ocultos no seu site, remova-os ou, se forem relevantes para os usuários, deixe-os bem visíveis. Caso o seu site tenha sido removido dos resultados de pesquisas, leia as nossas Diretrizes para webmasters para obter mais informações. Assim que tiver feito as alterações e tiver certeza de que o site não está mais violando as nossas diretrizes, envie-o para reconsideração.”

      por Bruna — Responder
  2. é isso ai cara !! esse tuto esta tuuuddoo de bommm
    um abraço e continue assim

    por Eduardo Responder
  3. Ola Pedro,
    Esta técnica não é acessível e já foi abandonada.
    A informação se perde para o usuário navegando com css habilitada e
    imagens desabilitadas.
    Experimente desabilitar as imagens na página que você forneceu como exemplo.

    por Maujor Responder
  4. Maujor,

    Eu sei que hoje existem técnicas mais avançadas de Image Replacement, mas com essa aí eu quis mostrar pra quem está iniciando agora como foi o início de tudo. Mas muito obrigado pelo toque!

    por Pedro Rogério Responder
  5. Pingback: Pinceladas da Web » Blog Archive » IMAGE REPLACEMENT - EPISÓDIO 2

  6. Pingback: Daniele Viana - Blog » Design baseado em Tipografia - Mais elementos de texto

  7. Pingback: Daniele Viana - Blog » Design baseado em Tipografia - Mais elementos de texto

  8. Como coloco um link no image replacement?

    por Romeu Responder
  9. @Romeu,

    Eu atualizei o exemplo adicionando o link, dê uma olhada no código fonte que você verá como fazer.

    por Pedro Rogério Responder
  10. Olá,

    Nessa técnica também é possível o uso da propiedade overflow com valor hidden. Para que o texto não apareça quando for aumentado o zoom nos navegadores mais antigos.

    por Ricardo Pedrosa Responder
  11. Pingback: Clica Aqui » Design baseado em Tipografia – Mais elementos de texto

  12. Pingback: Links | Danielevsilva | Webdesigner | Portfolio | Combinação de cores

  13. Pingback: Como usar qualquer tipo de fonte no website com fontface | NerdHead

  14. Hi-Ya! I loves your marvelous site thanks and please keep it up

    por Joella Flesch Responder
  15. Leather Laptop Messenger Bag…

    por Aileen Wublin Responder
  16. Pingback: Qualquer fonte no seu site com @fontface | SWX Softwares - Desenvolvimento e Design Web

  17. Isso no final das contas não serve para nada!

    O atributo HTML “ALT” já faz isso muito melhor!

    por Luis Alves Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>