Regione Toscana Design System — Servizi Design System Core

Accessibilita

Accessibilità

Il Regione Toscana Design System è progettato per rispettare le WCAG 2.1 Livello AA, in conformità con la normativa italiana (Legge Stanca, D.Lgs 106/2018) e le Linee Guida AgID sull’accessibilità.

Principi WCAG 2.1

Le WCAG 2.1 si articolano in quattro principi fondamentali (POUR):

Principio Requisito chiave per il DS
Percepibile Testi alternativi per immagini, contrasto colore ≥ 4.5:1 (testo normale), ≥ 3:1 (testo grande e UI)
Utilizzabile Navigazione da tastiera completa, nessuna trappola del focus, skip link, target tocco ≥ 44×44 px
Comprensibile Lingua della pagina dichiarata, errori nei form identificati e descritti, etichette visibili
Robusto Markup semantico, ruoli ARIA corretti, compatibilità con screen reader (NVDA, JAWS, VoiceOver)

Pattern accessibili implementati nel DS

Il componente @skip-link permette agli utenti di tastiera di saltare il menu di navigazione e raggiungere direttamente il contenuto principale.

Implementazione: components/02-atoms/skip-link/

<a href="#main-content" class="rtds-skip-link rtds-sr-only rtds-not-sr-only:focus">
  Vai al contenuto principale
</a>
  • Visibile solo al focus da tastiera (pattern sr-only + not-sr-only:focus)
  • Inserito automaticamente nel layout base via _page-layout.njk
  • L’ancora di destinazione id="main-content" è sul tag <main>

Riferimento WCAG: Criterio 2.4.1 (Salto di blocchi) — Livello A

Navigazione principale — focus trap e pannello mobile

Il componente @primary-navigation implementa un pannello mobile accessibile.

Pannello mobile:

<nav role="dialog" aria-modal="true" aria-label="Menu di navigazione">
  <!-- voci di menu -->
</nav>
  • role="dialog" + aria-modal="true": il pannello è trattato come finestra modale dagli screen reader
  • aria-label: etichetta descrittiva per il pannello
  • Focus trap JS attivato all’apertura: il focus rimane all’interno del pannello finché non viene chiuso
  • Alla chiusura il focus ritorna al pulsante trigger

Riferimento WCAG: Criterio 2.1.2 (Nessun impedimento all’uso della tastiera) — Livello A, ARIA Authoring Practices Guide — Dialog Pattern

Header e landmark region

Il componente @header utilizza landmark HTML per la navigazione veloce da screen reader.

<header role="banner">        <!-- landmark banner -->
  <nav aria-label="...">      <!-- landmark navigation -->
</header>
<main id="main-content">      <!-- landmark main -->
<footer id="siteFooter">      <!-- landmark contentinfo -->
  • role="banner" sull’header identifica l’area dell’intestazione del sito
  • role="contentinfo" sul footer (implicito su <footer>)
  • L’id="siteFooter" permette al footer di essere raggiunto via anchor link interno
  • Ogni <nav> ha un aria-label descrittivo per distinguere più landmark di navigazione sulla pagina

Riferimento WCAG: Criterio 1.3.6 (Identificare lo scopo) — Livello AAA (consigliato), 4.1.2 (Nome, ruolo, valore) — Livello AA

Pulsanti — stato e ruolo

Il componente @button supporta aria-haspopup per i pulsanti che aprono dropdown o dialog.

<!-- Pulsante che apre un menu -->
<button aria-haspopup="true" aria-expanded="false">Apri menu</button>

<!-- Pulsante che apre un dialog -->
<button aria-haspopup="dialog">Apri dialog</button>
  • aria-haspopup comunica agli screen reader il tipo di widget che il pulsante controlla
  • aria-expanded riflette lo stato aperto/chiuso del widget associato

Riferimento WCAG: Criterio 4.1.2 (Nome, ruolo, valore) — Livello AA

Gestione del focus

Regole generali

  1. Ordine di focus coerente — segue l’ordine visuale e logico del DOM (2.4.3)
  2. Focus visibile — tutti gli elementi interattivi hanno outline di focus visibile, mai rimosso senza sostituto (2.4.7 / 2.4.11)
  3. Focus trap nei dialog — quando una finestra modale è aperta, il focus non può uscire dall’area modale (2.1.2)
  4. Ripristino del focus — alla chiusura di un componente sovrapposto (dropdown, dialog), il focus torna all’elemento trigger (2.4.3)

Utility CSS per il focus

Le classi Tailwind prefissate rtds- gestiscono la visibilità per screen reader:

rtds-sr-only              /* nascosto visivamente, accessibile agli SR */
rtds-not-sr-only          /* visibile a tutti */
focus:rtds-not-sr-only    /* visibile solo al focus — usato per skip link */

Testi alternativi e icone

Icone decorative

<svg aria-hidden="true" focusable="false">...</svg>

Tutte le icone SVG decorative hanno aria-hidden="true" e focusable="false" per escluderle dall’albero di accessibilità.

Icone semantiche (con significato)

<svg aria-hidden="true" focusable="false">...</svg>
<span class="rtds-sr-only">Chiudi</span>

Quando un’icona veicola significato (es. pulsante chiudi senza testo visibile), il testo alternativo è fornito da uno <span class="rtds-sr-only"> adiacente.

Colori e contrasto

I token colore del DS rispettano i requisiti WCAG 2.1 AA:

  • Testo su sfondo chiaro: rapporto di contrasto ≥ 4.5:1
  • Testo grande (≥ 18pt / 14pt bold): rapporto di contrasto ≥ 3:1
  • Componenti UI e stati focus: rapporto di contrasto ≥ 3:1

Il colore non è mai l’unico mezzo per veicolare un’informazione (es. messaggi di errore usano icona + testo, non solo colore rosso).

Strumenti di verifica consigliati

Strumento Uso
axe DevTools Analisi automatica in-browser (estensione Chrome/Firefox)
NVDA + Firefox Screen reader Windows — test principale
VoiceOver + Safari Screen reader macOS/iOS
Colour Contrast Analyser Verifica contrasto colori
Navigazione da tastiera Test manuale: Tab, Shift+Tab, Enter, Spazio, Esc, tasti freccia

Riferimenti normativi e tecnici