Installazione

Metodo 1: Upload tramite WordPress

1. Scarica il file ZIP del plugin dalla tua area clienti
2. Accedi al pannello di amministrazione WordPress
3. Vai su Plugin → Aggiungi nuovo
4. Clicca su Carica plugin
5. Seleziona il file ZIP e clicca Installa ora
6. Attiva il plugin

Metodo 2: Upload via FTP

1. Estrai il file ZIP del plugin
2. Connettiti al tuo server via FTP
3. Carica la cartella usabilis in /wp-content/plugins/
4. Accedi al pannello WordPress e vai su Plugin
5. Trova Usabilis e clicca Attiva

Post-installazione

Dopo l'attivazione del plugin:

• Vai su Impostazioni → Usabilis
• Inserisci la tua chiave di licenza
• Configura le impostazioni del widget
• Verifica che il widget appaia correttamente sul frontend

Configurazione

Attivazione della licenza

1. Accedi a Impostazioni → Usabilis
2. Inserisci la chiave di licenza nel campo apposito
3. Clicca su Salva Licenza
4. Verifica che lo stato mostri "Licenza Attiva"

Configurazione del widget

Posizione del bottone

Puoi scegliere dove posizionare il bottone di apertura del widget:

• In basso a destra (default)
• In basso a sinistra
• Al centro a destra
• Al centro a sinistra

Email di supporto

Inserisci l'email che verrà mostrata nella dichiarazione di accessibilità per permettere agli utenti di contattarti.

Abilitare/Disabilitare il widget

Puoi temporaneamente disabilitare il widget deselezionando l'opzione "Mostra il pannello di accessibilità nel frontend".

Nuove Opzioni di Visibilità (v3.3.0+)

Nascondi su Mobile

Questa opzione ti permette di nascondere completamente il widget sui dispositivi mobili. Utile se:

• Hai un'app mobile dedicata con funzionalità di accessibilità integrate
• Il tuo design mobile utilizza approcci diversi per l'accessibilità
• Vuoi ottimizzare le performance su dispositivi con risorse limitate

Gestione delle Sezioni

Puoi ora scegliere esattamente quali sezioni del widget mostrare ai tuoi utenti:

Come configurare:

1. Vai su Impostazioni → Usabilis
2. Trova la sezione "Configurazione Widget"
3. Seleziona/deseleziona le checkbox per ogni sezione
4. Clicca su "Salva Configurazione"

Funzionalità del Widget

Profili di accessibilità

Controlli contenuto

Controlli colore

Strumenti di orientamento

Strumenti di accessibilità avanzati

Il Widget di Accessibilità

Come funziona

Il widget viene caricato automaticamente su tutte le pagine del tuo sito WordPress. Gli utenti possono:

1. Cliccare sul bottone di accessibilità per aprire il pannello
2. Selezionare un profilo preconfigurato o personalizzare singole impostazioni
3. Le impostazioni vengono salvate nel browser e applicate automaticamente nelle visite successive

Funzionalità "Leggi la pagina"

Come funziona la sintesi vocale

Quando l'utente attiva la funzione "Leggi la pagina":

1. Il cursore del mouse si trasforma in un indicatore di lettura
2. Cliccando su qualsiasi elemento testuale, il contenuto viene letto ad alta voce
3. Appare un mini player che mostra lo stato della lettura
4. L'elemento in lettura viene evidenziato visualmente
5. La lettura può essere interrotta in qualsiasi momento

Tipi di contenuto supportati

• Testo normale: Paragrafi, titoli, liste
• Link: Annuncia "Link:" seguito dal testo
• Pulsanti: Annuncia "Pulsante:" seguito dal testo
• Immagini: Legge il testo alternativo se presente
• Form: Legge le etichette dei campi

Scorciatoie da tastiera

Compatibilità browser

Il widget è compatibile con tutti i browser moderni:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Supporto sintesi vocale per browser

Personalizzazione

Personalizzazione colori (Pro/Enterprise)

Con una licenza Pro o Enterprise puoi personalizzare:

• Colore principale: Il colore del bottone e degli elementi attivi
• Dimensione icona: Piccola, Media, Grande o Molto Grande

// Le impostazioni vengono salvate automaticamente
// e applicate al widget in tempo reale

CSS personalizzato (Enterprise)

Con una licenza Enterprise puoi aggiungere CSS personalizzato per modificare completamente l'aspetto del widget:

/* Esempio: Cambiare il border radius del widget */
.wpap-section {
    border-radius: 0 !important;
}

