Ir para conteúdo / Skip to content

IMAGE REPLACEMENT ACESSÍVEL

Postado em: 4 de junho de 2006 por Pedro Rogério

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.

Se tiver um tempo, leiam também:

Deixe seu comentário

7 comentários para esse post

  1. Túlio Vargas disse: 04.06.06 ás 19:47
    #1

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

  2. Eduardo disse: 04.06.06 ás 19:51
    #2

    é isso ai cara !! esse tuto esta tuuuddoo de bommm
    um abraço e continue assim

  3. Maujor disse: 04.06.06 ás 23:36
    #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.

  4. Pedro Rogério disse: 05.06.06 ás 11:18
    #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!

  5. Pinceladas da Web » Blog Archive » IMAGE REPLACEMENT - EPISÓDIO 2 disse: 06.06.06 ás 21:03
    #5

    [...] Após o meu primeiro post ensinando a técnica de image replacement, vou postar aqui uma outra técnica, um pouco mais avançada, que faz o uso de <span>, mas também não deixa de ser simples. O que devemos fazer é o seguinte: [...]

  6. Daniele Viana - Blog » Design baseado em Tipografia - Mais elementos de texto disse: 27.06.06 ás 20:52
    #6

    [...] Para trabalhar com fontes alternativas, a melhor solução, na minha opinião é atravez da tecnica “Image Replacement“. Para quem ainda não conhece, trata-se de substituír texto por imagem usando apenas css, assim é possível utilizar qualquer fonte sem a preocupação se ela será exibida corretamente, pois imagens são sempre imagens. Dessa forma ganhamos em compátibilidade! Veja no “Pinceladas da Web” a técnica mais comum para trabalhar com substituíção de textos por imagens, ou então, faça uma comparação entre os principais métodos conhecidos no “Mezzoblue” (em inglês). [...]

  7. Daniele Viana - Blog » Design baseado em Tipografia - Mais elementos de texto disse: 04.03.07 ás 10:50
    #7

    [...] solução, na minha opinião é através da técnica "Image Replacement". Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas [...]

Deixe seu comentário