Come migliorare l’accessibilità del vostro sito WordPress

Immaginate di visitare un sito web per poi scoprire che non riuscite a leggere il testo, a navigare nei menu o a capire il contenuto. Purtroppo questa è una realtà quotidiana per molte persone con disabilità.

Quando si costruisce un sito web, l’accessibilità viene spesso trascurata, creando un blocco tra i contenuti e molti visitatori. Secondo la nostra esperienza, questa situazione può risultare poco accogliente ed esclusiva.

Garantire l’accessibilità del sito web non è solo una questione di conformità legale, ma assicura anche un’esperienza utente (UX) eccezionale per tutti i visitatori, indipendentemente dalle loro esigenze o capacità.

In questo articolo vi mostreremo come migliorare l’accessibilità del vostro sito web WordPress.

Perché l’accessibilità è importante per il mio sito WordPress?

Nel web design, l’accessibilità si riferisce alle tecniche utilizzate per rendere un sito web più facile da usare per le persone con disabilità. Alcuni visitatori utilizzano tecnologie assistive per navigare sul web, come gli screen reader per le persone con disabilità visive e la navigazione con la tastiera per le persone che non possono usare il mouse.

Esistono alcune buone pratiche comuni raccomandate dagli esperti per rendere i siti web più accessibili. Esse contribuiscono a rendere i siti più inclusivi e facili da usare per tutti, indipendentemente dalle capacità.

Dando priorità all’accessibilità, un maggior numero di persone potrà navigare nel vostro sito WordPress ed esplorare i vostri contenuti. Se gestite un negozio online, aumenterete anche le possibilità di convertire gli utenti in clienti.

L’accessibilità è importante anche per l’ottimizzazione dei motori di ricerca (SEO). Google apprezza i siti web con una buona facilità d’uso. Oltre a rendere il vostro sito più reattivo per i dispositivi mobili, potete anche dare priorità all’inclusività nel vostro web design per migliorare le classifiche.

Inoltre, se siete proprietari di un sito web aziendale e il front-end del vostro sito è inaccessibile, potreste incorrere in conseguenze legali.

L’Americans with Disabilities Act (ADA) stabilisce che i consumatori possono presentare un reclamo se un sito non è conforme alle linee guida sull’accessibilità. Inoltre, la vostra reputazione potrebbe essere rovinata, con conseguenti perdite finanziarie.

Come fa WordPress a rendere il mio sito web più accessibile?

WordPress dispone di diverse funzionalità integrate per aiutare gli utenti a rendere accessibili i propri siti web. Ad esempio, per impostazione predefinita, è possibile aggiungere alle immagini un testo alternativo (alt text) e gli attributi del titolo, in modo che gli screen reader possano leggerli ad alta voce per gli utenti con problemi di vista.

WordPress ha anche reso obbligatorio che tutto il codice nuovo e aggiornato di WordPress segua i suoi standard di codifica dell’accessibilità. Questo per garantire che gli sviluppatori di WordPress rispettino le migliori pratiche per l’accessibilità quando creano temi e plugin.

Inoltre, WordPress include funzioni che facilitano la creazione di siti web da parte di utenti disabili, come la modalità di accessibilità per l’aggiunta di widget.

Per ulteriori informazioni, vi consigliamo di seguire il tag Accessibilità nella pagina Make WordPress Core.

Tenendo conto di tutto ciò, WordPress non è completamente accessibile già di per sé. In qualità di proprietari di un sito web, è importante adottare misure supplementari per aiutare il vostro sito a soddisfare gli standard di accessibilità.

Abbiamo suddiviso questa guida in alcuni semplici consigli per migliorare l’accessibilità del vostro sito WordPress. Potete utilizzare questi collegamenti rapidi per navigare verso una sezione specifica:

1. Familiarizzare con le Linee guida per l’accessibilità dei contenuti web (WCAG)

Per prima cosa, vi consigliamo di leggere le Linee guida per l’accessibilità dei contenuti Web (WCAG). Si tratta degli standard definiti dalla W3C Web Accessibility Initiative (WAI) per rendere più accessibili i siti web degli utenti.

