Eu fiquei na dúvida de como tratar esta questão do html apontada pelo lighthouse
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu fiquei na dúvida de como tratar esta questão do html apontada pelo lighthouse
Olá, Esperidião, como vai?
Essa indicação do Lighthouse significa que o documento não possui uma região principal identificada semanticamente. Para corrigir, você pode utilizar a tag <main> para envolver o conteúdo principal da página, ou seja, aquilo que representa o objetivo central daquele documento. Por exemplo, se a página possui um cabeçalho, uma navegação e depois o conteúdo da jornada de viagens, esse conteúdo pode ficar dentro de <main>.
<header>
...
</header>
<nav>
...
</nav>
<main>
<!-- conteúdo principal da página -->
</main>
<footer>
...
</footer>
A vantagem não é apenas fazer o Lighthouse deixar de apontar o aviso. Elementos semânticos como <main> ajudam tecnologias assistivas, como leitores de tela, a entenderem a estrutura da página e permitem que a pessoa navegue diretamente até o conteúdo principal. O ideal é ter apenas um <main> por página e não utilizá-lo para envolver elementos que aparecem repetidamente em várias páginas, como navegação ou rodapé.
No seu projeto, qual parte do HTML você considera que representa o conteúdo principal da página de viagens?
Se precisar analisar a estrutura ou tiver outras dúvidas de acessibilidade, o fórum está à disposição.
Para saber mais:
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
Por que usar
?Não é simplesmente para "agradar" o Lighthouse.
O HTML semântico permite que tecnologias assistivas entendam melhor a estrutura da página.
Um leitor de tela pode interpretar:
→ cabeçalho → navegação → conteúdo principal → rodapéAssim, uma pessoa que utiliza leitor de tela pode pular diretamente para o conteúdo principal, sem precisar ouvir novamente todo o menu de navegação.
Legal! Eu ainda não sabia do main
aproveitando ainda dentro de acessibilidade, ontem eu tive uma dúvida a respeito dos titles das ancoras:
<div class="footer-social">
<p>Acesse nossas redes:</p>
<a
href="#"
target="_blank"
title="Entre em contato através do whatsapp"
>
<img src="img/Whatsapp.svg" alt="icone do Whatsapp na cor branca"
/></a>
<a
href="#"
target="_blank"
title="Acesse o Instagram do Jornada Viagens"
>
<img src="img/Instagram.svg" alt="icone do Instragam na cor branca"
/></a>
<a
href="#"
target="_blank"
title="Acesse o Twitter/X do Jornada Viagens"
>
<img src="img/Twitter.svg" alt="icone do Twitter/X na cor branca"
/></a>
</div>
Não ficaria muito repetitivo para o leitor de página essa sequência de textos?
Não seria mais interessante, desta maneira?
usando o gemini como copiloto, ele tinha recomendado esse html para esta seção:
<div class="footer-social">
<p>Acesse nossas redes:</p>
<a href="#" target="_blank" rel="noopener noreferrer">
<img src="img/Whatsapp.svg" alt="WhatsApp" />
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<img src="img/Instagram.svg" alt="Instagram" />
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<img src="img/Twitter.svg" alt="X (Twitter)" />
</a>
</div>
o gemini até relata que o conteúdo como estava, a remoção do title junto com um alt bem enxuto é o que resolve a acessibilidade ("metralhadora de voz").
sobre o main, qual parte vocês inseririam do jornada viagens? Eu particularmente, pensei em inserir o conteúdo após o hero e antes do bottom-hero (por considerar que tanto o hero quanto o bottom-hero poderiam não ser proveitoso.)
segue o meu repositório no github:
Oi, Esperidião.
A sugestão do Gemini de remover o title e deixar um alt enxuto funciona bem, porque o contexto do link já fica claro só com essa palavra, sem precisar da frase inteira repetida duas vezes. Vale lembrar também que, como esses links têm apenas imagem e nenhum texto visível, o alt da imagem passa a ser o único nome acessível do link, então ele precisa ser suficiente sozinho, sem depender do title.
Sobre a estrutura do main no seu projeto, faz sentido reavaliar o que você propôs. Hero e bottom-hero costumam ser elementos visuais de apresentação, não conteúdo em si, então incluir tudo entre eles dentro do main é uma escolha coerente, já que esse é o conteúdo que representa o propósito central da página. O hero pode ficar de fora ou dentro, dependendo de como você o interpreta: se ele carrega texto institucional relevante, faz sentido estar dentro do main, mas se for só decorativo, pode ficar fora, como já está o bottom-hero no seu código.