Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Text-replacement ou alt?

Olá,

Na aula 9 o instrutor fala sobre a técnica de image-replacement, onde ele usa o text-ident: -9999px;.

Eu achei um pouco estranho, parecendo uma gambiarra monstruosa. Porém o título da aula ("Nem tudo é o que parece") me fez dar uma pesquisada.

Achei um artigo do Google que me causou um pouco de medo. Um dos itens que ele considera "violação", é justamente usar o CSS para colocar o texto fora da tela. E também fala que um modo de inserir acessibilidade no site é justamente usar o atributo ALT.

Além disso, olhei o site da Alura. Tanto no seu logo, quanto aos logos dos outros sites do Grupo Caelum utilizam a tag com o atributo ALT normalmente. Mesmo os ícones dos cursos que tem menor importância para as Search Engines estão colocadas com a tag <img>.

A questão que fica é: O que usar? Pois se temos uma tag html que justamente faz o que queremos (colocar img e por um texto para a acessibilidade), por que não usar ela?

3 respostas
solução!

Olá, Douglas!

Há muito tempo, text-replacement era uma técnica bem usada principalmente para SEO, mas hoje em dia é visto sim como má prática. O texto que explica o que a imagem representa deve estar sempre em seu atributo alt.

Inclusive, caso você tenha imagens sem este atributo, seu documento html não passará pelo validador.

Espero ter ajudado. Abraços.

Boa tarde, Douglas! Tudo bem, cara? =)

Excelente pergunta!!

A ideia é pensar no que a imagem representa no seu site, ou seja, ela é algo que precisa de importância e ou é apenas uma imagem secundária, para dar um estilo à pagina?

Se for uma imagem de estilo, apenas, ela deve ser usada no CSS, afinal, é a linguagem própria para isso. Se estamos falando de uma imagem que serve de conteúdo para o entendimento do site, ela deve ficar no HTML, com a tag <img>. =)

E a propósito, image-replacement é sim uma gambiarra, mas até onde eu saiba, não temos uma forma melhor de se fazer isso...

Sacou, agora? =)

Fábio

Olá pessoal!

Também achando essa técnica com cara de gambiarra, fui pesquisar um pouco mais.

Encontrei essa página que tem algumas outras alternativas de implementar o image-replacement.

Essa que foi mostrada no video é a The Phark Method, mas existem muitas outras. Vi que a técnica apresentada no video pode trazer alguns problemas de performance.

www.maujor.com/tutorial/image-replacement.php

Qual técnica vocês preferem?

Abraço!