Per cominciare, potete consultare gli aggiornamenti delle WCAG 2.1 e WCAG 2.2. Se entrambi i documenti vi sembrano troppo lunghi da leggere, non esitate a mettere tra i preferiti questo riferimento rapido.

2. Utilizzare un tema WordPress adatto all’accessibilità

I temi pronti per l’accessibilità soddisfano gli standard minimi di accessibilità stabiliti dal team di revisione dei temi di WordPress.

L’utilizzo di un tema WordPress accessibile non significa che il vostro sito web sarà automaticamente conforme a tutti i requisiti di accessibilità, poiché dovrete comunque apportare alcune modifiche per conto vostro. Tuttavia, può darvi la possibilità di iniziare a rendere il vostro sito web più accessibile.

Come minimo, un tema pronto per l’accessibilità avrà:

• Menu che possono essere navigati solo con la tastiera.
• Un buon contrasto di colori che renda il contenuto leggibile per gli utenti con problemi di vista.
• HTML semanticamente corretto, che aiuta le tecnologie assistive a comprendere il contenuto e la struttura di una pagina web.

Se volete fare un ulteriore passo avanti, potete anche controllare se il tema contiene attributi ARIA. Questi attributi sono informazioni aggiuntive che integrano l’HTML del tema per rendere un sito web ancora più facile da navigare per le tecnologie assistive.

Il modo più semplice per cercare un tema adatto all’accessibilità è andare su Aspetto ” Temi nella dashboard di WordPress. Quindi, fate clic su “Aggiungi un nuovo tema”.

Da qui, selezionare “Filtro caratteristiche” e scegliere “Accessibilità pronta”.

Non esitate ad aggiungere altri filtri per trovare il tema più adatto alle vostre esigenze.

A questo punto, scorrere verso il basso e fare clic su “Applica filtri”.

Sullo schermo appariranno alcuni temi pronti per l’accessibilità.

Per ulteriori consigli sui temi, date un’occhiata alle scelte dei nostri esperti sui migliori temi WordPress.

3. Installare un plugin per l’accessibilità di WordPress

Un plugin per l’accessibilità di WordPress aggiunge funzioni utili ai visitatori disabili per navigare nel vostro sito web.

Un plugin per l’accessibilità di WordPress che consigliamo è WP Accessibility. Tra le cose che questo plugin può fare ci sono:

• Aggiunta di una barra degli strumenti per l’accessibilità
• Rilevare se il tema è pronto per l’accessibilità
• Tracciare l’utilizzo delle funzioni di accessibilità del vostro sito web per poterle valutare.

Per prima cosa, è necessario installare e attivare il plugin su WordPress.

Dopo l’attivazione, è necessario andare su Impostazioni ” WP Accessibility per configurare il plugin.

Diamo un’occhiata a ciascuna sezione della pagina delle impostazioni.

Aggiungi link di salto

Nella prima sezione delle impostazioni del plugin, è possibile utilizzare i link di salto sul proprio sito web; questa impostazione è abilitata per impostazione predefinita. Un link di salto consente agli utenti di passare direttamente alla sezione di contenuto di un post o di una pagina.

Si tratta di una funzione estremamente utile per le persone che utilizzano gli screen reader. Senza un link di salto, dovranno ascoltare tutto ciò che viene visualizzato sul vostro sito web, compresi i menu di navigazione, prima di raggiungere la parte dei contenuti.

Se il vostro tema utilizza già i link di salto, vedrete una notifica di conferma.

Barra degli strumenti dell’accessibilità

Il plugin WP Accessibility è dotato di una barra degli strumenti per l’accessibilità.

Quando lo si attiva, il plugin aggiunge una barra degli strumenti al sito web, dove gli utenti possono ridimensionare i caratteri o visualizzare il sito in modalità colore ad alto contrasto.

In questo modo gli utenti possono selezionare le opzioni necessarie per facilitare la lettura della pagina.