/* Esempio: Font personalizzato per il titolo */
.wpap-sidebar-header h2 {
    font-family: 'Montserrat', sans-serif !important;
}

/* Esempio: Animazione personalizzata per il bottone */
.wpap-toggle-button {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Esempio: Personalizzare il mini player di lettura */
.wpap-reading-mini-player {
    background: #1a202c !important;
    border-radius: 20px !important;
}

/* Esempio: Stile per testo evidenziato durante la lettura */
.wpap-reading-active {
    background: rgba(52, 179, 228, 0.2) !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
}

White Label (Enterprise)

Le licenze Enterprise rimuovono automaticamente il branding "Sviluppato da STUDIO 09" dal widget.

Controllo Visibilità e Sezioni

Visibilità per Dispositivo

Nascondere su Mobile

Il widget può essere completamente nascosto sui dispositivi mobili. Questo è utile per:

• App Mobile: Se hai un'app con funzionalità di accessibilità integrate
• Design Responsive: Se il tuo design mobile usa approcci diversi
• Performance: Per ottimizzare il caricamento su dispositivi con connessioni lente

Come funziona il rilevamento mobile?

Il sistema utilizza tre metodi per identificare i dispositivi mobili:

1. User Agent: Rileva Android, iOS, Windows Phone, ecc.
2. Touch Screen: Verifica la presenza di capacità touch
3. Dimensione Schermo: Considera mobile dispositivi con larghezza ≤ 768px

// Il widget verifica automaticamente se è su mobile
if (config.hideOnMobile && isMobileDevice()) {
    // Widget non viene caricato
    return;
}

Controllo Granulare delle Sezioni

Perché controllare le sezioni?

Non tutti i siti hanno le stesse esigenze. Alcuni esempi:

• Blog minimalista: Potresti volere solo i controlli del testo
• Sito aziendale: Solo i profili preimpostati per semplicità
• E-commerce: Focus su contrasto e leggibilità
• Portale educativo: Tutte le funzionalità attive

Best Practices

Esempi di Configurazione

Configurazione "Essenziale"

✓ Profili di Accessibilità
✗ Sezione CONTENUTO
✗ Sezione COLORI
✗ Sezione ORIENTAMENTO

Ideale per: Siti con design già ottimizzato che vogliono offrire solo profili rapidi.

Configurazione "Lettura"

✗ Profili di Accessibilità
✓ Sezione CONTENUTO
✗ Sezione COLORI
✓ Sezione ORIENTAMENTO

Ideale per: Blog, siti di news, portali di documentazione.

Configurazione "Visuale"

✗ Profili di Accessibilità
✗ Sezione CONTENUTO
✓ Sezione COLORI
✗ Sezione ORIENTAMENTO

Ideale per: Gallerie, portfolio, siti con forte componente visiva.

Domande Frequenti

Risoluzione Problemi

Il widget non appare sul sito

1. Verifica che il plugin sia attivo
2. Controlla che la licenza sia valida e attiva
3. Assicurati che l'opzione "Mostra il pannello di accessibilità" sia attiva
4. Svuota la cache del sito e del browser
5. Controlla la console del browser per eventuali errori JavaScript

Errore "Licenza non valida"

• Verifica di aver copiato correttamente la chiave di licenza
• Controlla che la licenza non sia scaduta
• Assicurati che il dominio sia autorizzato per questa licenza
• Prova a cliccare su "Verifica Ora" per aggiornare lo stato

La funzione "Leggi la pagina" non funziona

• Verifica che il browser supporti l'API Web Speech (vedi tabella compatibilità)
• Controlla che l'audio non sia disattivato nel browser
• Su alcuni browser mobile, la sintesi vocale richiede un'interazione dell'utente prima di funzionare
• Assicurati che non ci siano estensioni del browser che bloccano la sintesi vocale

Conflitti con altri plugin

Se riscontri problemi di compatibilità:

1. Disattiva temporaneamente gli altri plugin uno alla volta
2. Identifica quale plugin causa il conflitto
3. Contatta il supporto con i dettagli del conflitto

Problemi di performance

• Verifica che il tuo hosting soddisfi i requisiti minimi
• Utilizza un plugin di caching (W3 Total Cache, WP Rocket)
• Abilita la compressione GZIP sul server
• Considera l'uso di una CDN
• Se usi "Disabilita animazioni", alcune funzionalità come linea di lettura e lente potrebbero essere automaticamente disabilitate

Debug mode

Per abilitare il debug mode e ottenere più informazioni:

// wp-config.php
define('WPAP_DEBUG', true);

Changelog