Image Replacement acessível
Postado por: Pedro Rogério emMuitas 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Show de Bola o Tuto!!
parabéns..
um abraço
é isso ai cara !! esse tuto esta tuuuddoo de bommm
um abraço e continue assim
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.
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!
[...] 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: [...]
[...] 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). [...]
[...] 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 [...]
Como coloco um link no image replacement?
@Romeu,
Eu atualizei o exemplo adicionando o link, dê uma olhada no código fonte que você verá como fazer.
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.
[...] com fontes alternativas, a melhor 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 css, [...]