Vai al contenuto
Italia daisy
Storybook
Tema
  • Italia
  • daisyUI

Qualità

Accessibilità

Il riferimento è il fondamento Accessibilità del design system .italia: UNI CEI EN 301549:2021 e WCAG 2.1 livello AA, con WCAG 2.2. Le ricette sono HTML senza shadow DOM, quindi tutti i tool automatici le leggono per intero, senza i falsi positivi dei web component descritti nella guida di Dev Kit Italia.

I controlli automatici trovano solo una parte dei problemi. Le verifiche manuali qui sotto restano necessarie, e per i servizi pubblici serve la valutazione di un esperto di accessibilità e, dove possibile, di utenti reali.

Verifiche automatiche

Ogni esempio documentato viene mostrato in Chromium headless con il CSS precompilato e controllato così. I risultati sono raggruppati per componente; il comando fallisce se ci sono errori, quindi si può usare in CI (.github/workflows/a11y.yml).

ControlloCosa verificaCriteri WCAG
axeRegole WCAG 2.2 A/AA di axe-core, il motore consigliato da Dev Kit Italia, su ogni esempio e in ogni tema: il contrasto cambia con il tema. Le «best practice» di axe (heading e label vuoti, landmark) sono avvisi.1.1.1, 1.3.1, 1.4.3, 2.4.4, 2.5.8, 4.1.2 e le altre regole automatiche
tastieraTab e Maiusc+Tab dall'inizio alla fine di ogni esempio: nessuna trappola, tutti i controlli visibili raggiungibili, il focus cambia l'aspetto dell'elemento e non resta coperto da altro contenuto.2.1.1, 2.1.2, 2.4.7, 2.4.11
interazioniScenari da tastiera per componente: Invio e Spazio aprono accordion e dropdown, Esc chiude modale e popover e il focus torna al pulsante, le frecce cambiano scheda, opzione e voto, un tooltip mostrato col focus si chiude con Esc.2.1.1, 2.4.3, 1.4.13, 3.3.1
reflowA 320px di larghezza (1280px con zoom al 400%) niente scorrimento orizzontale, tranne dentro i contenitori fatti per scorrere. Con la spaziatura del testo WCAG (interlinea 1,5, spaziatura tra lettere e parole) nessun testo viene tagliato.1.4.10, 1.4.12
htmlValidazione HTML con html-validate (preset standard e a11y): annidamenti non permessi, id duplicati, attributi non validi, regole di accessibilità del markup.4.1.1 (WCAG 2.1), 1.3.1
ariaSnapshot dell'albero di accessibilità di ogni esempio (ruoli, nomi, stati) in tests/a11y-snapshots/. Una modifica fa fallire il controllo finché non viene rivista e accettata.1.3.1, 4.1.2 (regressioni)
sitoLe pagine della documentazione intere: titolo, lingua, landmark, ordine dei titoli, link «Vai al contenuto» al primo Tab, reflow a 320px.2.4.1, 2.4.2, 3.1.1, 1.3.1, 1.4.10
bunx playwright install --only-shell chromium   # una volta: il browser usato dai test
bun run a11y                                     # componenti: tutti i controlli, temi italia-*
bun run a11y --check axe,keyboard --component tabs,input
bun run a11y --theme italia-darker               # un tema (--all-themes: anche quelli daisyUI)
bun run a11y --update-snapshots                  # accetta le modifiche all'albero di accessibilità
bun run docs:build && bun run a11y:site          # pagine del sito, come pa11y-ci con runner axe
bun run a11y --json a11y-report.json --no-fail   # report JSON senza far fallire il comando

Verifiche manuali

Dal fondamento Accessibilità di designers.italia.it, per ogni componente e ogni pagina che li usa:

Tastiera

  • L'ordine del focus segue l'ordine di lettura della pagina.
  • Il comportamento di ogni controllo è quello atteso (Invio sui link e pulsanti, Spazio su checkbox e radio, frecce nelle select e nei gruppi).
  • Nessun contenuto compare o sparisce in modo inatteso quando un elemento riceve il focus.

Lettori di schermo

  • Combinazione di riferimento del design system: Windows + Chrome + JAWS; in alternativa NVDA.
  • Da verificare anche: macOS + Safari o Chrome + VoiceOver, iOS + Safari + VoiceOver, Android + Chrome + TalkBack.
  • Ordine di lettura, etichette (anche nascoste e ARIA), struttura dei titoli, testi alternativi.
  • Annuncio dei cambiamenti dinamici: notifiche, messaggi di errore, pannelli che si aprono.

Zoom e visualizzazione

  • Zoom del browser al 400% su schermo largo 1280px: niente contenuti tagliati o sovrapposti.
  • Elementi a scorrimento orizzontale (caroselli, tabelle) verificati a 1024px.
  • Contrasto di stati che i tool non vedono: hover, focus, elementi sopra immagini.

Per ogni variante di componente

  • Accessibilità visiva: contrasto e leggibilità.
  • Compatibilità con i lettori di schermo: struttura ed etichette.
  • Navigabilità: focus, struttura, tastiera.
  • Comprensibilità: comportamento prevedibile, gestione degli errori.

Riferimenti