Widget di Accessibilità

Migliora l'accessibilità del tuo sito web con tecnologie all'avanguardia

Il nostro widget di accessibilità utilizza l'Intelligenza Artificiale e un'interfaccia intuitiva per rendere il tuo sito web accessibile a tutti gli utenti, indipendentemente dalle loro capacità.

Scopri le Funzionalità

Cos'è il Widget di Accessibilità

Il widget di accessibilità è una soluzione innovativa progettata per migliorare l'esperienza di navigazione per utenti con diverse esigenze di accessibilità. Attraverso l'uso di tecnologie avanzate di Intelligenza Artificiale e un'interfaccia utente intuitiva, il widget offre strumenti personalizzabili che si adattano automaticamente alle necessità specifiche di ogni visitatore.

Obiettivo Principale

Garantire che il tuo sito web sia accessibile al 100% degli utenti, rispettando le linee guida WCAG 2.1 e migliorando l'esperienza di navigazione per persone con disabilità visive, uditive, motorie e cognitive.

Vantaggi dell'Accessibilità Web

  • Amplia il pubblico raggiungibile dal tuo sito web
  • Migliora il posizionamento SEO sui motori di ricerca
  • Dimostra responsabilità sociale e inclusività
  • Riduce il rischio di problemi legali legati all'accessibilità
  • Migliora l'usabilità generale per tutti gli utenti

Funzionalità del Widget

Profilo Convulsioni e Epilessia

Attiva automaticamente "Ferma animazioni" e "Saturazione bassa" per ridurre il rischio di convulsioni. Elimina elementi lampeggianti e movimenti rapidi che potrebbero scatenare episodi epilettici.

Profilo ADHD

Combina "Ferma animazioni", "Saturazione bassa" e "Maschera di lettura" per migliorare la concentrazione. Riduce le distrazioni visive e facilita la focalizzazione sui contenuti.

Profilo Cognitivo e Apprendimento

Aumenta automaticamente la dimensione del font del 40%, attiva la "Guida di lettura" e ferma le animazioni. Ottimizzato per utenti con difficoltà cognitive o di apprendimento.

Profilo Ipovedenti

Incrementa la dimensione del font del 40%, applica "Saturazione elevata" e ferma le animazioni. Progettato specificamente per utenti con disabilità visive.

Scala Contenuti

Modifica lo zoom dell'intera pagina con incrementi del 1.6%. Visualizza la percentuale di zoom in tempo reale. Mantiene il layout originale scalando proporzionalmente tutti gli elementi.

Dimensione Caratteri

Regola la dimensione del testo con incrementi di 0.5px (equivalenti al 10%). Memorizza le dimensioni originali e applica le modifiche a tutti gli elementi testuali della pagina.

Altezza Righe

Modifica l'interlinea con incrementi di 0.1 (10%). Migliora la leggibilità aumentando o diminuendo lo spazio tra le righe di testo, con limite minimo di 0.8 per mantenere la leggibilità.

Spaziatura Lettere

Regola lo spazio tra i caratteri con incrementi di 0.5px (10%). Facilita la lettura per utenti con dislessia, con limite minimo di -2px per evitare sovrapposizioni.

Evidenzia Titoli

Mette in risalto tutti i titoli della pagina con un'evidenziazione visiva distintiva. Facilita la navigazione e la comprensione della struttura del contenuto, particolarmente utile per utenti con difficoltà di lettura.

Evidenzia Link

Rende più visibili tutti i collegamenti presenti nella pagina attraverso un'evidenziazione speciale. Aiuta gli utenti con difficoltà visive a identificare facilmente i link cliccabili.

Lente di Ingrandimento Testo

Mostra un tooltip ingrandito che segue il cursore del mouse. Include posizionamento intelligente ai bordi dello schermo, throttling per performance ottimali e troncamento automatico del testo lungo a 200 caratteri.

Allineamento Centro

Centra tutto il testo della pagina per migliorare la leggibilità. Particolarmente utile per utenti con difficoltà di concentrazione o problemi di tracking visivo.

Allineamento Sinistra

Allinea tutto il testo a sinistra seguendo lo standard di lettura occidentale. Migliora la leggibilità e fornisce un punto di riferimento fisso per l'inizio di ogni riga.

Allineamento Destra

Allinea tutto il testo verso il margine destro della pagina. Utile per lingue che si leggono da destra a sinistra o per preferenze specifiche di lettura.

Maschera di Lettura

Crea una finestra di lettura che segue il movimento del mouse, oscurando il resto della pagina. Aiuta a mantenere la concentrazione sul testo che si sta leggendo, ideale per utenti con ADHD o difficoltà di attenzione.

Guida di Lettura

Mostra una linea guida orizzontale che segue il movimento del mouse. Facilita il tracciamento delle righe durante la lettura, particolarmente utile per utenti con dislessia.

Saturazione Bassa

Riduce l'intensità dei colori della pagina per renderli più tenui e meno aggressivi. Aiuta a ridurre l'affaticamento visivo e le distrazioni, particolarmente utile per sessioni di lettura prolungate.

Modalità Monocromatica

Converte l'intera pagina in scala di grigi, eliminando completamente i colori. Ideale per utenti con daltonismo severo o per chi preferisce una visualizzazione senza distrazioni cromatiche.

Saturazione Elevata

Intensifica i colori della pagina rendendoli più vividi e contrastati. Particolarmente utile per utenti ipovedenti che hanno bisogno di colori più intensi per distinguere meglio gli elementi.

Nascondi Immagini

