Salta al contenuto
Sviluppi proprietari · Widget A11Y

Widget di accessibilità in Shadow DOM

Il nostro componente proprietario per il miglioramento immediato dell'accessibilità del sito: contrasti, dimensioni testo, lettura facilitata, focus visibile, tutto in Shadow DOM, senza interferire con il CSS o gli script del sito ospite. Quick fix in attesa di un audit WCAG completo.

  • Preventivo in 48h
  • Shadow DOM isolato
  • 180+ progetti dal 2008
180 + progetti dal 2008
5/5 su 82 recensioni Google
97 % clienti che restano oltre 24 mesi
Google Partner certificati dal 2018
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

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
Domande & risposte

FAQ

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.

Perché Web Elettronica

Quattro motivi per scegliere il nostro team

Un solo interlocutore tecnico

Codice, server, accessibilità sotto la stessa squadra dal 2008. Widget e audit WCAG forniti dallo stesso team coerente.

Shadow DOM isolato

Niente conflitti CSS col tuo tema. Niente reset globali invasivi. Si installa pulito, si rimuove pulito.

Trasparenza WCAG

Te lo diciamo chiaramente: il widget non rende conforme. Per la conformità serve l'audit. Niente false promesse.

Costo una tantum

Niente canone SaaS ricorrente. Paghi una volta, lo usi finché ti serve, lo rimuovi quando vuoi.

Inizia ora

30 minuti con un nostro esperto. Niente commerciali

Analisi preliminare gratuita + report sintetico via email entro 48h.

Recensioni verificate

5/5 su 82 recensioni. Le parole dei nostri clienti