Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Image replacement no logotipo, por que não?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Nem tudo é o que parece e atividade Image replacement no logotipo

por Junior Rodrigues
| 85.9k xp | 21 posts
Front-end Developer

A técnica image replacement não consiste em escrever o texto no HTML e via CSS esconder o texto inserindo uma img de background?

Levando em consideração que os mecanismos de busca, bem como pessoas com deficiência visual leem o HTML e não o CSS, nesta técnica o texto será lido ao invés da imagem de logo.

<h1 class="logo-minha-empresa">
    <a href="#" title="Logo Minha Empresa">Minha Empresa</a>
</h1>

Sei que inserindo uma imagem utilizaríamos o atributo alt, mas se compararmos nosso site com um livro o título da nossa capa não deveria ser um h1 no caso do layout da empresa não ter um título interno que direcione ao produto ou serviço em questão?

A resposta à pergunta:

Esse logotipo deve ou não ser inserido usando a técnica image replacement?

Não deveria ser: Deve, pois o conteúdo é importante para as ferramentas de busca

3 respostas
solução!
por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Oi Junior, tudo bem?

Falando de SEO, seria bacana deixar o logo no HTML para que apareça no Google Imagens. O atributo ALT já serve como texto para essa imagem.

Falando de acessibilidade, existem opinioes diferentes sobre por o logo no H1, uma vez que um usuario cego usa os atalhos dos screen-readers para "escanear" a página rapidamente, e um desses atalhos é a tecla H para ir pulando entre os titulos. Pensando nesse cenario, faria mais sentido o único H1 da página ser o resumo do site, e no logo normalmente fazemos ele de link para ir para a home.

Outra coisa tambem: alguns leitores de tela como o NVDA leem o TITLE da pagina quando a mesma termina de carregar. Entao com o H1 no logo ele falaria algo como "Pagina Alura cursos online, titulo nivel 1 Alura cursos online", fica repetido.

O resumo entao é que não tem bem a forma perfeita e bullet proof desse combo de H1+logo+img.

Espero ter ajudado e bons estudos,

Abcs!

por Junior Rodrigues
| 85.9k xp | 21 posts
Front-end Developer

Fiquei confuso porque se trata de alterativa certa ou errada. Ou seja, a forma colocada no sistema demonstra que aquele jeito é o certo.

Mas olhando o site da Alura, Caelum e Mestre SEO notei um ponto de vista que não havia pensado anteriormente, que é o título principal da página ser um título explicativo do conteúdo, ou seja, aquilo que o usuário estaria realmente buscando, logo o título seria apenas um link como é utilizado atualmente.

O ponto que comentou dos programas como NVDA e Jaws lerem repetidamente achei bem interessante, vou repensar o conceito.

por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Na atividade afirma isso, mas é realmente relativo.

Dei uma leve atualizada ali para que os alunos entendam que do ponto de vista de SEO por exemplo, se torna interessante deixar a imagem lá.

Baixa o NVDA pra brincar um pouco, é bem interessante. Quando instalar, coloca o "exibidor de fala" nas Ferramentas dele para nao precisar ouvi-lo.

Abcs!