Per attivare la barra degli strumenti, è sufficiente selezionare le caselle di controllo “Dimensione carattere” e “Contrasto”.

Sono presenti anche impostazioni che consentono di controllare la dimensione e il posizionamento dei caratteri della barra degli strumenti.

Se si modificano queste impostazioni, fare clic sul pulsante “Aggiorna impostazioni della barra degli strumenti” per memorizzarle.

Ecco come appare la barra degli strumenti sul nostro sito web di prova.

Correzioni per l’accessibilità

WP Accessibility fornisce anche diverse correzioni per l’accessibilità che potrebbero risolvere potenziali problemi sul vostro sito. Potete esaminare ogni opzione e vedere se ne avete bisogno.

Alcune impostazioni consigliate saranno selezionate per impostazione predefinita. Queste opzioni impediscono ai link di aprirsi in nuove finestre, visualizzano un errore quando si invia una ricerca vuota e rimuovono l’attributo HTML tabindex quando non è necessario per semplificare la navigazione da tastiera.

Se si utilizza un tema adatto all’accessibilità che ha già abilitato alcune di queste funzioni, verrà visualizzato un messaggio di conferma nella parte superiore della sezione.

Non dimenticate di fare clic sul pulsante “Aggiorna impostazioni varie” per memorizzare le modifiche.

Caratteristiche di accessibilità

Il plugin offre anche alcune opzioni per rendere i contenuti più accessibili.

Il primo gruppo di impostazioni rende le immagini più facili da gestire per chi utilizza gli screen reader.

Esistono anche opzioni per visualizzare i sommari nella parte superiore dei post e delle pagine. In questo modo, i lettori di schermo possono ascoltare un riassunto del contenuto prima di decidere di ascoltare l’intero articolo.

Se si modifica una di queste opzioni, ricordarsi di fare clic sul pulsante “Aggiorna funzioni di accessibilità”.

Esperienza di test e amministrazione

Successivamente, troverete alcune impostazioni che vi permetteranno di migliorare l’accessibilità dell’area di amministrazione di WordPress e vi aiuteranno a eseguire i test.

Questa sezione è più tecnica, quindi assicuratevi di consultare la documentazione del plugin prima di selezionare le caselle.

Assicurarsi di fare clic sul pulsante “Aggiorna strumenti di accessibilità” per salvare le modifiche.

Rimuovere gli attributi del titolo

Questa sezione consente di rimuovere l’attributo title dalle nuvole di tag.

L’attributo title è considerato inutile da alcuni esperti di accessibilità. La maggior parte degli screen reader di solito ignora l’attributo title e legge invece il testo di riferimento.

Questa impostazione è attiva per impostazione predefinita, ma se la si modifica, assicurarsi di fare clic sul pulsante “Aggiorna impostazioni attributi titolo”.

4. Controllare il contrasto dei colori del sito web

Per contrasto cromatico si intende la differenza tra il colore del testo e quello dello sfondo. È una parte molto importante dell’accessibilità dei siti web perché può influire sulla leggibilità dei contenuti del sito per le persone con problemi di vista e daltonismo.

Per soddisfare gli standard di accessibilità del web, il testo regolare deve avere un contrasto elevato, pari ad almeno 4,5 a 1. Ciò significa che il testo deve essere 4,5 volte più luminoso dello sfondo.

Per i testi più grandi, il requisito è leggermente inferiore, pari a 3 a 1. Ciò significa che è accettabile un contrasto leggermente inferiore. La stessa regola si applica alla grafica e agli elementi dell’interfaccia utente, come i bordi dei moduli.

Il plugin WP Accessibility ha un controllore del contrasto di colore incorporato che si può utilizzare.

Nelle impostazioni del plugin, è sufficiente scorrere fino alla sezione Color Contrast Tester e scegliere un colore di primo piano (il colore che si utilizzerà per il testo) e il suo colore di sfondo.

Quindi, fare clic su “Controlla contrasto colore”.

Il plugin vi dirà se i colori superano o meno il test di contrasto.

