Come rendere accessibili i siti Web WordPress

Questo post è stato scritto da Amber Hinds, CEO di Equalize Digital, una B Corporation certificata specializzata nell'accessibilità di WordPress. Se desideri saperne di più su Equalize Digital e sui suoi servizi, visita il sito Web dell'azienda.

Milioni di persone in tutto il mondo hanno una disabilità che influisce sul modo in cui utilizzano Internet e, dopo una pandemia che ha aumentato la necessità di fare facilmente acquisti online, ordinare cibo e persino servizi di assistenza sanitaria a distanza, l'accessibilità del web è più importante che mai.

Questa guida all'accessibilità web discute cos'è l'accessibilità, perché è importante e come rendere accessibili i siti Web WordPress, inclusa l'identificazione dei problemi comuni attraverso i test.

In questo articolo tratterò:

• Cos'è l'accessibilità web?
• Perché l'accessibilità è importante
• Quali sono alcuni problemi di accessibilità comuni?
• Testare l'accessibilità dei siti Web WordPress
• Mantenere un sito web accessibile

Cos'è l'accessibilità web?

In poche parole, i siti Web accessibili sono siti Web che possono essere utilizzati da tutte le persone, comprese le persone che potrebbero non interagire con il Web tramite una tipica configurazione di tastiera e mouse e coloro che hanno una varietà di differenze intellettuali o fisiche.

Funzionalità specifiche devono essere integrate nei siti Web per renderli utilizzabili e comprensibili alle persone con disabilità. Le disabilità uditive, visive, cognitive, motorie o di apprendimento richiedono adattamenti e modifiche al sito web per renderle utilizzabili. A seconda della loro situazione, le persone con disabilità utilizzano vari dispositivi di assistenza, come i lettori di schermo, per accedere ai siti web.

I web designer e gli sviluppatori devono garantire che i contenuti e le funzionalità dei loro siti web siano percepibili, utilizzabili, comprensibili e robusti (POUR), il che significa che i contenuti e le funzionalità possono essere accessibili e compresi da tutte le persone su tutti i dispositivi.

Alcuni esempi di funzionalità che rendono i siti Web più accessibili includono:

• sottotitoli e trascrizioni per file video e audio
• testo alternativo sulle immagini
• saltare i collegamenti per assistere con la navigazione da tastiera
• contrasto di colore appropriato per rendere il testo più leggibile

Perché l'accessibilità è importante

L'accessibilità del sito web ha un impatto su tutti coloro che utilizzano il web. Se i siti Web tuoi o dei tuoi clienti sono accessibili, questo garantisce a tutti un uguale accesso alle informazioni online, alle necessità, all'intrattenimento, allo shopping e altro ancora, indipendentemente dalle capacità.

Ma l'accessibilità del sito web non riguarda solo il buon karma; ha anche effetti nel mondo reale sul posizionamento nei motori di ricerca, sulle nuove vendite e sui visitatori del sito Web, sulle complicazioni legali e sull'immagine del marchio.

Posizionamento sui motori di ricerca

Apportare correzioni all'accessibilità può migliorare il posizionamento nei motori di ricerca di un sito web. Molte funzionalità di accessibilità come il testo alternativo sulle immagini e il contenuto adeguatamente strutturato con intestazioni aiutano sia l'accessibilità che l'ottimizzazione per i motori di ricerca (SEO). Posizionarsi più in alto in una pagina dei risultati di ricerca può aumentare la visibilità con nuovi clienti o clienti, portando a un aumento del traffico del sito Web, delle conversioni, degli abbonati a blog o newsletter e altro ancora.

Aumento delle vendite

Il CDC afferma che, a partire dal 2018, 1 americano su 4 ha una disabilità. Gli americani disabili spendono annualmente più di 200 miliardi di dollari in spese discrezionali online. Le funzionalità di accessibilità consentono a più persone di trovare e utilizzare i siti Web, aumentando le opportunità di nuove vendite, conversioni e clienti abituali. Quando molti siti Web non sono accessibili nel mondo di oggi, qualsiasi sito Web accessibile sarà al di sopra della concorrenza.

È legalmente richiesto

