Salta al contenuto principaleSalta alla navigazione
Logo di Ottavio Tedesco, sviluppatore frontend specializzato in React e Tailwind CSS.
Sviluppo custom per software house

A11y Widget - libreria di accessibilità

Libreria React progettata per integrare controlli di accessibilità configurabili e coerenti con il design system, evitando plugin rigidi, pesanti o difficili da mantenere.
Ottavio Tedesco20255 mesi
A11y Widget - libreria di accessibilità

Obiettivo del progetto

Non ho installato un plugin di accessibilità: ho progettato una libreria riutilizzabile, personalizzabile e integrabile in progetti diversi, con controlli reali e architettura pensata per durare.
L'obiettivo non era replicare i widget esistenti, ma costruire la libreria che avrei voluto trovare: TypeScript-first, tree-shakable, personalizzabile via CSS Custom Properties e integrabile in un design system reale.
15+
controlli accessibilità
AA
criteri WCAG 2.1
TS
TypeScript-first
0
dipendenze runtime
01Contesto iniziale
Molti widget disponibili sul mercato erano costosi, poco personalizzabili o basati su progetti open source non più mantenuti. Serviva un'alternativa stabile, controllabile e adatta a progetti diversi. Molti plugin aggiungono un'interfaccia standard sopra il sito, ma non si integrano davvero con il design system dell'applicazione, non risolvono problemi strutturali e spesso aumentano peso, dipendenze e manutenzione. L'obiettivo era creare un componente controllabile, coerente e riutilizzabile.
02Decisioni prese

Libreria npm invece di componente interno

Pubblicare una libreria forza a progettare un'API pubblica stabile, documentata e retrocompatibile. Un componente interno risolve un problema locale; un pacchetto npm impone una struttura più pulita e riutilizzabile.

React Context Provider per lo stato globale

Le preferenze di accessibilità devono essere condivise tra widget, UI e componenti dell'applicazione. Context evita prop drilling e mantiene lo stato centralizzato senza introdurre uno state manager esterno.

CSS Custom Properties per il theming

Il consumer può adattare colori, spaziature e stati visuali al proprio brand system senza forkare la libreria o sovrascrivere selettori fragili.

03Cosa è stato escluso
Dashboard analytics accessibilitàVersione CDN no-buildPlugin WordPressSupporto IE11

La dashboard analytics avrebbe richiesto backend, tracciamento eventi e gestione di dati utente: uno scope incompatibile con una libreria client-side. La versione CDN no-build e il plugin WordPress avrebbero introdotto canali di distribuzione separati da mantenere. Il supporto IE11 è stato escluso perché avrebbe imposto polyfill e compromessi tecnici non coerenti con una libreria moderna.

Funzionalità realizzate

✓
Widget floating personalizzabile con oltre 15 controlli di accessibilità: regolazione dimensione testo dinamica, modalità alto contrasto, inversione colori, modalità dislessia con font OpenDyslexic, pausa animazioni CSS, e filtri visivi per diverse forme di daltonismo
✓
React Context Provider per sincronizzare le preferenze a livello globale, con persistenza in localStorage e gestione SSR-safe
✓
Supporto alla navigazione da tastiera e markup ARIA per migliorare l'esperienza con screen reader come NVDA, JAWS e VoiceOver
✓
Architettura TypeScript modulare, API tipizzata e bundle pensato per essere tree-shakable. L'integrazione non richiede uno state manager esterno né dipendenze runtime aggiuntive
✓
Theming tramite CSS Custom Properties, con supporto dark/light mode, override per brand system e integrazione con Tailwind CSS

Impatto del progetto

API stabile

Pacchetto arrivato alla versione 1.0.2, con API pubblica stabilizzata e gestione dei rilasci

Pacchetto riutilizzabile e autonomo

Distribuibile come dipendenza npm in qualsiasi progetto React senza configurazioni aggiuntive

Zero dipendenze runtime

La libreria si integra senza aggiungere librerie runtime al bundle dell'applicazione host

Test suite dedicata

Test con Vitest sulle API pubbliche per ridurre regressioni tra versioni

Galleria del progetto

Screenshot delle sezioni principali del progetto.

Widget accessibilità chiuso floating su sito web

Widget Floating Posizionato

Widget accessibilità aperto con pannello controlli completo

Pannello Controlli Accessibilità Completo

Sito web con modalità alto contrasto attiva

Modalità Alto Contrasto Attivata

Testo ingrandito al 200% per ipovedenti

Regolazione Dimensione Testo Dinamica

Font OpenDyslexic applicato per dislessia

Modalità Dislessia con Font Specializzato

Widget con multiple impostazioni attive contemporaneamente

Configurazione Multi-Setting Avanzata

Servizio correlato

Sviluppo custom per software house

Sviluppo custom per software house

Questo progetto rientra in questo servizio

Scopri il servizio

Tecnologie Utilizzate

React 19TypeScriptTailwind CSSViteNPM Package

Info Progetto

Cliente

Ottavio Tedesco

Anno

2025

Durata

5 mesi

Categoria

Sviluppo custom per software house

Output

  • Widget floating personalizzabile con controlli per testo, contrasto, colori, animazioni e preferenze visive
  • React Context Provider per sincronizzare le impostazioni a livello globale
  • Persistenza automatica delle preferenze nel localStorage con gestione SSR-safe
  • Supporto a navigazione da tastiera, focus management e markup ARIA
  • Architettura TypeScript modulare con API tipizzata e bundle tree-shakable
  • Theming tramite CSS Custom Properties con supporto dark/light mode

Hai bisogno di accessibilità in un progetto React?

Posso integrare il widget nel tuo progetto o costruire una soluzione custom. Raccontami il contesto.
Richiedi una consulenza

Hai un progetto che deve funzionare, non solo esistere?

Raccontami il contesto e l'obiettivo, non la soluzione. Valuterò con sincerità se ha senso lavorare insieme e in che modo. Se non sono la persona giusta, te lo dirò subito.

Richiedi una consulenza