Ecco come appare il risultato:

In alternativa, è possibile utilizzare il programma gratuito WebAIM Contrast Checker. Come per lo strumento precedente, è sufficiente selezionare un colore di primo piano e un colore di sfondo.

Questo strumento non solo verifica il contrasto dei colori, ma mostra anche l’aspetto dei colori come testo normale e di grandi dimensioni, nonché come oggetti grafici e componenti dell’interfaccia utente.

Per maggiori dettagli, potete consultare la nostra guida su come scegliere lo schema di colori perfetto per il vostro sito WordPress.

5. Aggiungere testo alternativo alle immagini

Oltre a essere utile per i motori di ricerca, il testo alt è utile per gli screen reader per descrivere le immagini alle persone con disabilità visive.

In precedenza abbiamo accennato al fatto che WordPress dispone di una funzione integrata per l’aggiunta di testo alt. Il processo è piuttosto semplice e potete leggere tutte le informazioni su come configurarlo nelle guide seguenti:

• Guida per principianti al SEO delle immagini – Ottimizzare le immagini per i motori di ricerca
• Testo alternativo dell’immagine e titolo dell’immagine in WordPress: qual è la differenza?

6. Aggiungere etichette a tutti i campi del modulo

Se nel vostro sito web sono presenti dei moduli, dovrete assicurarvi di utilizzare le etichette appropriate per ogni elemento del modulo. Ciò include i campi del modulo, i pulsanti, i menu e così via.

Le WCAG raccomandano di aggiungere etichette a tutti gli elementi del modulo per facilitare l’identificazione e la trasmissione delle informazioni su ciascuno di essi da parte degli strumenti assistivi.

Inoltre, aggiungere etichette chiare e descrittive è una buona pratica di web design. Aiutando gli utenti a capire a cosa serve ogni campo del modulo, è meno probabile che si verifichino errori e un maggior numero di persone sarà in grado di inviare i moduli.

Se non siete sicuri di come creare ottimi moduli, vi consigliamo di dare un’occhiata a WPForms. È il miglior costruttore di moduli per WordPress che rende super facile personalizzare i moduli in base alle vostre esigenze, anche migliorandoli per l’accessibilità.

Per saperne di più su WPForms, leggete la nostra recensione di WPForms. Inoltre, date un’occhiata a queste guide su come creare moduli in WordPress:

• Come creare un modulo di contatto in WordPress (passo dopo passo)
• Come creare un modulo di prenotazione in WordPress
• Come creare un modulo di registrazione utente personalizzato in WordPress

7. Utilizzare tag di intestazione corretti nei contenuti

I tag di intestazione sono tag HTML che possono contrassegnare i titoli o i sottotitoli di una pagina web. In questo modo, i contenuti sono molto più organizzati e facili da seguire.

Questi tag aiutano anche gli strumenti come gli screen reader a generare uno schema navigabile per gli utenti con disabilità visive. In questo modo potranno saltare da una sezione all’altra e comprendere la struttura complessiva del contenuto.

Se non siete sicuri di come sfruttare i tag di intestazione, potete leggere la nostra guida su come utilizzare correttamente i tag di intestazione in WordPress.

8. Utilizzare un testo di ancoraggio descrittivo

Il testo di ancoraggio o di collegamento è sostanzialmente la parola o la frase cliccabile di un link. Di solito si può capire quale testo è collegato perché è di colore diverso.

Spesso i blogger utilizzano il testo del link “clicca qui” o “leggi tutto” per indirizzare i visitatori a una pagina.

Questa non è una buona pratica per l’accessibilità, perché non fornisce alcuna informazione sulla destinazione del collegamento. Ciò rende difficile per le persone che utilizzano tecnologie assistive capire lo scopo del collegamento.

Per questo motivo è meglio utilizzare un testo di ancoraggio descrittivo. Ciò significa utilizzare parole che descrivono il contenuto di cui si parla quando si clicca sul link.