Tutti i siti web devono soddisfare gli standard di accessibilità web stabiliti dall'Americans with Disabilities Act (ADA). Ai sensi dell'ADA, è stato stabilito un precedente legale che stabilisce i siti web come luoghi di alloggio pubblico. Ciò significa che i siti Web aziendali, che sono essenzialmente le loro vetrine digitali, devono essere resi accessibili nello stesso modo in cui deve essere reso accessibile un edificio commerciale fisico.

Anche i siti Web delle agenzie governative locali, statali e federali e qualsiasi sito Web per organizzazioni e progetti finanziati a livello federale devono soddisfare gli standard della Sezione 508. Inoltre, esistono numerose leggi statali e internazionali che richiedono l'accessibilità dei siti Web.

Se un sito Web non soddisfa i requisiti di accessibilità stabiliti in queste linee guida, l'organizzazione potrebbe essere a rischio di una causa legale o, in alcuni casi, di una multa governativa. Secondo Usablenet, nel 2020 negli Stati Uniti sono state intentate 3.550 cause legali per l'accessibilità dei siti web. Mantenere la conformità legale è una parte importante del fare affari e avere un sito web accessibile è un modo in cui le aziende possono adempiere ai propri obblighi legali.

Immagine di marca

Le aziende e le organizzazioni non profit che adottano misure per rendere i loro siti Web WordPress più accessibili dimostrano che stanno praticando la responsabilità sociale e affermano di voler rendere Internet un posto per tutti. Un impegno organizzativo per l'accessibilità mostra alle persone che si prendono cura di loro in modo profondamente umano, il che crea lealtà e può elevare l'immagine del marchio.

Quali sono alcuni problemi di accessibilità comuni?

La mia azienda, Equalize Digital, è una società di consulenza sull'accessibilità che esegue audit di accessibilità su siti Web per aziende, organizzazioni non profit e agenzie governative. In tutti i nostri test, vediamo molti problemi di accessibilità ripetuti su tutti i siti web. Questi problemi comuni sono problemi relativamente semplici da risolvere, ma in genere vengono trascurati da sviluppatori, designer e creatori di contenuti.

Se vuoi assicurarti che i siti web che crei o gestisci siano accessibili, inizia controllando i seguenti problemi:

Testo alternativo mancante o di bassa qualità

Il testo alternativo è ciò che i lettori di schermo usano per descrivere i contenuti o lo scopo di un'immagine ai non vedenti. Se il testo alternativo viene lasciato vuoto, un'utilità per la lettura dello schermo lo salterà interamente o potrebbe leggere invece il nome del file dell'immagine, il che non è utile quando il nome del file è una stringa di numeri o non è descrittivo dell'aspetto. Senza un testo alternativo appropriato, gli utenti non vedenti e ipovedenti non avranno alcun contesto o comprensione di un'immagine.

Il testo alternativo di bassa qualità è problematico perché non riesce a descrivere l'immagine in modo accurato o è eccessivamente prolisso e può causare confusione. Parole e frasi come "immagine", "immagine", "grafica di", "immagine di" non devono essere aggiunte al testo alternativo perché lo screen reader annuncerà la presenza di un'immagine o di una grafica.

Se hai un testo alternativo più lungo di 125-150 caratteri, alcuni screen reader si interromperanno e smetteranno di leggere. L'aggiunta di punti all'interno del testo alternativo può mettere in pausa gli screen reader, confondendo potenzialmente gli ascoltatori o inducendoli a credere che il testo alternativo sia terminato.

Contrasto colore insufficiente

Nel web design, il contrasto cromatico si riferisce alla misura della luminosità tra il colore di sfondo e gli elementi colorati come testo, pulsanti o icone. I colori di sfondo e di primo piano devono avere un rapporto di 4,5:1 affinché il testo di dimensioni standard sia considerato sufficiente. Puoi testare il contrasto del colore inserendo i codici esadecimali di entrambi i colori in un correttore di contrasto del colore gratuito.

Testo di ancoraggio ambiguo

Il testo di ancoraggio è una parola cliccabile o un gruppo di parole su una pagina web. Fare clic sul testo di ancoraggio potrebbe portarti a un nuovo sito Web, scaricare un documento, aprire un'immagine o un video in una nuova scheda. Il testo di ancoraggio è considerato ambiguo se non ha senso fuori contesto o non descrive lo scopo del collegamento. Alcuni esempi di testo di ancoraggio ambiguo includono "link", "fai clic qui", "scopri di più" o "continua". Quando si aggiungono collegamenti al contenuto, è essenziale che, se qualcuno dovesse ascoltare solo il collegamento in modo indipendente (senza alcun testo circostante), saprebbe dove punta il collegamento o cosa accadrà quando si fa clic sul collegamento.

