Una piccola introduzione Cos'è il widget A11Y e perché lo abbiamo costruito
Il nostro widget di accessibilità è un componente JavaScript proprietario che si installa sul sito con uno script e fornisce all'utente finale un pannello di personalizzazione: contrasto alto, ingrandimento testo, font ad alta leggibilità, evidenza dei link, lettura facilitata, focus visibile rinforzato, evidenziazione dei titoli. Tutto isolato in Shadow DOM, senza toccare CSS o script del sito ospite.
Differenza con i widget A11Y commerciali: i widget sul mercato spesso iniettano CSS globale che entra in conflitto con il tema del sito, rallentano il caricamento, raccolgono dati utente. Il nostro è leggero, isolato in Shadow DOM, niente conflitti CSS, niente raccolta dati invasiva, niente claim ingannevoli sulla conformità WCAG.
Lo usiamo da Vicenza dal 2008 sui clienti che vogliono dare un'opzione di accessibilità immediata mentre lavorano a un audit WCAG completo. Importante: il widget non rende il sito conforme alle WCAG da solo. Serve sempre l'audit con remediation, il widget è un complemento.
Esempi tipici Tre esempi di intervento, in settori diversi
Esempio · settore e-commerce B2C Sito di un retailer B2C (settore home decor)
Sito con tema custom complesso, esigenza di accessibilità per clientela mista. Widget installato in Shadow DOM, niente conflitti CSS rispetto al tema. Core Web Vitals invariate, audit WCAG completo pianificato come step successivo.
0 conflitti CSS
Esempio · settore istituzionale Sito di un ente con obbligo AGID (settore culturale)
Ente con sito istituzionale e obbligo di pubblicare la dichiarazione di accessibilità. Widget installato come complemento durante la fase di remediation WCAG. Comunicazione trasparente nella dichiarazione: il widget è un aiuto, non sostituisce la conformità.
AGID complemento dichiarazione
Esempio · settore B2B servizi Sito di un'azienda di servizi (settore consulenza)
Sito corporate B2B con clientela varia. Widget attivato per dare un'opzione immediata mentre il team lavora a un restyling con audit WCAG nativo. Personalizzazioni grafiche allineate al brand.
Quick fix pre-audit WCAG
Cosa include Cosa fa concretamente il widget
Quattro funzionalità chiave, tutte rispettose del sito ospite.
Personalizzazioni di leggibilità
Per chi ha esigenze visive specifiche.
L'utente può attivare contrasto alto, scala di grigi o tinta seppia, ingrandire il testo a step (110%, 125%, 150%), cambiare il font in uno ad alta leggibilità (sans-serif simile a OpenDyslexic), aumentare la spaziatura tra righe e lettere. Tutte le preferenze sono salvate localmente per la sessione successiva.
- Contrasto alto e scala di grigi
- Ingrandimento testo a step
- Font ad alta leggibilità
- Spaziatura righe e lettere
Aiuti alla navigazione
Focus, link, titoli più visibili.
Per chi naviga da tastiera o ha difficoltà a seguire la pagina: focus visibile rinforzato (bordo spesso e colorato sul TAB), evidenziazione dei link in colore distinguibile, evidenziazione dei titoli H2/H3 con sfondo, modalità di pausa delle animazioni e degli auto-play.
- Focus visibile rinforzato
- Link evidenziati
- Titoli H2/H3 con sfondo
- Pausa animazioni e auto-play
Isolamento in Shadow DOM
Niente interferenze col sito.
Il widget vive interamente in Shadow DOM: il suo CSS non leak nel sito, il CSS del sito non lo modifica. Niente conflitti con framework CSS (Tailwind, Bootstrap), niente reset globali che ti rompono il widget, niente specificità che combatte. Si installa con uno script, si toglie togliendolo.
- CSS isolato in Shadow DOM
- Niente conflitti col tema
- Niente reset globali invasivi
- Disinstallazione pulita
Nessuna raccolta dati invasiva
Solo localStorage del browser.
Le preferenze utente sono salvate solo nel localStorage del browser dell'utente: niente tracking, niente cookie di terze parti, niente analytics che traccia chi attiva l'accessibilità. Compatibile con GDPR senza necessità di consenso aggiuntivo.
- Solo localStorage browser
- Niente cookie di terze parti
- Niente tracking utente
- GDPR-friendly
Il problema Perché i widget A11Y commerciali spesso fanno più danno che bene
Pattern che vediamo prendendo in carico siti con widget di accessibilità preesistenti:
- Conflitti CSS col tema: il widget rompe il layout in mobile o cambia stili involontariamente
- Caricamento pesante: bundle da centinaia di KB che peggiora le Core Web Vitals
- Claim WCAG ingannevoli: marketing che promette "sito a norma" mettendo solo il widget
- Raccolta dati invasiva: tracker di terze parti che raccolgono informazioni sull'utente
- Cookie di terze parti: GDPR rende necessario il consenso, complica il banner cookie
- Costi mensili alti: licenze SaaS con canone ricorrente per funzionalità di base
- Niente sostituzione del lavoro reale: il widget non rende il sito conforme WCAG
Il nostro approccio: Shadow DOM, leggero, niente tracking, niente claim falsi, complemento all'audit WCAG vero.
I vantaggi Cosa ti porta lavorare con il nostro widget A11Y
Quello che ti porti a casa
Risultati concreti per chi cerca un'opzione immediata in attesa dell'audit:
- Niente conflitti CSS: il widget non rompe il tuo tema
- Caricamento leggero: pochi KB, zero impatto su Core Web Vitals
- Privacy rispettata: solo localStorage, niente tracking
- GDPR-friendly: niente cookie di terze parti da gestire
- Trasparenza: comunichiamo chiaramente che è un complemento, non un sostituto
- Costo una tantum: niente canone SaaS ricorrente
- Riferimenti reali: 180+ progetti dal 2008
Come lavoriamo Le 4 fasi per attivare il widget A11Y
1. Discovery
Settimana 1.
- Verifica del tema e dei plugin del sito
- Identificazione delle funzionalità prioritarie
- Definizione del posizionamento del bottone
- Roadmap di attivazione
2. Personalizzazione grafica
Settimana 1.
- Adattamento dei colori al brand
- Posizionamento del bottone
- Lingua dei testi (IT, EN, DE)
- Test su mobile e desktop
3. Installazione + test
Settimana 2.
- Installazione dello script
- Test su tutti i template del sito
- Verifica con screen reader
- Verifica delle Core Web Vitals
4. Manutenzione + evoluzione
Mensile o on-demand.
- Aggiornamenti per browser nuovi
- Nuove funzionalità su richiesta
- Compatibilità con nuovi temi
- Eventuale evoluzione verso audit WCAG completo
Strumenti Stack che alimenta il widget A11Y
Tutto basato su web standard, niente librerie esotiche:
- Shadow DOM nativo per isolamento CSS
- Web Components standard W3C
- localStorage per preferenze utente
- JavaScript vanilla per leggerezza
- WCAG 2.1 reference per le funzionalità incluse
Tecnologie Stack che alimenta il widget
GitHub
WordPress
Astro
GitHub
WordPress
Astro Risultati Cosa garantiamo come output
Quello che ti consegniamo dopo l'attivazione:
- Widget installato e personalizzato per il brand
- Compatibilità verificata con il tuo tema
- Core Web Vitals non peggiorate
- Privacy rispettata (solo localStorage)
- Documentazione operativa per il team
- Manutenzione opzionale con SLA
Quanto costa il widget A11Y? +
Servizio su misura: il preventivo dipende dalla complessità dei requisiti, dalle integrazioni con sistemi terzi (CRM, gestionale, API esterne), dal volume di test richiesto e dal livello di SLA in manutenzione. Prima cosa che facciamo è una discovery call gratuita di 30-45 minuti per capire scope e contesto, poi mandiamo un preventivo scritto entro 48-72 ore. Niente listini standard.
Il widget rende il sito conforme WCAG 2.1? +
No, e nessun widget al mondo lo fa davvero. Il widget aiuta gli utenti a personalizzare l'esperienza, ma la conformità WCAG richiede audit, remediation, dichiarazione di accessibilità. Te lo diciamo chiaramente per evitare false aspettative.
Quando ha senso usarlo? +
Quando vuoi dare un'opzione di accessibilità immediata mentre stai lavorando a un audit WCAG completo (settimane o mesi di remediation). Il widget è un complemento, non un sostituto. Per la conformità vera serve l'audit.
Funziona su tutti i CMS? +
Sì, funziona su qualsiasi sito che possa includere uno script JavaScript: WordPress, WooCommerce, Astro, Shopify, PrestaShop, siti custom. Si installa con uno snippet, si rimuove togliendolo.
Lavorate solo Veneto? +
Operiamo in tutta Italia. Per progetti che richiedono presenza fisica (formazione del team, integrazione con tema custom complesso) consideriamo Veneto, Lombardia, Emilia. Tutto il resto avviene da remoto via Zoom o Teams.
Cosa NON fate? +
Niente claim WCAG ingannevoli ("sito a norma con un click" è marketing scorretto). Niente raccolta dati utente. Niente canoni SaaS ricorrenti per funzionalità di base.