Ad esempio, supponiamo di voler aggiungere un link a un articolo sul miglior hosting WordPress in questa frase: “Seguite questa guida per conoscere i migliori servizi di hosting WordPress sul mercato”.

Invece di aggiungere il link a “Segui questa guida” o in qualsiasi altro punto della frase, dovreste inserirlo in “migliori servizi di hosting WordPress“. In questo modo, l’utente avrà una panoramica di ciò che troverà nel contenuto collegato.

Per maggiori informazioni sui link e sul testo di ancoraggio, consultate la nostra guida per principianti sui link in WordPress.

9. Aggiunta di didascalie o trascrizioni a contenuti video e audio

Una delle difficoltà principali per gli utenti con disabilità uditive è l’incapacità di comprendere i contenuti parlati nei video e nell’audio. Ecco perché molti creatori di contenuti video e podcaster aggiungono didascalie o trascrizioni.

Noi di WPBeginner sconsigliamo vivamente di caricare video sul proprio sito web perché possono rallentare il sito. È meglio utilizzare servizi come YouTube o Vimeo, entrambi dotati di strumenti integrati per l’aggiunta di didascalie.

Per quanto riguarda i contenuti audio, si può prendere in considerazione l’utilizzo di un servizio di trascrizione per convertire facilmente il parlato in testo. In questo modo, non sarà necessario creare manualmente una versione scritta dei contenuti audio.

Per maggiori informazioni, consultate il nostro elenco dei migliori servizi di trascrizione.

10. Eseguire test di usabilità e accessibilità

Se avete messo in pratica tutti i suggerimenti di questa guida, il passo finale è quello di eseguire test di usabilità e accessibilità sul vostro sito WordPress.

Questo test può aiutarvi a identificare eventuali problemi residui e a rendere il vostro sito web facile da usare e accessibile a tutti.

WebAIM dispone di uno strumento di valutazione dell’accessibilità del web (WAVE) che può essere utilizzato gratuitamente.

È sufficiente digitare il nome del dominio del vostro sito web e lo strumento identificherà tutti i problemi di accessibilità.

È anche possibile utilizzare uno scanner di accessibilità. Vi consigliamo di consultare Accessibility Checker di Equalize Digital. È disponibile anche una versione gratuita del plugin per scansionare un numero illimitato di post e pagine del vostro sito web.

Dopo aver installato il plugin, è sufficiente andare nell’editor di blocco della pagina o del post. Se si scorre in basso fino alla sezione dei meta box, si troverà un Accessibility Checker che identifica i problemi di accessibilità.

Un’altra opzione è quella di eseguire una verifica UX, che in pratica significa controllare il vostro sito web per vedere se ha una buona esperienza utente. Per maggiori informazioni, consultate la nostra guida alla verifica UX.

Infine, vi invitiamo a chiedere il feedback degli utenti. Anche se i test possono dare risultati, il feedback dei visitatori effettivi che utilizzano le funzioni di accessibilità del vostro sito può fornire indicazioni molto più precise.

UserFeedback è il miglior plugin per questo lavoro. Consente di creare sondaggi per raccogliere le opinioni e i pensieri degli utenti. Ci sono anche modelli per il feedback sul design del sito web, così non dovrete creare il sondaggio da zero.

Per ulteriori informazioni, consultate la nostra guida su come ottenere un feedback sul design di un sito web in WordPress.

Guide di esperti sull’accessibilità di WordPress

Ora che sapete come migliorare l’accessibilità del vostro sito, potreste voler consultare altre guide relative ai problemi di accessibilità di WordPress:

• Come aggiungere i widget di WordPress in modalità accessibilità
• Come scegliere uno schema di colori perfetto per il vostro sito WordPress
• Come aggiungere un ridimensionamento dei caratteri in WordPress per l’accessibilità
• Come aggiungere facilmente l’attributo titolo alle immagini in WordPress
• Come evidenziare il testo in WordPress (Guida per principianti)
• Testo alternativo dell’immagine e titolo dell’immagine in WordPress: qual è la differenza?

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.