Didascalie e trascrizioni mancanti

I sottotitoli prendono contenuti parlati e non parlati, come effetti sonori, musica o risate da un video, e li descrivono tramite testo. Appaiono sullo schermo durante un video, quindi gli utenti non udenti e con problemi di udito possono capire cosa sta succedendo nel video. Inoltre, i sottotitoli devono corrispondere alla tempistica del video. È importante notare che le didascalie devono essere accurate; i sottotitoli generati automaticamente devono essere controllati per verificarne l'accuratezza.

Una trascrizione è una registrazione scritta di ciò che viene detto in una clip audio o durante un video. Le trascrizioni forniscono un mezzo secondario per comprendere i contenuti video o i file audio. Dovrebbero essere usati insieme ai sottotitoli su un video in modo che le persone possano leggere la trascrizione piuttosto che guardare il video. Questo è importante perché non tutti gli utenti possono leggere i sottotitoli. Le trascrizioni offrono anche il vantaggio di essere facilmente tradotte in altre lingue e possono aiutare la SEO.

Testare i siti Web WordPress per l'accessibilità

Il modo migliore per testare l'accessibilità dei siti Web è eseguire una combinazione di test automatici, manuali e utente.

Test di accessibilità automatizzati

I test di accessibilità automatizzati vengono eseguiti con strumenti di scansione AI. Esistono molti strumenti gratuiti ea pagamento che possono offrire una varietà di funzioni di scansione dell'accessibilità. Quando si sceglie uno strumento automatizzato, ecco alcune cose da tenere a mente:

• La dimensione del sito web. Se hai un sito web più piccolo, uno strumento gratuito potrebbe funzionare per te. Se hai un sito web più grande, come un sito con un blog o una sezione e-commerce con migliaia di post, uno strumento a pagamento sarà probabilmente più appropriato.
• Di quanto supporto hai bisogno. Se hai bisogno di aiuto per trovare errori di accessibilità sul tuo sito web in modo da poterli correggere, gli strumenti gratuiti possono essere un'ottima opzione. Se hai bisogno di aiuto per comprendere gli errori di accessibilità o vuoi che qualcun altro li risolva, prova a trovare uno strumento con opzioni di supporto integrate o offerte dagli sviluppatori. Avere il supporto disponibile è fondamentale se sei nuovo nella correzione dell'accessibilità.
• Esperienza utente. Alcuni strumenti di accessibilità automatizzati possono essere utilizzati direttamente sul tuo sito Web, ad esempio tramite un'estensione del browser o all'interno della dashboard di WordPress. Altri strumenti richiedono l'utilizzo di un'interfaccia completamente separata dal tuo sito web. Se desideri visualizzare gli errori di accessibilità mentre lavori sul tuo sito web, scegli uno strumento che offra rapporti in loco. Ciò semplifica il controllo continuo dell'accessibilità del sito Web durante la modifica dei contenuti sul sito.

Due popolari strumenti gratuiti che possono essere utilizzati su qualsiasi sito Web sono WAVE e Axe. Questi strumenti hanno sia estensioni di Chrome che Firefox disponibili per testare singoli URL, uno alla volta, e piani a pagamento che consentono test in blocco e funzionalità aggiuntive.

Plug-in WordPress per il controllo dell'accessibilità

Se desideri eseguire scansioni di accessibilità in blocco e visualizzare i report nella dashboard di WordPress, il plug-in Controllo accessibilità di WordPress è lo strumento migliore. Puoi scaricare la versione base del plugin gratuitamente su WordPress.org.

Accessibility Checker esegue la scansione di pagine e post per errori di accessibilità o potenziali problemi e li visualizza direttamente nella schermata di modifica per quella pagina o post. Questi report in-page sono utili non solo per verificare se il sito Web è accessibile in primo luogo, ma anche per monitorare l'accessibilità in corso.

