Design System Accessibile

Accessibile per design,
conforme per impostazione predefinita

Set completo di componenti UI accessibili e responsive secondo le linee guida WCAG 2.1 Livello AA e i requisiti dell'European Accessibility Act (EAA 2019/882). Progettato specificamente per i servizi digitali governativi e del settore pubblico in tutta Europa.

WCAG 2.1 AA
EU Directive 2016/2102
EAA 2019/882
SP CORE dark theme - accessible design system Scuro
SP CORE light theme - accessible design system Chiaro

Conformità all'accessibilità per la Pubblica Amministrazione

Implementa tutti i requisiti obbligatori di accessibilità per le applicazioni web del settore pubblico europeo ai sensi della EU Directive 2016/2102

Tema ad alto contrasto

Tema ad alto contrasto integrato con schema cromatico giallo su nero per gli utenti ipovedenti. Soddisfa il rapporto di contrasto WCAG AAA (7:1+). Attivabile tramite il pannello Impostazioni, mantenuto tra le sessioni.

Screen reader integrato

Screen reader integrato con controlli di riproduzione, pausa, avanti e indietro per la narrazione del contenuto della pagina. Etichette ARIA complete e HTML semantico. Compatibile con JAWS, NVDA, VoiceOver e TalkBack.

Navigazione da tastiera

Accessibilità completa da tastiera con indicatori di focus visibili. Link di salto al contenuto principale. Tutti gli elementi interattivi raggiungibili tramite il tasto Tab.

Dimensione area touch

Aree touch minime di 44x44 pixel su tutti gli elementi interattivi. Conforme a WCAG 2.5.5 (Livello AAA) per l'accessibilità motoria.

Riduzione del movimento

Opzione per disabilitare tutte le animazioni e le transizioni per gli utenti con disturbi vestibolari. Rispetta la preferenza di sistema prefers-reduced-motion.

Testo scalabile

Dimensione del carattere regolabile dal 75% al 150%. Controlli per interlinea e spaziatura delle lettere. Tutti i layout rimangono intatti con zoom al 200%.

Tipografia accessibile

Font Atkinson Hyperlegible

SP CORE utilizza Atkinson Hyperlegible come carattere principale — un font specificamente progettato per lettori ipovedenti dal Braille Institute. Le sue forme distintive delle lettere massimizzano il riconoscimento dei caratteri e la leggibilità per gli utenti con disabilità visive.

Progettato dal Braille Institute per la massima leggibilità
Distinzione chiara tra caratteri simili (I, l, 1, 0, O)
Aperture aperte e forme esagerate riducono gli errori di lettura
Gratuito e open-source (SIL Open Font License)
Rendering eccellente su schermo a tutte le dimensioni

Impostazioni di visualizzazione utente

Tutte le preferenze di accessibilità sono centralizzate nel pannello Impostazioni. Le preferenze dell'utente vengono salvate in localStorage e applicate su tutte le pagine.

Impostazione Opzioni
Tema Chiaro, Scuro, Alto contrasto
Dimensione del carattere 75% — 150% (passi del 5%)
Interlinea Compatta, Normale, Rilassata, Ampia
Spaziatura lettere Normale, Ampia, Più ampia
Riduzione movimento On / Off

Libreria di componenti completa

Oltre 20 moduli pronti per la produzione — dai token di design fondamentali ai componenti interattivi complessi

Fondamenti

Animations Colors Icons Typography

Componenti

17 moduli
Alerts Avatars Badges Breadcrumbs Buttons Cards Charts Dropdowns Lists Loaders Modals & Panels Pagination Tables Tabs Tags Toasts Tooltips

Moduli

Inputs Selects Checkboxes & Radios Textareas Validation
Specifiche tecniche

Costruito per la produzione

SP CORE è costruito senza dipendenze esterne, con JavaScript vanilla e un'architettura CSS pulita basata su BEM. Progettato per un'integrazione perfetta in qualsiasi progetto esistente.

Convenzione di denominazione BEM con prefisso .csg-
Proprietà personalizzate CSS con sovrascrittura del tema tramite [data-theme]
Design responsive mobile-first, breakpoint a 768px
Vanilla JS — zero dipendenze
Persistenza in localStorage per le preferenze utente
Aree touch minime di 44x44px su tutti gli elementi interattivi

Supporto browser

Testato e supportato su tutti i principali browser (ultime 2 versioni).

Chrome
Firefox
Safari
Edge

Interessato a SP CORE?

Contattaci per una demo, informazioni sui prezzi o per discutere come SP CORE può soddisfare le esigenze della tua organizzazione.