Accessibilità

Profili, Leggibilità, Contrasto, Font, Animazioni, Navigazione tastiera

Descrizione: Strumento che permette agli utenti di personalizzare l'interfaccia del sito web in base a specifiche esigenze visive, cognitive o motorie, garantendo una navigazione più confortevole per tutti.

A cosa serve? (Esempi pratici)

Questo strumento è fondamentale per garantire che il tuo sito web sia utilizzabile dal più ampio pubblico possibile, inclusi utenti con disabilità temporanee o permanenti.

  • Migliorare la leggibilità: Un utente ipovedente può aumentare la dimensione del testo e attivare l'alto contrasto con un solo clic.
  • Ridurre le distrazioni: Un utente con dislessia o ADHD può attivare un font specifico o una maschera di lettura per focalizzarsi meglio sul contenuto.
  • Garantire la sicurezza: Persone sensibili a stimoli visivi possono disattivare animazioni e ridurre la saturazione dei colori per una navigazione più sicura.

Funzionalità principali

Il pannello di accessibilità è richiamabile tramite un'icona flottante sul lato dello schermo e divide le sue funzioni in quattro categorie principali:

1. Profili di accessibilità (Impostazioni rapide)

Questi profili attivano automaticamente una combinazione di strumenti ottimizzati per specifiche esigenze, permettendo di configurare il sito istantaneamente. L'attivazione di un profilo disattiva automaticamente gli altri.

ProfiloScopo
Sicuro per epilessiaRimuove animazioni, effetti di movimento e riduce l'uso di colori saturi.
Per ipovedentiAumenta il contrasto e la dimensione del testo per migliorare la visibilità.
Per disabilità cognitiveEvidenzia i link e i titoli principali per migliorare la messa a fuoco e l'orientamento.
Amichevole per ADHDAttiva strumenti che riducono le distrazioni visive, come la maschera di lettura.
Per non vedentiOttimizza la navigazione tramite tastiera e l'uso di font leggibili per gli screen reader.

2. Regolazione contenuti

Questi strumenti agiscono direttamente sulla presentazione del testo.

  • Aumenta/Riduci testo: Regola la dimensione del font su tutta la pagina, mantenendo la proporzione originale.
  • Font leggibile: Applica un font standard e chiaro (Arial) su tutti gli elementi testuali.
  • Font dislessia: Applica un font specificamente progettato per facilitare la lettura a persone con dislessia.
  • Evidenzia titoli: Aggiunge un'evidenziazione visiva ai titoli (H1, H2, ecc.) per facilitare la scansione della pagina.
  • Sottolinea link: Assicura che tutti i collegamenti ipertestuali siano chiaramente sottolineati.

3. Regolazione visuale

Questi strumenti modificano l'aspetto cromatico e dinamico della pagina.

  • Contrasto scuro: Applica un tema scuro (modalità notte) su tutto il sito.
  • Alto contrasto: Aumenta drasticamente il contrasto tra testo e sfondo.
  • Bassa saturazione: Riduce l'intensità dei colori.
  • Nascondi immagini: Occulta tutte le immagini decorative e fotografiche per ridurre il carico visivo.
  • Riduci animazioni: Disattiva gli effetti di transizione e movimento.

4. Navigazione e orientamento

Questi strumenti assistono l'utente nel seguire il contenuto e nell'interazione con il mouse.

  • Lente d'ingrandimento: Ingrandisce il testo su cui si posiziona il cursore del mouse.
  • Maschera di lettura: Oscura gran parte dello schermo, lasciando visibile solo una stretta fascia orizzontale che segue il cursore, aiutando a mantenere la concentrazione sulla riga corrente.
  • Guida alla lettura: Fornisce una linea orizzontale che segue il cursore per aiutare a tracciare la riga di testo.
  • Cursore nero/bianco grande: Aumenta la dimensione del cursore del mouse e ne cambia il colore per renderlo più visibile.

Come si configura

Il modulo non richiede alcuna configurazione da parte dell'amministratore, in quanto è progettato per essere utilizzato direttamente dall'utente finale.

Nota importante: Tutte le impostazioni scelte dall'utente vengono salvate nel suo browser. Questo significa che, una volta attivate, le preferenze di accessibilità rimarranno attive ogni volta che l'utente tornerà sul sito, fino a quando non verranno disattivate o reimpostate.

Integrazioni automatiche

Accesso rapido e persistenza

Il pannello di accessibilità è sempre disponibile tramite un'icona flottante. Le impostazioni scelte vengono applicate immediatamente e mantenute attive anche dopo aver chiuso e riaperto il browser.

Navigazione assistita

Il modulo aggiunge automaticamente un link "Salta al contenuto principale" all'inizio della pagina. Questo è essenziale per gli utenti che navigano tramite tastiera o screen reader, permettendo loro di bypassare rapidamente gli elementi di navigazione e accedere subito al contenuto centrale della pagina.

Reimpostazione

È sempre disponibile un pulsante Reimposta nel pannello, che annulla tutte le modifiche apportate e ripristina l'aspetto predefinito del sito.