Link "pular para o conteúdo" que aparece no foco do teclado, melhorando a acessibilidade.
<!-- Inserir como primeiro elemento do body -->
<a href="#conteudo-principal" class="skip-link">
Pular para o conteúdo principal
</a>
<!-- ... cabeçalho, menu, etc. ... -->
<main id="conteudo-principal" tabindex="-1">
<!-- conteúdo -->
</main>
<style>
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
padding: 0.5rem 1rem;
background: #000;
color: #fff;
border-radius: 0 0 4px 4px;
font-weight: 600;
text-decoration: none;
z-index: 9999;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
</style>