Link di salto

Un link di salto è una scorciatoia da tastiera posta all’inizio di ogni pagina che consente agli utenti di saltare la navigazione ripetuta per raggiungere direttamente il contenuto principale. Soddisfa il criterio WCAG 2.4.1 Bypass Blocks (Livello A) ed è uno degli interventi di accessibilità più economici disponibili.

Perché esiste

Si consideri un tipico sito editoriale. L’intestazione include sei voci di navigazione di primo livello, un selettore di lingua e un pulsante per il tema. Il footer ne aggiunge altre dodici. Ogni pagina ripete queste strutture. Un utente che naviga da tastiera o utilizza uno screen reader, approdando su un articolo e desiderando leggerlo, è costretto a scorrere con Tab circa trenta elementi interattivi prima di raggiungere il corpo dell’articolo. Moltiplicato per ogni navigazione tra pagine, questo diventa estenuante.

Un link di salto è un semplice <a href="#main-content">Skip to content</a> collocato come primo elemento attivabile nel documento. L’utente preme Tab una volta dopo il caricamento della pagina, vede «Skip to content», preme Invio e il focus si sposta al corpo dell’articolo.

Implementazione

Il pattern è semplice, ma presenta alcune insidie note:

<a class="skip-link" href="#main-content">Skip to content</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Tre dettagli fondamentali:

1. Il link deve essere visibile al focus. Un link di salto permanentemente impostato come display: none è invisibile agli utenti vedenti che navigano da tastiera, i quali non possono sapere che esiste. È necessario nasconderlo fuori schermo tramite il posizionamento, non con display: none o visibility: hidden.

2. L’elemento di destinazione deve accettare il focus. Un semplice <main> non riceve il focus da tastiera per impostazione predefinita. Aggiungere tabindex="-1" lo rende focusable a livello programmatico, consentendo al browser di spostare effettivamente il focus quando si segue il link. Senza questo accorgimento, l’hash dell’URL cambia ma il focus non si sposta, e il successivo Tab riparte dall’inizio della pagina — vanificando completamente lo scopo del link di salto.

3. Deve essere il primo elemento focusable. Non «tra i primi cento elementi» — il primo. Se qualcosa lo precede (un link al logo, un’icona di ricerca), l’utente deve scorrere con Tab quegli elementi prima di raggiungere il link di salto, neutralizzandone lo scopo.

Link di salto multipli

Le pagine lunghe con più aree ripetute possono beneficiare di un piccolo menu di «salto» anziché di un singolo link:

• Salta al contenuto principale
• Salta alla navigazione
• Salta al footer

Un breve elenco visibile al focus con tre o quattro destinazioni è accettabile. Un lungo sommario generato automaticamente all’inizio di ogni pagina non lo è.

Cosa non sostituisce

Un link di salto è la rete di sicurezza per i bypass block. Non sostituisce i landmark appropriati (<nav>, <main>, <aside>, <footer>), la corretta struttura dei titoli (un unico <h1> per pagina, <h2> gerarchici) né l’attributo ARIA aria-label sui landmark duplicati. Gli utenti di screen reader si spostano tra regioni e titoli tramite scorciatoie da tastiera che dipendono dalla presenza di queste strutture; il link di salto è destinato agli utenti vedenti che navigano esclusivamente da tastiera.