Come incorporare l'accessibilità al Web nel tuo sito WordPress

Pubblicato: 2020-02-15

WordPress è la piattaforma di creazione di siti Web più popolare. Secondo W3techs, il 35,7% di tutti i siti Web utilizza WordPress, il che lo porta a una quota di mercato sbalorditiva del 62,5% del sistema di gestione dei contenuti (CMS) a livello globale.

Quando crei un sito Web WP, tuttavia, l'accessibilità al Web è probabilmente l'ultima cosa che hai in mente.

Tuttavia, gli standard di codifica per l'accessibilità di WordPress affermano che " Tutto il codice nuovo o aggiornato rilasciato in WordPress deve essere conforme alle Linee guida per l'accessibilità dei contenuti Web 2.0 al livello AA. "

In altre parole, l'accessibilità è un fattore critico se si dispone di un sito Web WP.

Fortunatamente, rendere accessibile il tuo sito Web WP non è impossibile. Ma, prima di discutere come farlo, cerchiamo di capire cosa costituisce l'accessibilità al web.

A. I quattro pilastri dell'accessibilità al Web

Il World Wide Web Consortium (W3C), che sviluppa standard internazionali per il web, ha già elaborato i seguenti quattro principi di accessibilità web:

Percepibile: devi presentare tutte le informazioni e gli elementi sul tuo sito web in modo che tutti possano percepirli.
Operabile: tutti i tuoi elementi navigabili e interattivi devono essere utilizzabili da utenti diversi.
Comprensibile: tutti dovrebbero essere in grado di comprendere le informazioni e l'interfaccia utente del tuo sito web.
Robusto: vari tipi di tecnologie assistive e utenti dovrebbero essere in grado di leggere il contenuto del tuo sito web.

B. Best practice per l'accessibilità al Web di WordPress

Tenendo presente i principi di cui sopra, puoi seguire i seguenti passaggi per rendere il tuo sito WordPress accessibile ai disabili:

Migliora l'accessibilità del testo

Tutti, compresi i non vedenti, dovrebbero essere in grado di leggere il testo sul tuo sito web. Sebbene sia possibile utilizzare caratteri di grandi dimensioni come impostazione predefinita, fornire testo ridimensionabile aumenterà ulteriormente la leggibilità. Gli utenti ipovedenti possono aumentare la dimensione del carattere secondo la loro convenienza utilizzando questa funzione.

Inoltre, assicurati di aggiungere alternative di testo come tag alt ove necessario. WP Accessibility è uno dei plugin di accessibilità di WordPress che può aiutarti ad aggiungere testo ridimensionabile, contrasto cromatico, aggiungere titoli di post per leggere più link e fornire testo alternativo adatto.

Fronte e retro strutturati

Ciascuna delle tue pagine web deve avere un front-end e un back-end ben strutturati. Non solo aumenta la leggibilità complessiva dei tuoi contenuti, ma rende anche più facile per gli strumenti di assistenza trasmettere il messaggio agli utenti disabili. Puoi utilizzare elementi HTML come tag di intestazione semantica e meta-descrizioni per migliorare il back-end.

Assicurati di utilizzare elenchi puntati, paragrafi brevi e contenuti ben organizzati e puntuali dovrebbero aiutare a migliorare il front-end. Dovresti anche utilizzare titoli e titoli appropriati per definire varie sottosezioni di contenuto. Evita di utilizzare animazioni e GIF appariscenti in quanto non sono compatibili con l'accessibilità.

Inoltre, aggiungi Salta collegamenti per semplificare la navigazione del contenuto per gli utenti di screen reader. Questa semplice funzione di accessibilità consente agli utenti di passare da una sezione all'altra del contenuto senza dover passare attraverso materiale non necessario.

Navigazione da tastiera per una migliore interazione