Nasconde tutte le immagini e gli sfondi decorativi della pagina, mantenendo solo il contenuto testuale. Migliora la velocità di caricamento e riduce le distrazioni visive, facilitando la concentrazione sul testo.

Ferma Animazioni

Blocca tutte le animazioni e gli effetti di movimento presenti nella pagina. Essenziale per utenti con epilessia, disturbi dell'attenzione o sensibilità ai movimenti rapidi.

Disattiva Suoni

Silenzia automaticamente tutti gli elementi audio e video presenti nella pagina. Utile per evitare distrazioni sonore indesiderate e per utenti con sensibilità uditiva.

Suite di Test Completa

Questa sezione fornisce test dettagliati per tutte le funzionalità del widget di accessibilità. Ogni test include istruzioni specifiche e casi d'uso per verificare il corretto funzionamento di ogni componente del sistema.

Test dei Profili di Accessibilità

  1. Apri il widget di accessibilità cliccando sull'icona in basso a destra
  2. Testa ogni profilo nella sezione "Profili di accessibilità":
  3. Convulsioni e Epilessia: Verifica che si attivino automaticamente "Ferma animazioni" e "Saturazione bassa"
  4. ADHD: Controlla l'attivazione di "Ferma animazioni", "Saturazione bassa" e "Maschera di lettura"
  5. Cognitivo: Verifica l'aumento del font (+40%), "Guida di lettura" e "Ferma animazioni"
  6. Ipovedenti: Controlla l'aumento del font (+40%), "Saturazione elevata" e "Ferma animazioni"

Test delle Funzioni di Ridimensionamento

  1. Scala Contenuti: Usa i pulsanti +/- per modificare lo zoom della pagina
  2. Dimensione Caratteri: Testa l'aumento/diminuzione della dimensione del testo
  3. Altezza Righe: Verifica la modifica della spaziatura tra le righe
  4. Spaziatura Lettere: Controlla l'aumento/diminuzione dello spazio tra i caratteri
  5. Osserva come ogni modifica viene visualizzata in percentuale nel widget

Test della Lente di Ingrandimento

  1. Attiva la "Lente di ingrandimento del testo" nel widget
  2. Muovi il cursore sopra diversi tipi di testo in questa pagina
  3. Verifica il posizionamento intelligente del tooltip ai bordi dello schermo
  4. Testa la fluidità del movimento con movimenti rapidi e lenti del mouse
  5. Controlla che il tooltip mostri correttamente testo lungo (viene troncato a 200 caratteri)

Test delle Funzioni Visive

  1. Evidenzia Titoli: Attiva per vedere tutti i titoli (h1-h6) evidenziati
  2. Evidenzia Link: Verifica che tutti i link vengano evidenziati
  3. Allineamento Testo: Testa centro, sinistra e destra (solo uno attivo alla volta)
  4. Filtri Colore: Prova "Saturazione bassa", "Monocromatico" e "Saturazione elevata"
  5. Nota che i filtri colore sono mutuamente esclusivi

Test degli Strumenti di Lettura

  1. Maschera di Lettura: Attiva per vedere una striscia di lettura che segue il mouse
  2. Guida di Lettura: Verifica la linea guida orizzontale che segue il cursore
  3. Muovi il mouse su diversi paragrafi per testare entrambi gli strumenti
  4. Verifica che gli strumenti non interferiscano tra loro quando attivi contemporaneamente

Test della Gestione Contenuti

  1. Nascondi Immagini: Attiva per nascondere tutte le immagini e background
  2. Ferma Animazioni: Verifica che tutte le animazioni CSS vengano bloccate
  3. Disattiva Suoni: Controlla che tutti gli elementi audio/video vengano mutati
  4. Testa il ripristino di ogni funzione disattivandola

Esempi di Testo per il Testing

Testo Piccolo

Questo è un esempio di testo molto piccolo per testare la lente di ingrandimento e le funzioni di ridimensionamento. Prova ad aumentare la dimensione del carattere e attivare la lente per vedere le differenze.

Testo con Link

Questo paragrafo contiene diversi link per testare la funzione di evidenziazione. Attiva "Evidenzia Link" per vedere come vengono evidenziati tutti i collegamenti nella pagina.

Testo per Allineamento

Questo testo è perfetto per testare le funzioni di allineamento. Prova ad attivare "Allinea al centro", "Allinea a sinistra" o "Allinea a destra" per vedere come cambia la disposizione del testo.

Suggerimenti per il Testing

  • Reset: Usa il pulsante "Reset impost." per tornare alle impostazioni predefinite
  • Combinazioni: Testa diverse combinazioni di funzionalità per verificare la compatibilità
  • Persistenza: Le impostazioni vengono salvate automaticamente e ripristinate al ricaricamento
  • Performance: Muovi rapidamente il mouse per testare la fluidità del sistema
  • Responsive: Testa il widget su diverse dimensioni di schermo

Test di Integrazione e Compatibilità

Il widget è progettato per funzionare su qualsiasi sito web senza interferire con il design esistente. Testa le funzionalità su elementi in grassetto, testo in corsivo, testo sottolineato e altri elementi formattati per verificare la compatibilità. Il sistema utilizza selettori CSS specifici e tecniche di throttling per garantire performance ottimali anche su dispositivi meno potenti.

Risultati Attesi dei Test

  • Tutte le funzionalità devono attivarsi/disattivarsi correttamente
  • I profili devono attivare automaticamente le funzioni correlate
  • Le modifiche devono essere visibili immediatamente
  • Il sistema deve essere fluido e responsivo
  • Le impostazioni devono persistere tra le sessioni
  • Non devono verificarsi conflitti tra diverse funzionalità