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: