Se utilizzi il tema Divi per i tuoi siti WordPress, avrai notato che sui dispositivi mobili, come smartphone, tablet o qualsiasi altro dispositivo touch, non è possibile ridimensionare il contenuto tramite il movimento di pinch. Questo significa che se appoggi due dita sullo schermo e le allarghi non accade nulla mentre su altri siti, con lo stesso gesto, puoi ingrandire testi e immagini.
Questo è un peccato perché Divi è un tema molto popolare dato che è ricco di funzionalità e offre un sistema avanzato di costruzione delle pagine (il Divi Builder). Anch’io lo utilizzo per i siti che propongo ai miei clienti quindi ho cercato una soluzione che consentisse di attivare il ridimensionamento con il “pinch”.
Perché è importante poter ingrandire i contenuti di un sito
Per capire l’importanza di questa funzione, immagina che un visitatore del tuo sito web abbia difficoltà visive. Se può ingrandire il testo e le immagini può utilizzare il sito, altrimenti no. E non parlo solo di chi ha una disabilità, ma anche di chi sta utilizzando uno schermo molto piccolo, o si trova in una condizione di luce eccessiva che rende difficoltosa la lettura. O ancora pensa a una locandina caricata sulla pagina di un evento. Dallo smartphone è impossibile leggere il contenuto senza ingrandire l’immagine.
Questi esempi mostrano che progettare siti accessibili è fondamentale e di questo si stanno occupando sempre di più anche i motori di ricerca. Google, ad esempio, da un po’ di tempo segnala ciò che impedisce l’utilizzo corretto del sito anche dal punto di vista dell’accessibilità e quindi della qualità dell’esperienza di navigazione.
Come capire cosa blocca il ridimensionamento
Grazie a Google ho scoperto dove risiede il problema del pinch disattivato: il PageSpeed di Google infatti analizza il sito identificando potenziali problemi di accessibilità.
Uno dei primi errori di accessibilità individuati da PageSpeed è l’utilizzo dell’attributo user-scalable=”no” all’interno dell’elemento , o l’attributo maximum-scale impostato su un valore inferiore a 5. L’impostazione user-scalable=”no” impedisce agli utenti di eseguire lo zoom dei contenuti utilizzando il movimento di “pinch” sullo schermo.
Come abilitare la funzione di pinch
Per cambiare l’impostazione user-scalable=”no” e quindi migliorare l’accessibilità nel tema Divi, è necessario intervenire sul file functions.php del tema figlio (child theme). Per approfondire l’argomento del child theme, leggi l’articolo Come modificare un tema WordPress con il tema figlio
Per procedere serve togliere dalla testata header la definizione <meta name=”viewport“> per poi inserire il nuovo codice che permette il ridimensionamento. Il codice da inserire è questo:
// Rimuove et_add_viewport_meta dalla fase wp_head
function remove_divi_actions() {
remove_action( 'wp_head', 'et_add_viewport_meta' );
}
add_action('init','remove_divi_actions');
// Aggiunge un nuovo viewport
function et_add_viewport_meta_custom(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />';
}
add_action( 'wp_head', 'et_add_viewport_meta_custom' );
Nel codice, abbiamo aggiunto un nuovo viewport che consente di ridimensionare il contenuto tramite il movimento di “pinch” sullo schermo. L’attributo maximum-scale=2.0 permette un ingrandimento massimo del doppio rispetto alla visualizzazione predefinita. Tuttavia, è possibile personalizzare questo valore in base alle esigenze specifiche del progetto.
L’accessibilità è un elemento fondamentale da considerare nello sviluppo di qualsiasi sito web o applicazione, e la possibilità di ridimensionare il contenuto su dispositivi touch è uno dei tanti aspetti che contribuiscono a offrire un’esperienza utente inclusiva.
Attraverso modifiche mirate, come quelle descritte sopra per il tema Divi, è infatti possibile contribuire a rendere il proprio sito fruibile per un pubblico più ampio, anche quando la piattaforma che stiamo utilizzando non lo consente nativamente.
Come posso aiutarti
Se hai bisogno di altre informazioni o di un aiuto per migliorare l’accessibilità del tuo sito web, contattami per una consulenza. Ti aiuterò a migliorare le prestazioni del tuo sito e il suo livello di accessibilità.