Skiplinks
Gli Skiplinks consentono agli utenti di accedere direttamente al contenuto principale della pagina saltando l’header e il menu di navigazione.
È un componente che permette a persone che navigano sequenzialmente i contenuti di aver accesso più facile a tutti i contenuti principali della pagina. È particolarmente utile per coloro che per navigare usano la tastiera o tecnologie assistive come i lettori di schermo.
Deve essere il primo contenuto della pagina.
Gli elementi del componente skiplinks possono essere contraddistinti con la classe visually-hidden-focusable
per mostrarli a schermo solo al focus. In questo caso, è importante racchiuderli in un elemento contenitore con classe skiplinks
per avere lo stile corretto quando visibili.
Per navigare gli elementi si digita da tastiera il tasto: TAB (tabulazione).
Base
Inserire come primi elementi della pagina scorciatoie di navigazione che portino ai contenuti principali, permettendo di saltare blocchi ripetuti su ogni pagina come posso essere l’intestazione e il menu di navigazione.
1
2
3
4
<div class="skiplinks">
<a class="visually-hidden-focusable" href="#main">Vai al contenuto principale</a>
<a class="visually-hidden-focusable" href="#footer">Vai al piede di pagina</a>
</div>
Come elenco
Se la pagina è particolarmente complessa si possono inserire più collegamenti che permettano di saltare direttamente ai blocchi principali.
Nell’esempio che segue, sono stati inseriti due collegamenti su cui è bene mettere attezione:
- un salto ad un modulo per chiedere alle persone come stanno valutando l’esperienza d’uso. Il testo dello skiplink anticipa già la domanda;
- un collegamento diretto alla Dichirazione di accessibilità sul form AgID, per permettere a chi naviga con strumenti assistivi di trovarla facilmente.
Si consiglia in ogni caso di non eccedere con il numero di elementi di questo elenco, utile se rimane entro le 3 o 4 voci. Diventerebbe altrimenti esso stesso bisognoso di poter essere saltato.
Accessibilità
In questo caso è utile implementarlo come elemento nav
con una aria-label
dedicata che ne spieghi l’uso.
1
2
3
4
5
6
7
8
<nav class="skiplinks" aria-label="Scorciatoie di navigazione">
<ul>
<li class="visually-hidden-focusable"><a href="#menu">Vai al menu</a></li>
<li class="visually-hidden-focusable" ><a href="#main">Vai al contenuto</a></li>
<li class="visually-hidden-focusable" ><a href="#feedback">Questa pagina ti è stata utile?</a></li>
<li class="visually-hidden-focusable" ><a href="https://form.agid.gov.it/view/xyz">Dichiarazione di accessibilità (link esterno su sito AgID)</a></li>
</ul>
</nav>
Come visualizzare gli skiplinks su MacOS
Chrome
Per attivare la funzionalità si digita da tastiera il tasto: TAB.
Safari
Per attivare la navigazione via TAB è necessario:
- Aprire il menu Safari > Preferenze
- Cliccare sulla tab Avanzate
- Selezionare “Premi tabulatore per evidenziare tutti gli elementi della pagina web”.
Alternativamente è possibile navigare gli elementi usando opzione+TAB
Firefox
Le impostazioni di default di macOS non consentono la navigazione di tutti gli elementi interattivi di un sito con l’uso del pulsante TAB. Per attivare questa modalità è necessario modificare le preferenze di sistema come segue:
- Aprire il Menu Apple > Preferenze di Sistema, quindi fare clic su Tastiera.
- Fare clic su Abbreviazioni.
- Nella parte inferiore della finestra delle preferenze, selezionare “Usa la navigazione da tastiera per spostare la selezione tra i controlli”.
Una volta selezionata questa opzione gli skiplinks saranno attivabili su Firefox con il pulsante TAB.
Vedi anche la guida ufficiale di Apple.