Accessibility Checker esegue più di 40 diversi controlli, anche per i problemi comuni identificati sopra. La versione gratuita esegue la scansione di post e pagine e la versione Pro include scansioni complete del sito di tipi di post personalizzati e pagine di archivio. Gli elementi contrassegnati o rivisti in modo errato possono essere ignorati, consentendo il monitoraggio delle correzioni di accessibilità man mano che vengono apportate nel tempo. È un ottimo strumento per agenzie, sviluppatori e utenti di WordPress.

Test manuale

Sfortunatamente, le scansioni automatiche non sono in grado di identificare ogni problema di accessibilità su un sito Web: alcuni problemi possono essere determinati solo da un essere umano che sperimenta il sito Web. Dopo aver testato il sito Web con uno strumento automatizzato come Accessibility Checker, esegui il test manuale per assicurarti che tutte le persone possano utilizzarlo indipendentemente dal dispositivo che stanno utilizzando.

Il primo passo in un test di accessibilità manuale è confermare che gli utenti possono navigare completamente con solo una tastiera. Vai al front-end del sito Web e utilizza i tasti di tabulazione e freccia per spostarti nel sito, assicurandoti di non perdere la posizione mentre procedi e di poter utilizzare tutte le parti del sito Web.

Dopo il test della tastiera, puoi passare al test dello screen reader. I lettori di schermo sono un tipo di software di tecnologia assistiva che le persone non vedenti e ipovedenti utilizzano per comprendere i contenuti web. Se hai un Mac, puoi utilizzare il software VoiceOver integrato nel tuo computer. Se non disponi di un Mac, puoi scaricare il lettore di schermo open source gratuito NVDA o acquistare il popolare lettore di schermo JAWS. È consigliabile testare il tuo sito Web con due o più screen reader poiché non tutti gli screen reader dicono la stessa cosa per i singoli elementi.

Per testare il tuo sito web con uno screen reader, vai alla pagina che desideri testare, quindi spostati nella pagina come hai fatto durante il test di navigazione da tastiera, utilizzando solo i tasti di tabulazione e freccia. Ascolta ciò che dice lo screen reader mentre ti sposti nella pagina e contrassegna qualsiasi cosa non corretta o confusa. Ascolta i file multimediali o gli slider che vengono riprodotti automaticamente e interrompono altri contenuti sulla pagina.

Una volta eseguiti i test di navigazione da tastiera e screen reader, è necessario controllare tutti i file multimediali incorporati o collegati. I file multimediali includono video, file audio, PDF, file .Doc o .XLS, dispositivi di scorrimento di immagini o testo e widget o iFrame di terze parti. Garantire che le persone con disabilità possano accedere, interagire e comprendere il contenuto presentato da tutti i file multimediali incorporati o collegati.

Test utente

Dopo i test di accessibilità automatizzati e manuali, si consiglia di eseguire i test utente. Il test degli utenti comporta l'assunzione di utenti di tecnologie assistive del mondo reale per testare il tuo sito Web per errori di accessibilità. In genere, a un utente di test viene fornito un brief da uno sviluppatore web con obiettivi specifici. L'utente test tenterà quindi di raggiungere tali obiettivi e quindi fornirà un feedback allo sviluppatore.

Puoi assumere singoli utenti di test tramite programmi a pagamento o di volontariato oppure trovare un'azienda di accessibilità che offra servizi di test degli utenti.

Conclusione: mantenere un sito Web accessibile

È importante notare che, come la SEO, l'accessibilità è un processo continuo che richiede monitoraggio e modifiche continue. Per assicurarti che il tuo sito web rimanga accessibile, crea un piano per:

• Monitorare e testare regolarmente gli errori di accessibilità utilizzando uno strumento come il plug-in Accessibility Checker.
• Forma sviluppatori web, designer e creatori di contenuti sulle migliori pratiche di accessibilità web. Se stai lanciando siti Web per i clienti, assicurati che sappiano come aggiungere contenuti in modo accessibile dopo il lancio.
• Tieniti informato su eventuali linee guida sull'accessibilità o modifiche alla legge che devi seguire.

L'adozione di questi passaggi contribuirà a garantire che il tuo sito Web rimanga accessibile e che tutte le persone abbiano pari accesso a informazioni, prodotti e servizi sul Web, indipendentemente dalle loro capacità.