Devi anche assicurarti che il tuo sito web sia navigabile da tastiera. Dovrebbe includere collegamenti e menu, in particolare menu a discesa. Tutti gli utenti dovrebbero essere in grado di accedere a elementi come collegamenti, menu, pulsanti e moduli utilizzando Tab (avanti) e Maiusc+Tab (indietro).

Devi anche utilizzare un indicatore di messa a fuoco visibile, che mostra agli utenti disabili dove si trovano su una pagina web. I temi WordPress possono spesso ripristinare lo stile di messa a fuoco predefinito. Assicurati di utilizzare un tema WordPress che non reimposta questa funzione. Il tema di accessibilità Divi può aiutarti a impostare una navigazione adatta alla tastiera con menu a discesa accessibili e contorni visivi per elementi focalizzabili.

Aggiungi punti di riferimento ARIA

ARIA sta per Accessible Rich Internet Applications. Con un ruolo di riferimento ARIA, puoi definire diverse regioni di una pagina Web, consentendo agli utenti di tecnologie assistive di navigare nel tuo sito Web con facilità.

I ruoli chiave di ARIA più comuni includono un banner, principale, complementare, informazioni sui contenuti, ricerca e navigazione.

Banner: definisce l'intestazione del sito come il logo, il nome dell'azienda o il titolo del sito Web.
Principale: definisce il contenuto principale della pagina web.
Complementare: rileva il contenuto di supporto che è una parte essenziale del contenuto principale.
Informazioni sul contenuto: fornisce informazioni sui documenti principali come note a piè di pagina, copyright e dichiarazioni sulla privacy.
Cerca: indica il modulo di ricerca sul tuo sito.
Navigazione: contrassegna gli elementi di navigazione di una pagina web.

Il miglior vantaggio dell'utilizzo dei punti di riferimento ARIA è che possono funzionare con elementi HTML5 già semantici. Di conseguenza, puoi usarli con elementi HTML5 nei temi WordPress esistenti.

Elementi interattivi: contrasto di colore

Per elementi interattivi come CTA e moduli, usa sempre colori ad alto contrasto come sfondo del testo. Mentre il livello AA WCAG 2.0 richiede un rapporto di contrasto di almeno 4:5:1 per il testo normale e 3:1 per il testo di grandi dimensioni, il livello AAA richiede un rapporto di contrasto di almeno 7:1 per il testo normale e 4:5: 1 per testo grande.

Di solito, il testo nero su sfondo bianco offre il miglior contrasto cromatico. Puoi anche usare testo nero su sfondo giallo e viceversa. Tuttavia, evita combinazioni come testo verde su sfondo rosso o testo rosso su sfondo verde.

Parole d'addio

L'accessibilità del sito web si estende anche ad altri elementi interattivi, come i contenuti multimediali, sul tuo sito web. Assicurati che nessuno dei contenuti multimediali come video, audio, cursori o caroselli abbia l'opzione di riproduzione automatica predefinita in quanto rappresenta una barriera significativa per gli utenti disabili. Invece, tutti i contenuti multimediali dovrebbero iniziare a essere riprodotti solo dopo l'interazione dell'utente.

Oltre a trascrizioni video, descrizioni audio e didascalie, assicurati di utilizzare lettori multimediali accessibili. Puoi utilizzare un plug-in come Able Player, che ti consente di aggiungere video e audio racchiusi in un lettore multimediale accessibile su qualsiasi pagina del tuo sito WordPress.

Rendere accessibile il tuo sito Web WordPress richiederà di modificarne il design e il flusso di sviluppo e può essere eseguito tramite un processo manuale con un consulente. Una soluzione di accessibilità web automatica richiede un piccolo investimento di tempo e risorse porterà numerosi vantaggi, tra cui un'immagine positiva del marchio, una più ampia copertura del mercato, un migliore posizionamento nei risultati di ricerca e, per non parlare, un aumento delle vendite.

Se hai ancora dubbi su come rendere accessibile il tuo sito WordPress, sentiti libero di lasciare le tue domande nei commenti.