Componente

Skiplinks

I collegamenti «Vai al contenuto» per chi naviga da tastiera: nascosti con sr-only, la barra intera compare in cima quando uno di loro riceve il focus.

Riferimento: <it-skiplinks>
Classi: ita-skiplinksita-skiplinks-bar
Solo CSS: ita-skiplinks è sr-only finché un suo link non ha il focus (focus-within) sul <nav>: con il primo Tab compare tutta la barra, non solo il link attivo. Mettilo come primo elemento del <body> e dai un id alle destinazioni (<main id="main">). Per spostare davvero il focus su un elemento non interattivo aggiungi tabindex="-1" alla destinazione.
Storybook: Apri le storie di Skiplinks

Esempio base

Clicca nel riquadro e premi Tab: la barra compare in cima.

Contenuto principale

Piè di pagina

Mostra il codice HTML

<div class="relative rounded-box border border-base-content/15 p-6 pt-16">
  <nav aria-label="Scorciatoie di navigazione" class="ita-skiplinks">
  <a href="#skip-main">Vai al contenuto principale</a>
  <a href="#skip-footer">Vai al piè di pagina</a>
</nav>
  <p id="skip-main" tabindex="-1" class="mb-2 font-semibold">Contenuto principale</p>
  <p id="skip-footer" tabindex="-1" class="text-base-content/70">Piè di pagina</p>
</div>

Aspetto

La barra come appare durante la navigazione da tastiera.

Mostra il codice HTML

<nav aria-label="Scorciatoie di navigazione" class="ita-skiplinks-bar">
  <a href="#main">Vai al contenuto principale</a>
  <a href="#nav">Vai alla navigazione</a>
  <a href="#footer">Vai al piè di pagina</a>
</nav>