Quando attivi l’opzione “Mostra icona di ricerca” nel menu dei siti WordPress con tema Divi, gli strumenti come PageSpeed Insights di Google evidenziano un problema di accessibilità. La segnalazione indica che “I pulsanti non hanno nomi accessibili” e fa riferimento al codice del bottone dell’icona di ricerca, contrassegnato come:
<button type="button" class="et_pb_menu__icon et_pb_menu__search-button">
Per risolvere questa problematica e fornire un nome significativo al bottone, puoi sfruttare l’attributo aria-label. Ma cosa è esattamente aria-label e perché è importante nell’ambito dell’accessibilità?
L’attributo aria-label è uno strumento chiave per migliorare l’accessibilità dei siti web, specialmente per gli utenti con disabilità visive o altre difficoltà nell’utilizzo delle interfacce digitali. Esso infatti permette di fornire una descrizione testuale a elementi non testuali, come icone o pulsanti, che altrimenti potrebbero risultare ambigui o persino incomprensibili per gli screen reader e altri dispositivi di assistenza.
Nel caso del bottone dell’icona di ricerca, l’aggiunta dell’attributo aria-label consente di specificare chiaramente la funzione del pulsante, migliorando così l’esperienza di chi utilizza tecnologie di assistenza. Purtroppo Divi, uno dei più noti temi di WordPress, non offre ancora un modo diretto per aggiungere l’attributo aria-label tramite le impostazioni.
Tuttavia, puoi ottenere lo stesso risultato utilizzando la funzione et_core_esc_previously, fornita da Divi stesso. Dato che questa funzione ha un solo parametro che contiene tutto l’output della pagina, puoi sfruttarla per trasformare qualsiasi stringa grazie alla funzione PHP str_replace.
Ecco come puoi applicare questa soluzione al tuo sito:
Apri il file functions.php del tuo tema figlio (child theme). Se non hai familiarità con i temi figli, puoi consultare l’articolo Come modificare un tema WordPress con il tema figlio per ulteriori dettagli.
Nel file functions.php, inserisci il seguente codice:
if (!(function_exists('et_core_esc_previously'))) {
function et_core_esc_previously($passthru) {
$passthru = str_replace('class="et_pb_menu__icon et_pb_menu__search-button"></button>',
'class="et_pb_menu__icon et_pb_menu__search-button" alt="cerca" aria-label="cerca"></button>', $passthru);
return $passthru;
}
}
In questo codice, la funzione str_replace() serve a individuare il codice del bottone interessato e a sostituirlo con una versione più completa, includendo l’attributo alt e l’attributo aria-label.
Oltre all’esempio specifico dell’icona di ricerca, l’attributo aria-label può essere utilizzato in altre situazioni per migliorare l’accessibilità. Ad esempio, puoi applicare lo stesso principio per differenziare pulsanti con etichette simili, come il classico “Leggi tutto”. Utilizzando questa tecnica, potrai rendere più chiara la lettura da parte dei dispositivi di assistenza e garantire un’esperienza più inclusiva per tutti gli utenti.
Come puoi capire, anche un piccolo accorgimento come l’aggiunta della descrizione testuale a un’icona, può contribuire a migliorare l’esperienza di navigazione per tanti visitatori che altrimenti avrebbero avuto grandi difficoltà.
Come posso aiutarti
Se hai bisogno di altre informazioni o di aiuto per migliorare l’accessibilità del tuo sito web, contattami, sarò lieto di offrirti la mia consulenza.
Per approfondire:
- Visita la sezione dedicata a WAI-ARIA sul sito del W3C