Hai mai immaginato di visitare un sito web e scoprire di non riuscire a leggere il testo, usare i menu o capire qualcosa? È difficile da credere, ma questa è la realtà per molte persone con disabilità ogni singolo giorno.
Quando le persone creano siti web, l'accessibilità è qualcosa che spesso viene trascurato. Ma non dovrebbe esserlo, perché può creare una barriera tra i tuoi contenuti e molti dei tuoi visitatori. Secondo la nostra esperienza, quando un sito web non è accessibile, può sembrare davvero poco accogliente e persino esclusivo.
Assicurarsi che il tuo sito sia accessibile non significa solo seguire le regole, ma anche garantire che tutti abbiano un'ottima esperienza sul tuo sito. Si tratta di essere inclusivi e di fornire un'esperienza utente eccezionale a tutti i tuoi visitatori, indipendentemente dalle loro esigenze o abilità.
Quindi, se sei pronto a rendere il tuo sito web accogliente per tutti, ti mostreremo come migliorare l'accessibilità del tuo sito WordPress passo dopo passo.
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 screen reader per persone con disabilità visive e navigazione da tastiera per coloro che non possono usare un mouse.
Ci sono alcune best practice comuni raccomandate dagli esperti per rendere i siti web più accessibili. Aiutano a rendere i siti più inclusivi e facili da usare per tutti, indipendentemente dalle abilità.
Dando priorità all'accessibilità, più persone saranno in grado di navigare sul tuo sito web WordPress ed esplorare i tuoi contenuti. Se gestisci un negozio online, aumenterai anche le tue possibilità di convertire gli utenti in clienti.
L'accessibilità è importante anche per l'ottimizzazione per i motori di ricerca (SEO). Google apprezza i siti web con una buona usabilità. Oltre a rendere il tuo sito web più reattivo per i dispositivi mobili, puoi anche dare priorità all'inclusività nel tuo web design per migliorare i posizionamenti.
Inoltre, se sei il proprietario di un sito web aziendale e la parte front-end del tuo sito è inaccessibile, potresti incorrere in conseguenze legali.
L'Americans with Disabilities Act (ADA) afferma che i consumatori possono presentare un reclamo se un sito non è conforme alle linee guida sull'accessibilità. Inoltre, la tua reputazione potrebbe essere rovinata, il che potrebbe comportare perdite finanziarie.
Come rende WordPress il mio sito web più accessibile?
WordPress ha diverse funzionalità integrate per aiutare gli utenti a rendere i loro siti web WordPress accessibili. Ad esempio, per impostazione predefinita, è possibile aggiungere testo alternativo (alt text) e attributi titolo alle immagini in modo che gli screen reader possano leggerli ad alta voce per gli utenti con disabilità visive.
WordPress ha anche reso obbligatorio che tutto il codice nuovo e aggiornato in WordPress segua i suoi standard di codifica per l'accessibilità. Questo serve a garantire che gli sviluppatori WordPress rispettino le migliori pratiche per l'accessibilità quando creano temi e plugin.
Oltre a ciò, WordPress include funzionalità che rendono facile per gli utenti con disabilità costruire i propri siti web, come la modalità accessibilità per l'aggiunta di widget.
Per maggiori informazioni, ti consigliamo di seguire il tag Accessibilità sulla pagina Make WordPress Core.
Con tutto ciò in mente, WordPress non è completamente accessibile fin da subito. In qualità di proprietario di un sito web, è importante intraprendere misure aggiuntive per aiutare il tuo sito a soddisfare gli standard di accessibilità.
Abbiamo suddiviso questa guida in alcuni semplici suggerimenti per migliorare l'accessibilità del tuo sito web WordPress. Puoi utilizzare questi collegamenti rapidi per navigare verso una sezione specifica:
- Familiarizza con le Web Content Accessibility Guidelines (WCAG)
- Utilizza un tema WordPress pronto per l'accessibilità
- Installa un plugin di accessibilità per WordPress
- Controlla il contrasto dei colori del tuo sito web
- Aggiungi testo alternativo e attributi titolo alle immagini
- Aggiungi etichette a tutti i campi del modulo
- Utilizza tag di intestazione appropriati nei tuoi contenuti
- Usa testo di ancoraggio descrittivo
- Aggiungi didascalie o trascrizioni ai contenuti video e audio
- Esegui test di usabilità e accessibilità
- Guide esperte sull'accessibilità di WordPress
1. Familiarizza con le Web Content Accessibility Guidelines (WCAG)
Prima di tutto, ti consigliamo di leggere le Web Content Accessibility Guidelines (WCAG). Questi sono gli standard stabiliti dal W3C Web Accessibility Initiative (WAI) per consentire agli utenti di rendere i propri siti web più accessibili.
Puoi consultare gli aggiornamenti WCAG 2.1 e WCAG 2.2 per iniziare. Se entrambi i documenti sembrano troppo lunghi da leggere, sentiti libero di aggiungere ai segnalibri questo riferimento rapido.
2. Utilizza un tema WordPress pronto per l'accessibilità
I temi pronti per l'accessibilità hanno soddisfatto 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 tuo sito web sarà automaticamente conforme a tutti i requisiti di accessibilità, poiché dovrai comunque apportare alcune modifiche da solo. Tuttavia, può darti una spinta per rendere il tuo sito web più accessibile.
Come minimo, un tema pronto per l'accessibilità avrà:
- Menu navigabili solo con la tastiera.
- Buon contrasto di colore che rende il contenuto leggibile per gli utenti con disabilità visive.
- HTML semanticamente corretto, che aiuta le tecnologie assistive a comprendere il contenuto e la struttura di una pagina web.
Se vuoi fare un passo avanti, potresti anche voler verificare se il tema contiene attributi ARIA. Questi attributi sono come informazioni aggiuntive che completano l'HTML del tuo tema per rendere un sito web ancora più facile da navigare per le tecnologie assistive.
Il modo più semplice per cercare un tema pronto per l'accessibilità è andare su Aspetto » Temi nella tua bacheca di WordPress. Quindi, fai clic su 'Aggiungi nuovo tema'.
Da qui, seleziona 'Filtro funzionalità' e scegli 'Accessibilità pronta'.
Sentiti libero di aggiungere altri filtri per trovare il tema che soddisfa le tue esigenze esatte.
Ora, scorri verso il basso e fai clic su 'Applica filtri'.
Vedrai quindi alcuni temi pronti per l'accessibilità sullo schermo.
Per ulteriori raccomandazioni sui temi, consulta le nostre scelte degli esperti sui migliori temi WordPress.
3. Installa un plugin per l'accessibilità di WordPress
Un plugin per l'accessibilità di WordPress aggiunge funzionalità utili per i visitatori con disabilità per navigare sul tuo sito web.
Un plugin per l'accessibilità di WordPress che raccomandiamo è WP Accessibility. Alcune delle cose che questo plugin può fare includono:
- Aggiungere una barra degli strumenti per l'accessibilità
- Rilevare se il tuo tema è pronto per l'accessibilità
- Tracciare come vengono utilizzate le funzionalità di accessibilità sul tuo sito web in modo da poterle valutare
Innanzitutto, devi installare e attivare il plugin su WordPress.
Dopo l'attivazione, devi andare su Impostazioni » WP Accessibility per configurare il plugin.
Diamo un'occhiata a ciascuna sezione della pagina delle impostazioni.
Aggiungi collegamenti di salto
Nella prima sezione delle impostazioni del plugin, puoi utilizzare i collegamenti di salto sul tuo sito web e questa impostazione è abilitata per impostazione predefinita. Un collegamento di salto consente agli utenti di passare direttamente alla sezione dei contenuti di un post o di una pagina.
Questa è una funzionalità estremamente utile per le persone che utilizzano screen reader. Senza un collegamento di salto, dovranno ascoltare tutto ciò che viene visualizzato sul tuo sito web, inclusi i tuoi menu di navigazione, prima di raggiungere la parte del contenuto.
Se il tuo tema utilizza già collegamenti di salto, vedrai una notifica che lo conferma.
Barra degli strumenti per l'accessibilità
Il plugin WP Accessibility viene fornito con una barra degli strumenti per l'accessibilità.
Quando lo abiliti, il plugin aggiungerà una barra degli strumenti sul tuo sito web dove gli utenti possono ridimensionare i font o visualizzare il tuo sito in modalità colore ad alto contrasto.
Questo consente ai tuoi utenti di selezionare le opzioni di cui hanno bisogno per rendere la pagina più facile da leggere.
Per abilitare la barra degli strumenti, seleziona semplicemente le caselle di controllo 'Dimensione font' e 'Contrasto'.
Ci sono anche impostazioni in cui puoi controllare la dimensione del font e il posizionamento della barra degli strumenti.
Se apporti modifiche a queste impostazioni, assicurati di fare clic sul pulsante 'Aggiorna impostazioni barra degli strumenti' per memorizzare le tue impostazioni.
Questo è l'aspetto della barra degli strumenti sul nostro sito di prova.
Correzioni di accessibilità
WP Accessibility fornisce anche diverse correzioni di accessibilità che potrebbero risolvere potenziali problemi sul tuo sito. Puoi esaminare ogni opzione e vedere se ne hai bisogno.
Alcune impostazioni consigliate saranno selezionate per impostazione predefinita. Queste opzioni impediscono l'apertura dei link in nuove finestre, visualizzano un errore quando invii una ricerca vuota e rimuovono l'attributo HTML tabindex dove non è necessario per semplificare la navigazione da tastiera.
Se stai utilizzando un tema accessibile che ha già abilitato alcune di queste funzionalità, vedrai un messaggio che lo conferma nella parte superiore della sezione.
Non dimenticare di fare clic sul pulsante 'Aggiorna impostazioni varie' per memorizzare le tue modifiche.
Funzionalità di accessibilità
Il plugin fornisce anche alcune opzioni per rendere i tuoi contenuti più accessibili.
Il primo gruppo di impostazioni rende le immagini più facili da gestire per chi utilizza screen reader.
Ci sono anche opzioni per visualizzare riassunti all'inizio dei tuoi post e pagine. Questo consente a chi utilizza screen reader di ascoltare un riassunto del contenuto prima di decidere se ascoltare l'intero articolo.
Se modifichi una di queste opzioni, ricordati di fare clic sul pulsante ‘Aggiorna funzionalità di accessibilità’.
Esperienza di test e amministrazione
Successivamente, troverai alcune impostazioni che ti consentono di migliorare l'accessibilità della tua area di amministrazione di WordPress e di aiutare con i test.
Questa sezione è più tecnica, quindi assicurati di consultare la documentazione del plugin prima di selezionare le caselle.
Assicurati di fare clic sul pulsante ‘Aggiorna strumenti di accessibilità’ per salvare le modifiche.
Rimuovi attributi titolo
Questa sezione ti consente di rimuovere l'attributo titolo dalle nuvole di tag.
L'attributo titolo è considerato inutile da alcuni esperti di accessibilità. La maggior parte degli screen reader ignora solitamente l'attributo titolo e legge invece il testo dell'ancora.
Questa impostazione è abilitata per impostazione predefinita, ma se la modifichi, assicurati di fare clic sul pulsante ‘Aggiorna impostazioni attributi titolo’.
4. Controlla il contrasto dei colori del tuo sito web
Il contrasto dei colori significa la differenza tra il colore del testo e il colore di sfondo. È una parte molto importante dell'accessibilità del sito web perché può influire sulla leggibilità del contenuto del tuo sito per le persone con problemi di vista e daltonismo.
Per soddisfare gli standard di accessibilità web, il testo normale dovrebbe avere un contrasto elevato di almeno 4,5:1. Ciò significa che il testo deve essere 4,5 volte più luminoso dello sfondo.
Per testi più grandi, il requisito è leggermente inferiore, 3:1. Ciò significa che un contrasto leggermente inferiore è accettabile. La stessa regola si applica a grafiche ed elementi dell'interfaccia utente, come i bordi degli input dei moduli.
Il plugin WP Accessibility dispone di un controllo del contrasto dei colori integrato che puoi utilizzare.
Nelle impostazioni del plugin, scorri semplicemente verso il basso fino alla sezione Color Contrast Tester e scegli un colore di primo piano (il colore che utilizzerai per il tuo testo) e il suo colore di sfondo.
Quindi, fai clic su ‘Check Color Contrast.’
Il plugin ti dirà quindi se i colori superano o non superano il test di contrasto.
Ecco come appare il risultato:
In alternativa, puoi utilizzare il WebAIM Contrast Checker gratuito. Come con lo strumento precedente, dovrai solo selezionare un colore di primo piano e un colore di sfondo.
Questo strumento non solo testa il contrasto dei tuoi colori, ma ti mostra anche come potrebbero apparire i colori come testo normale e grande, nonché oggetti grafici e componenti dell'interfaccia utente.
Per maggiori dettagli, potresti voler consultare la nostra guida su come scegliere lo schema di colori perfetto per il tuo sito WordPress.
5. Aggiungi testo alternativo alle immagini
Oltre ad essere utili per i motori di ricerca, il testo alt è utile per gli screen reader per descrivere le immagini a persone con disabilità visive.
In precedenza, abbiamo menzionato che WordPress ha una funzionalità integrata per l'aggiunta di testo alt. Il processo è piuttosto semplice e puoi leggere tutto sulla sua configurazione nelle seguenti guide:
- Guida per principianti all'ottimizzazione delle immagini per i motori di ricerca (SEO)
- Testo alternativo dell'immagine vs Titolo dell'immagine in WordPress – Qual è la differenza?
Suggerimento esperto: Se desideri impostare automaticamente un formato di testo alternativo coerente per tutte le tue immagini, puoi utilizzare lo strumento SEO per immagini di All in One SEO.
6. Aggiungi etichette a tutti i campi del modulo
Se hai moduli sul tuo sito web, assicurati di utilizzare le etichette appropriate per ogni elemento del modulo. Ciò include campi del modulo, pulsanti, menu e così via.
Le WCAG raccomandano di aggiungere etichette a tutti gli elementi del modulo per facilitare agli strumenti di assistenza l'identificazione e la trasmissione di informazioni su ciascuno di essi agli utenti.
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 da parte dell'utente e più persone saranno in grado di inviare i propri moduli.
Se non sei sicuro di come creare moduli efficaci, ti consigliamo di dare un'occhiata a WPForms. È il miglior costruttore di moduli WordPress che rende estremamente facile personalizzare i moduli in base alle tue esigenze esatte, inclusa la loro ottimizzazione per l'accessibilità.
Puoi leggere di più su WPForms nella nostra recensione di WPForms. Inoltre, dai 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. Utilizza i tag di intestazione appropriati nei tuoi contenuti
I tag di intestazione sono tag HTML che possono contrassegnare i titoli o i sottotitoli di una pagina web. In questo modo, il tuo contenuto è molto più organizzato e facile da seguire.
Questi tag aiutano anche strumenti come gli screen reader a generare una struttura navigabile per gli utenti con disabilità visive. Ciò consentirà loro di passare da una sezione all'altra e di comprendere la struttura generale del tuo contenuto.
Se non sei sicuro di come sfruttare i tag di intestazione, puoi leggere la nostra guida su come utilizzare correttamente i tag di intestazione in WordPress.
8. Utilizza testo di ancoraggio descrittivo
Il testo di ancoraggio o testo del link è fondamentalmente le parole o le frasi cliccabili in un link. Di solito puoi capire quale testo è collegato perché sarà di un colore diverso.
Spesso, i blogger utilizzano il testo del link ‘clicca qui’ o ‘leggi di più’ per indirizzare i visitatori a una pagina.
Questa non è una buona pratica per l'accessibilità perché non fornisce alcuna informazione su dove porta il link. Questo rende difficile per le persone che utilizzano tecnologie assistive comprendere lo scopo del link.
Ecco perché è meglio usare testo di ancoraggio descrittivo. Ciò significa usare parole che descrivono di cosa tratta il contenuto quando si fa clic sul link.
Ad esempio, supponiamo che tu voglia aggiungere un link a un articolo sui migliori hosting WordPress in questa frase: ‘Segui questa guida per saperne di più sui migliori servizi di hosting WordPress sul mercato.’
Invece di aggiungere il link a ‘Segui questa guida’ o altrove in quella frase, dovresti inserirlo in ‘migliori servizi di hosting WordPress.’ In questo modo, l'utente ottiene una panoramica di ciò che troverà nel contenuto collegato
Per maggiori informazioni su link e testo di ancoraggio, consulta la nostra guida per principianti sul collegamento in WordPress.
9. Aggiungi didascalie o trascrizioni ai contenuti video e audio
Una delle principali difficoltà per gli utenti con disabilità uditive è l'incapacità di comprendere il contenuto parlato nei video e nell'audio. Ecco perché molti creatori di contenuti video e podcaster aggiungono didascalie o trascrizioni.
Su WPBeginner, sconsigliamo vivamente di caricare video sul tuo sito web perché possono rallentarlo. Invece, è meglio utilizzare servizi come YouTube o Vimeo, entrambi dotati di strumenti integrati per l'aggiunta di sottotitoli.
Per quanto riguarda i contenuti audio, potresti voler considerare l'utilizzo di un servizio di trascrizione per convertire facilmente il parlato in testo. In questo modo, non avrai bisogno di creare manualmente una versione scritta dei tuoi contenuti audio.
Dai un'occhiata alla nostra lista dei migliori servizi di trascrizione per maggiori informazioni.
10. Esegui test di usabilità e accessibilità
Se hai implementato tutti i suggerimenti di questa guida, allora il passo finale è eseguire test di usabilità e accessibilità sul tuo sito web WordPress.
Questi test possono aiutarti a identificare eventuali problemi rimanenti e a rendere il tuo sito web facile da usare e accessibile a tutti.
WebAIM dispone di uno Strumento di valutazione dell'accessibilità web (WAVE) che puoi utilizzare gratuitamente.
Digita semplicemente il nome di dominio del tuo sito web e lo strumento identificherà eventuali problemi relativi all'accessibilità per te.
Puoi anche utilizzare uno scanner di accessibilità. Ti consigliamo di provare Accessibility Checker di Equalize Digital. Viene fornito anche con una versione gratuita del plugin per scansionare post e pagine illimitate sul tuo sito web.
Dopo aver installato il plugin, puoi semplicemente andare all'editor a blocchi della tua pagina o del tuo post. Se scorri verso il basso fino alla sezione meta box, troverai un Controllo di accessibilità che identifica i tuoi problemi di accessibilità.
Un'altra opzione è eseguire un audit UX, che fondamentalmente significa controllare il tuo sito web per vedere se offre una buona esperienza utente. Vai alla nostra guida all'audit UX per maggiori informazioni.
Ultimo ma non meno importante, ti incoraggiamo a chiedere il feedback dei tuoi utenti. Mentre i test possono darti dei risultati, ottenere feedback dai visitatori effettivi che utilizzano le funzionalità di accessibilità del tuo sito può fornire informazioni molto più accurate.
UserFeedback è il miglior plugin per questo lavoro. Ti consente di creare sondaggi per raccogliere opinioni e pensieri dei tuoi utenti. Ci sono anche modelli per il feedback sul design del sito web, quindi non dovrai creare il sondaggio da zero.
Per maggiori informazioni, consulta la nostra guida su come ottenere feedback sul design del sito web in WordPress.
Guide esperte sull'accessibilità di WordPress
Ora che sai come migliorare l'accessibilità sul tuo sito, potresti voler consultare altre guide relative ai problemi di accessibilità di WordPress:
- Come aggiungere widget di WordPress in modalità accessibilità
- Come scegliere uno schema di colori perfetto per il tuo sito WordPress
- Come aggiungere un ridimensionatore di font 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 vs Titolo dell'immagine in WordPress – Qual è la differenza?
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dennis Muthomi
La sezione sul contrasto dei colori è stata particolarmente illuminante.
Come web designer, ho scoperto che l'utilizzo del WebAIM Contrast Checker è stato prezioso per garantire che i miei progetti soddisfino gli standard WCAG.
Ottimo articolo nel complesso!
Prajwal Shewatkar
Avere opzioni di accessibilità sul tuo sito web non solo aiuta le persone con disabilità, ma aiuta anche a costruire fiducia tra tutti gli utenti. Poiché non tutti gli altri siti web sono pronti per l'accessibilità, avere tali opzioni integrate rende il tuo blog unico e più affidabile.
Dorin Mihaila
Buon articolo, l'accessibilità è sicuramente qualcosa che vuoi avere sul sito.
Clifford Blaylock
Sto diventando un po' deluso e confuso dal fatto che al giorno d'oggi venga sempre suggerito che un plugin di WordPress sia necessario per fare la maggior parte delle cose in WordPress. Al momento tutti parlano di quanto sia importante la velocità del tuo sito web, ma più plugin hai installato, più lenta sarà la velocità del tuo sito web. Sarei interessato a conoscere alcuni fatti in più su questo argomento.
Saluti Cliff
Supporto WPBeginner
Si prega di consultare la nostra spiegazione qui: Quanti plugin WordPress dovresti installare sul tuo sito?.
Amministratore
Sig. Leong
Questo è un ottimo articolo
Larry Auerbach
Potrei usare un po' di aiuto sulla funzione di pianificazione, per consentire ai post di pubblicarsi da soli in un certo giorno e ora. Non mi sembra di farlo correttamente, poiché ciò non accade alla data e all'ora che ho preimpostato nella casella delle impostazioni.
Supporto WPBeginner
Si prega di consultare la nostra guida su come pianificare i tuoi post in WordPress. Potresti anche voler consultare come pianificare automaticamente i tuoi post del blog di WordPress.
Amministratore
Anselm Urban
Si dice che il Genesis Framework abbia un'ottima accessibilità. Dovrei comunque usare il plugin?
Supporto WPBeginner
Puoi provarlo e vedere se il plugin fa qualche raccomandazione. Devi comunque scegliere una combinazione tra funzionalità, design, accessibilità e usabilità. Spetta a te decidere quali impostazioni di accessibilità raccomandate vuoi implementare sul tuo sito web.
Amministratore
Dick Foster
Che ne dici di usare "em" invece di "px" per impostare l'altezza del testo appropriata? La regolazione di quel parametro è inclusa in questo plugin?
Molti siti (incluso questo) hanno quello che alcune persone considererebbero testo difficile da leggere perché è troppo piccolo.
Naturalmente, Chrome e altri browser consentono di ingrandire (zoomare) le pagine, ma ciò richiede un passaggio non necessario se i siti utilizzano "em" per impostare l'altezza del testo.
Tuhinshubhra
Spiegato in modo fantastico....
Joe Dolson
Grazie per aver condiviso il mio plugin! Se qualcuno vuole conoscere i dettagli più approfonditi di ogni funzionalità nel plugin WP Accessibility, dovrebbe leggere la documentazione delle funzionalità dopo aver letto la tua panoramica! Questo ti aiuterà a decidere quali funzionalità ti servono per il tuo sito.
Supporto WPBeginner
Grazie Joe Dolson per aver condiviso e scritto questo plugin molto utile. Abbiamo già linkato alla documentazione del plugin nell'articolo.
Amministratore