diff --git a/docs/menu-di-navigazione/footer.md b/docs/menu-di-navigazione/footer.md
index c2986a5fad..4ec098b405 100644
--- a/docs/menu-di-navigazione/footer.md
+++ b/docs/menu-di-navigazione/footer.md
@@ -7,7 +7,9 @@ toc: true
---
## Introduzione
-Il **footer** (in italiano piè di pagina) è una sezione che contiene tutte le informazioni inerenti al sito web e alla società che lo ha costruito. Per una PA potrebbe contenere tutte i riferimenti ai vari **servizi**, a varie **pagine utili** al cittadino, rifimenti alla **privacy**, all'**accessibilità** e a come **contattare** gli uffici.
+Il **footer** (in italiano piè di pagina o piede di pagina) è una sezione che contiene tutte le informazioni inerenti al sito web e alla società o organizzazione che rappresenta.
+
+Per una Pubblica Amministrazione potrebbe contenere tutte i riferimenti ai vari **servizi**, a varie **pagine utili** alla cittadinanza, riferimenti alla **privacy**, il collegamento alla **Dichiarazione di accessibilità sul form AgID** e informazioni su come **contattare** l'amministrazione.
Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
@@ -40,11 +42,11 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
diff --git a/docs/menu-di-navigazione/skiplinks.md b/docs/menu-di-navigazione/skiplinks.md
index 5c245a120b..153023405e 100644
--- a/docs/menu-di-navigazione/skiplinks.md
+++ b/docs/menu-di-navigazione/skiplinks.md
@@ -1,36 +1,68 @@
---
layout: docs
title: Skiplinks
-description: Gli Skiplinks consentono agli utenti di accedere direttamente al contenuto principale della pagina saltando l'header e il menu di navigazione.
+description: Gli Skiplinks sono scorciatoie di navigazione che consentono agli utenti di andare direttamente ai contenuti principali della pagina.
group: menu-di-navigazione
toc: true
---
-È un componente particolarmente utile per coloro che utilizzando screen reader e/o navigano utilizzando la tastiera.
+## Introduzione
-Gli elementi Skiplinks sono contraddistinti dalle classi:
+È 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.
-- `visually-hidden`: renderizzati solo per gli screen reader
-- `visually-hidden-focusable`: renderizzati solo al focus
+Deve essere il primo contenuto che si incontra nella pagina. Se è presente l'elemento `` suggeriamo di integrarlo come primo suo elemento figlio, in modo da comprenderlo in ogni caso in un landmark di pagina.
-Per attivare la funzionalità si digita da tastiera il tasto: **TAB**.
+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.
+
+Per navigare tra gli elementi puoi usare il tasto: **TAB** (tabulazione).
+
+## Base
+Inserire come primo elemento della pagina alcune 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.
{% comment %}Example name: Base{% endcomment %}
{% capture example %}
{% endcapture %}{% include example.html content=example %}
-
+
+## Elenco
+Se la pagina è particolarmente complessa si possono inserire più collegamenti che permettano di saltare direttamente ai blocchi principali.
+
+Nell'esempio che segue, implementato per il sito [Designers Italia](https://designers.italia.it), sono inseriti due collegamenti che è utile approfondire:
+
+- un salto ad un **modulo per chiedere alle persone come stanno valutando l'esperienza d'uso** della pagina. Il testo dello skiplink anticipa già la domanda;
+- un **collegamento diretto alla Dichiarazione di accessibilità disponibile sul form AgID**, che accompagnerà il necessario link presente anche nel piede di pagina, per permettere a chi naviga con strumenti assistivi di trovarla facilmente senza dover scansionare tutti i contennuti.
+
+Consigliamo di non eccedere con il numero di elementi scorciatoia, altrimenti emergerebbe il bisogno di poter saltare le stesse scorciatoie.
+
{% capture callout %}
-#### Visualizzazione degli Skiplinks su macOS
+#### Accessibilità
+
+In questo caso è utile implementarlo come elemento `nav` con una `aria-label` dedicata che ne spieghi l'uso.
+{% endcapture %}{% include callout.html content=callout type="accessibility" %}
+
+{% comment %}Example name: Elenco{% endcomment %}
+{% capture example %}
+
+{% endcapture %}{% include example.html content=example %}
+
+## Come visualizzare gli skiplinks su MacOS
-##### Chrome
+### Chrome
Per attivare la funzionalità si digita da tastiera il tasto: **TAB**.
-##### Safari
+### Safari
Per attivare la navigazione via **TAB** è necessario:
@@ -40,7 +72,7 @@ Per attivare la navigazione via **TAB** è necessario:
Alternativamente è possibile navigare gli elementi usando **opzione+TAB**
-##### Firefox
+### 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:
@@ -52,5 +84,3 @@ Per attivare questa modalità è necessario modificare le preferenze di sistema
Una volta selezionata questa opzione gli skiplinks saranno attivabili su Firefox con il pulsante **TAB**.
Vedi anche la [guida ufficiale di Apple](https://support.apple.com/it-it/HT204434).
-
-{% endcapture %}{% include callout.html content=callout type="warning" %}
diff --git a/src/scss/custom/_skiplinks.scss b/src/scss/custom/_skiplinks.scss
index a0a2317f17..6c9be48d25 100644
--- a/src/scss/custom/_skiplinks.scss
+++ b/src/scss/custom/_skiplinks.scss
@@ -2,6 +2,7 @@
.skiplinks {
background-color: $skiplinks-bg;
text-align: center;
+
a {
padding: $skiplink-padding-y $skiplink-padding-x;
display: block;
@@ -9,4 +10,12 @@
color: $skiplinks-color;
text-decoration: underline;
}
+
+ ul {
+ list-style: none;
+ padding: 0;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ margin-bottom: 0;
+ }
}