Regione Toscana Design System Design System Servizi

Skip link: Skip link — multiplo 

<div class="rtds-skip-link">

    <a href="#mainContent" class="rtds-skip-link__link rtds-sr-only focus:rtds-not-sr-only focus:rtds-py-2 focus:rtds-px-4">
        Vai al contenuto principale
    </a>

    <a href="#siteNavWrapper" class="rtds-skip-link__link rtds-sr-only focus:rtds-not-sr-only focus:rtds-py-2 focus:rtds-px-4">
        Vai alla navigazione
    </a>

    <a href="#siteFooter" class="rtds-skip-link__link rtds-sr-only focus:rtds-not-sr-only focus:rtds-py-2 focus:rtds-px-4">
        Vai al footer
    </a>

</div>
 
<div class="rtds-skip-link">
  {% for link in links %}
  <a href="{{ link.href }}" class="rtds-skip-link__link rtds-sr-only focus:rtds-not-sr-only focus:rtds-py-2 focus:rtds-px-4">
    {{ link.label }}
  </a>
  {% endfor %}
</div>
 
{
  "links": [
    {
      "href": "#mainContent",
      "label": "Vai al contenuto principale"
    },
    {
      "href": "#siteNavWrapper",
      "label": "Vai alla navigazione"
    },
    {
      "href": "#siteFooter",
      "label": "Vai al footer"
    }
  ]
}
  • Content: 
    .rtds-skip-link {
    text-align: center;
  }
.rtds-skip-link__link {
    background-color: var(--color-button-primary);
    color: var(--color-content-inverse);
    border-radius: var(--border-radius-md);
    display: inline-block;
    font-weight: 700;
  }
  • URL: /components/raw/skip-link/skip-link.built.css
  • Filesystem Path: components/02-atoms/skip-link/skip-link.built.css
  • Size: 259 Bytes
  • Content: 
    @layer components {
  .rtds-skip-link {
    text-align: center;
  }

  .rtds-skip-link__link {
    background-color: var(--color-button-primary);
    color: var(--color-content-inverse);
    border-radius: var(--border-radius-md);
    @apply rtds-font-bold rtds-inline-block;
  }
}
  • URL: /components/raw/skip-link/skip-link.css
  • Filesystem Path: components/02-atoms/skip-link/skip-link.css
  • Size: 282 Bytes

Skip link

Componente per la navigazione da tastiera che permette di saltare blocchi di contenuto ripetuti (header, navigazione) e raggiungere direttamente le sezioni principali della pagina.

Comportamento

Renderizza un <div class="rtds-skip-link"> con uno o più <a>. I link sono visivamente nascosti (rtds-sr-only) ma presenti nel tab order. Al focus da tastiera diventano visibili tramite focus:rtds-not-sr-only.

Il componente va inserito come primo elemento del page layout, prima del block header.

Varianti

Nome Descrizione
Default Un solo link verso #mainContent
Skip link — multiplo Tre link: contenuto principale, navigazione, footer

Parametri di configurazione

Parametro Tipo Obbligatorio Descrizione
links Array Sì Lista di destinazioni. Ogni voce ha href (string) e label (string)

Accessibilità

  • Elemento <a> nativo con testo descrittivo — nessun attributo ARIA aggiuntivo necessario
  • Rimane nel tab order anche quando nascosto (position: absolute; clip, non display: none)
  • Primo elemento focusabile della pagina — Tab alla prima pressione riceve il focus
  • Non eccedere 4–5 voci nella variante multipla

Stili CSS

Classe Descrizione
.rtds-skip-link Container del componente, centra i link visibili
.rtds-skip-link__link Link singolo — nascosto, visibile al focus

Target ID di riferimento

ID Elemento Stato
#mainContent <main> Presente in tutti i page layout
#siteNavWrapper <nav> in primary-navigation.njk Già presente
#siteFooter <footer> in footer.njk Aggiunto con questo componente

Esempi di utilizzo

Usare l’handle Fractal @skip-link.

Usare l’handle Fractal @skip-link--multiple.

Custom via context

Passare un array links con oggetti { href, label }.

Note

footer--regione.njk eredita id="siteFooter" tramite extends @footer — nessuna modifica separata necessaria.