L’accessibilità web non è un dettaglio tecnico da sistemare alla fine, quando il sito è già online. È una parte fondamentale del progetto, esattamente come la grafica, la SEO, la velocità di caricamento e la sicurezza.
Un sito accessibile è un sito che può essere usato dal maggior numero possibile di persone: persone con disabilità visive, motorie, uditive, cognitive, utenti anziani, utenti che navigano solo da tastiera, persone che usano screen reader, persone che hanno difficoltà temporanee o semplicemente utenti che stanno navigando in condizioni non ideali.
Pensiamo a un esempio molto concreto: un testo grigio chiaro su sfondo bianco non crea problemi solo a una persona ipovedente. Crea problemi anche a chi guarda il sito da mobile sotto il sole. Un pulsante troppo piccolo non è scomodo solo per chi ha difficoltà motorie. È scomodo anche per chi sta usando lo smartphone con una mano. Un form senza etichette chiare non penalizza solo chi usa tecnologie assistive. Penalizza chiunque non capisca cosa deve inserire in un campo.
Ecco perché parlare di accessibilità significa parlare di qualità del sito.
Cosa significa davvero accessibilità web
Accessibilità web significa progettare contenuti, interfacce e funzionalità in modo che siano percepibili, utilizzabili, comprensibili e tecnicamente robuste.
Questi quattro concetti sono anche alla base delle WCAG, cioè le Web Content Accessibility Guidelines, le linee guida internazionali sviluppate dal W3C per rendere i contenuti web più accessibili. Le WCAG 2.2 coprono un ampio insieme di raccomandazioni pensate per persone con disabilità visive, uditive, motorie, cognitive, linguistiche, neurologiche e di apprendimento, e il W3C specifica anche che applicarle migliora spesso l’usabilità per tutti gli utenti.
In pratica, un sito accessibile dovrebbe permettere a una persona di:
- navigare senza mouse;
- leggere i testi con sufficiente contrasto;
- ingrandire la pagina senza perdere contenuti;
- capire dove si trova all’interno del sito;
- usare form, menu, popup e pulsanti anche con tastiera o screen reader;
- guardare un video con sottotitoli quando necessari;
- comprendere link, titoli e istruzioni anche fuori dal contesto visivo;
- evitare animazioni fastidiose o contenuti che lampeggiano;
- non essere bloccata da CAPTCHA, modali, slider o elementi interattivi mal costruiti.
L’accessibilità, quindi, non riguarda soltanto il codice. Riguarda anche il design, il copy, la struttura della pagina, il modo in cui si scrivono i testi, la scelta delle immagini, l’organizzazione dei contenuti e persino il tono delle istruzioni.
Accessibilità in Italia ed Europa: perché oggi è ancora più importante
In Europa il tema dell’accessibilità digitale è diventato sempre più centrale. L’European Accessibility Act punta a creare requisiti comuni di accessibilità per determinati prodotti e servizi all’interno dell’Unione Europea, riducendo le differenze normative tra i vari Stati membri. La Commissione Europea indica tra i servizi e prodotti coperti anche computer e sistemi operativi, bancomat e biglietterie automatiche, smartphone, servizi di telefonia, servizi bancari, trasporto passeggeri, e-book ed e-commerce.
In Italia, il recepimento della Direttiva europea 2019/882 è avvenuto con il Decreto Legislativo 82/2022. Le Linee Guida AgID del 2026 indicano che il decreto è entrato in vigore il 16 luglio 2022, ma che le relative disposizioni hanno effetto dal 28 giugno 2025.
Questo non significa che ogni piccolo sito vetrina abbia automaticamente gli stessi obblighi di una banca, di un grande e-commerce o di un servizio pubblico. Significa però che la direzione è molto chiara: l’accessibilità non è più un argomento “di nicchia”, ma un requisito progettuale, tecnico e legale sempre più importante.
Il riferimento tecnico europeo più citato è la norma EN 301 549, che definisce i requisiti di accessibilità per prodotti e servizi ICT. AccessibleEU la descrive come uno standard applicabile a prodotti e servizi basati sulle tecnologie dell’informazione e della comunicazione, compresi siti web, applicazioni mobili, software, hardware e combinazioni di hardware e software.
Le Linee Guida AgID richiamano inoltre EN 301 549 v.3.2.1 e WCAG 2.1 come riferimenti operativi per siti web, documenti e applicazioni mobili. Nella scheda dedicata ai siti web vengono citati criteri come contenuti non testuali, contrasto minimo, ridimensionamento del testo, navigazione da tastiera, salto dei blocchi, titolazione della pagina, ordine del focus, scopo dei collegamenti, intestazioni, etichette, errori nei form e messaggi di stato.
Dal punto di vista pratico, oggi ha senso lavorare almeno con un obiettivo WCAG 2.1 livello AA, tenendo però d’occhio anche WCAG 2.2, perché il W3C consiglia di usare la versione più aggiornata quando si sviluppano o aggiornano criteri di accessibilità. WCAG 2.2 è diventata raccomandazione W3C il 5 ottobre 2023 e aggiunge nuovi criteri rispetto alla 2.1.
Accessibilità e WordPress: da dove partire
WordPress può essere una buona base per costruire siti accessibili, ma non rende automaticamente accessibile un sito. Il risultato dipende da tema, plugin, builder, codice personalizzato, contenuti, immagini, form, menu e scelte grafiche.
Un errore frequente è pensare: “Uso WordPress, quindi sono a posto”. No. WordPress è solo lo strumento. L’accessibilità dipende da come viene usato.
La documentazione ufficiale WordPress spiega che un tema dovrebbe generare pagine utilizzabili da tutti, comprese le persone che non vedono o non usano il mouse, e sottolinea che l’accessibilità dovrebbe essere considerata fin dall’inizio del progetto. La stessa documentazione chiarisce anche una cosa importante: il tag “accessibility-ready” non significa che un tema sia automaticamente conforme al livello WCAG AA, ma che rispetta alcuni requisiti minimi definiti dal team di revisione dei temi WordPress.
Quindi il punto non è installare “il plugin magico”, ma costruire bene l’intero sito.
Come impostare WordPress per un sito più accessibile
La prima scelta riguarda il tema. È preferibile usare un tema leggero, ben mantenuto, con codice pulito e una buona attenzione alla semantica HTML. In un contesto WordPress moderno, temi come GeneratePress, Kadence, Astra o i temi block ufficiali possono essere buone basi, ma vanno comunque configurati e testati.
Il tema dovrebbe gestire bene:
- struttura semantica della pagina;
- navigazione da tastiera;
- menu accessibili;
- focus visibile;
- contrasto dei colori;
- titoli ordinati;
- compatibilità mobile;
- zoom del testo;
- skip link, cioè link per saltare direttamente al contenuto principale;
- uso corretto di header, main, nav, footer e landmark.
La seconda scelta riguarda i plugin. Ogni plugin aggiunge codice, interfacce e possibili problemi. Uno slider, un popup, un form, una gallery, un accordion o un sistema di prenotazione possono diventare barriere se non sono sviluppati bene.
Prima di installare un plugin bisognerebbe chiedersi:
- è aggiornato?
- è compatibile con la versione attuale di WordPress?
- la sua interfaccia si usa da tastiera?
- i pulsanti hanno nomi comprensibili?
- i messaggi di errore sono leggibili?
- genera HTML pulito?
- crea elementi interattivi accessibili?
Su WordPress bisogna fare attenzione soprattutto a page builder, popup builder, slider, plugin per modali, plugin per cookie banner, form builder e plugin e-commerce. Non perché siano sbagliati in sé, ma perché generano molte parti interattive. E ogni parte interattiva deve poter essere usata anche senza mouse.
Il falso mito del plugin per l’accessibilità
Molti siti installano un piccolo widget con l’icona dell’omino, pensando di aver risolto tutto. Questi strumenti possono offrire alcune funzioni utili, come aumentare il contrasto o ingrandire il testo, ma non correggono automaticamente un sito costruito male.
Se un form non ha label corrette, il widget non risolve davvero il problema. Se un popup blocca la navigazione da tastiera, il widget non trasforma magicamente quel popup in un componente accessibile. Se i titoli sono usati solo per ragioni estetiche e non seguono una gerarchia logica, il widget non ricostruisce la struttura informativa della pagina.
Un sito accessibile nasce da scelte corrette di progettazione, codice e contenuto. Il widget può essere un supporto, non la soluzione principale.
La struttura di una pagina accessibile
Una pagina accessibile deve avere una struttura chiara. Questo vale sia per gli utenti sia per i motori di ricerca. In realtà, accessibilità e SEO spesso vanno nella stessa direzione: entrambe premiano ordine, chiarezza, testi descrittivi, link comprensibili e contenuti ben organizzati.
Una pagina tipica dovrebbe avere un solo H1, cioè il titolo principale. Gli H2 dovrebbero dividere le sezioni principali. Gli H3 dovrebbero approfondire sotto-argomenti collegati agli H2. Non bisogna scegliere H2, H3 o H4 in base alla dimensione grafica del testo, ma in base alla struttura logica.
Esempio sbagliato:
- H1: Servizi
- H4: Siti web professionali
- H2: Perché scegliere me
- H5: Contattami
Esempio corretto:
- H1: Realizzazione siti web professionali
- H2: A chi è rivolto il servizio
- H2: Cosa include la realizzazione del sito
- H3: Analisi iniziale
- H3: Design e sviluppo WordPress
- H3: Ottimizzazione SEO di base
- H2: Come funziona il processo
- H2: Domande frequenti
- H2: Richiedi un preventivo
Questa struttura aiuta chi legge, aiuta Google e aiuta anche gli screen reader, perché molti utenti navigano la pagina saltando da un titolo all’altro.
Come scrivere il copy in modo accessibile
Il copy accessibile non è un testo banale. È un testo chiaro, diretto, comprensibile e ben organizzato.
Scrivere in modo accessibile significa evitare frasi inutilmente complesse, spiegare i concetti tecnici, usare parole concrete e non dare per scontato che il lettore conosca già l’argomento.
Un buon copy accessibile:
usa frasi brevi quando possibile;
- spiega gli acronimi alla prima occorrenza;
- evita muri di testo;
- divide i contenuti in paragrafi;
- usa titoli descrittivi;
- usa liste quando aiutano davvero;
- non nasconde informazioni importanti dentro immagini;
- non usa solo il colore per comunicare un messaggio;
- rende chiari i passaggi successivi.
Per esempio, un pulsante con scritto “Clicca qui” è poco accessibile e poco utile. Meglio scrivere “Richiedi un preventivo”, “Scarica la guida in PDF”, “Leggi l’articolo sul web design accessibile” o “Prenota una consulenza”.
Lo stesso vale per i link. Un link dovrebbe essere comprensibile anche se letto fuori contesto. “Scopri di più” ripetuto dieci volte nella stessa pagina non aiuta nessuno. Meglio un link come “Scopri come funziona la realizzazione di un sito WordPress”.
Il contenuto di una pagina tipica: esempio pratico
Immaginiamo una pagina servizio di un web designer, per esempio “Realizzazione siti web WordPress”.
Una struttura accessibile potrebbe essere questa.
H1: Realizzazione siti web WordPress per aziende e professionisti
Subito sotto, un paragrafo introduttivo chiaro:
“Creo siti WordPress professionali, responsive e ottimizzati per aiutare aziende, attività locali e professionisti a presentarsi meglio online, ricevere contatti e comunicare in modo più efficace.”
Poi una call to action visibile:
“Parlami del sito che hai in mente”
Il testo del pulsante è importante. Non deve essere generico. Deve dire cosa succede dopo il clic.
Poi una sezione H2:
“A chi è rivolto questo servizio”
Qui si può spiegare, con paragrafi semplici, che il servizio è pensato per aziende, artigiani, negozi, studi professionali, attività locali o freelance che vogliono un sito chiaro, veloce e facilmente aggiornabile.
Poi un altro H2:
“Cosa include il sito”
Questa sezione può contenere una lista ordinata o una serie di card, ma ogni card deve avere un titolo vero, non solo un’icona. Le icone possono aiutare visivamente, ma non devono essere l’unico modo per capire il contenuto.
Esempio:
- Struttura delle pagine principali
- Design responsive per desktop, tablet e smartphone
- Ottimizzazione base per Google
- Configurazione WordPress
- Form di contatto accessibile
- Test di navigazione da tastiera
- Controllo di testi, immagini e link
Poi una sezione H2:
“Come funziona il processo”
Qui si può usare una timeline, ma bisogna fare attenzione: se la timeline è solo grafica, rischia di essere poco accessibile. Meglio che ogni fase sia anche testo HTML leggibile.
Esempio:
- Analisi iniziale
- Definizione della struttura
- Progettazione grafica
- Sviluppo WordPress
- Inserimento contenuti
- Test tecnici e accessibilità
- Messa online
Poi una sezione H2:
“Perché l’accessibilità è importante”
Qui si può spiegare che un sito più accessibile è anche più chiaro, più ordinato, più facile da usare e più professionale.
Poi una sezione H2:
“Domande frequenti”
Le FAQ possono essere utili, ma se sono a fisarmonica devono funzionare anche da tastiera. Ogni domanda deve essere un vero pulsante, non un semplice div cliccabile.
Infine il form di contatto.
Il form deve avere label visibili, messaggi di errore chiari e un pulsante con testo descrittivo. “Invia” può andare bene, ma “Invia la richiesta” è meglio.
Immagini: alt text, immagini decorative e immagini informative
Le immagini sono uno dei punti più delicati.
Ogni immagine dovrebbe avere un testo alternativo quando comunica un’informazione. Il testo alternativo non serve a riempire keyword SEO a caso. Serve a descrivere il contenuto o la funzione dell’immagine.
Esempio sbagliato:
“sito web Prato web designer SEO WordPress professionale”
Esempio corretto:
“Schermata di un sito WordPress responsive visualizzato su computer e smartphone”
Se l’immagine è puramente decorativa, può avere alt vuoto. Questo evita che uno screen reader legga informazioni inutili.
Esempio:
alt=""
Se invece l’immagine è un’infografica, il contenuto dell’infografica dovrebbe essere disponibile anche come testo nella pagina. Non basta caricare un’immagine piena di testo e pensare che sia accessibile.
Nel caso delle immagini in evidenza degli articoli WordPress, è utile inserire un alt descrittivo nella Libreria Media. Se l’immagine è solo decorativa, si può anche lasciare vuoto, ma bisogna farlo con consapevolezza.
Colori e contrasto
Il contrasto è uno degli aspetti più visibili dell’accessibilità. Un sito elegante ma con testi poco leggibili è un sito che fallisce nel suo compito principale: comunicare.
Il testo deve avere sufficiente contrasto rispetto allo sfondo. WordPress ricorda che per il testo normale il rapporto di contrasto indicato dal livello AA delle WCAG è 4.5:1, e che il colore non dovrebbe essere l’unico modo per identificare link, controlli o messaggi di errore.
Quindi attenzione a:
- testi grigio chiaro su bianco;
- testi bianchi su immagini molto luminose;
- pulsanti con testo poco leggibile;
- link distinguibili solo dal colore;
- errori nei form indicati solo in rosso;
- placeholder troppo chiari;
- testi piccoli sopra sfondi fotografici.
Un buon sito può essere raffinato anche con contrasti corretti. Accessibile non significa brutto. Significa progettato meglio.
Font, dimensioni e leggibilità
Anche il font ha un ruolo importante. Non serve scegliere per forza un carattere “speciale per l’accessibilità”, ma bisogna evitare scelte che rendano la lettura faticosa.
Meglio usare font chiari, dimensioni adeguate, interlinea generosa e paragrafi non troppo larghi.
Per un sito aziendale o professionale, una buona base può essere:
- testo corpo tra 16 e 18 px;
- line-height tra 1.5 e 1.8;
- paragrafi non troppo lunghi;
- larghezza del contenuto limitata;
- titoli ben distinguibili;
- spazio sufficiente tra sezioni.
Il sito deve restare leggibile anche se l’utente aumenta lo zoom del browser. La documentazione WordPress sottolinea che contenuti e funzionalità dovrebbero restare disponibili quando il testo viene ridimensionato fino al 200%, senza sovrapposizioni o perdita di contenuto.
Navigazione da tastiera
Un sito accessibile deve poter essere navigato senza mouse.
Questo significa che con il tasto Tab devo poter raggiungere menu, link, pulsanti, form, checkbox, radio button, popup e ogni elemento interattivo. Con Shift + Tab devo poter tornare indietro. Con Invio o Spazio devo poter attivare i comandi corretti.
Il focus deve essere visibile. Se navigo con la tastiera e non capisco dove mi trovo, il sito è un labirinto.
Errore molto comune: rimuovere il bordo del focus con CSS perché “è brutto”.
Esempio da evitare:
*:focus {
outline: none;
}Se si elimina lo stile predefinito, bisogna sostituirlo con uno stile migliore, non cancellarlo.
Esempio migliore:
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid currentColor;
outline-offset: 4px;
}Questo non è solo un dettaglio tecnico. È ciò che permette a molte persone di usare davvero il sito.
Menu, header e link “salta al contenuto”
Un menu accessibile deve essere chiaro e utilizzabile da tastiera. I sottomenu devono aprirsi e chiudersi correttamente. I pulsanti del menu mobile devono avere un nome accessibile. L’utente deve capire se il menu è aperto o chiuso.
È buona pratica inserire anche uno skip link, cioè un link nascosto visivamente ma visibile al focus, che permette di saltare direttamente al contenuto principale.
Esempio:
<a class="skip-link" href="#main-content">Salta al contenuto principale</a>E poi:
<main id="main-content">
<!-- contenuto principale -->
</main>La documentazione WordPress descrive gli skip link come un meccanismo che permette agli utenti di andare direttamente al contenuto o alla navigazione, evitando di dover attraversare ogni volta aree ripetitive come header e menu.
Form accessibili
I form sono spesso il punto in cui l’accessibilità crolla. Eppure sono fondamentali, soprattutto in un sito professionale: richiesta preventivo, contatti, iscrizione newsletter, checkout, prenotazioni.
Un form accessibile deve avere:
- label visibili;
- campi associati correttamente alle label;
- istruzioni chiare;
- messaggi di errore comprensibili;
- focus visibile;
- ordine di tab coerente;
- pulsante di invio descrittivo;
- messaggio di conferma percepibile;
- nessuna dipendenza esclusiva dal colore;
- autocomplete quando utile.
Il placeholder non sostituisce la label. Un campo con dentro scritto “Email” come placeholder non basta, perché il testo sparisce quando l’utente scrive e può essere poco leggibile.
Esempio corretto:
<label for="email">Indirizzo email</label>
<input id="email" name="email" type="email" autocomplete="email">Per un form di contatto WordPress, anche con Contact Form 7, WPForms, Fluent Forms o Gravity Forms, bisogna controllare sempre l’HTML generato. Non basta che il form “funzioni”. Deve essere comprensibile.
Messaggio di errore poco utile:
“Errore.”
Messaggio migliore:
“Inserisci un indirizzo email valido, per esempio nome@example.com.”
Il tono conta. Un buon messaggio di errore non deve sembrare una sgridata. Deve aiutare l’utente a completare l’azione.
Popup, modali e banner cookie
Popup e modali sono pericolosi dal punto di vista dell’accessibilità. Non perché siano sempre vietati, ma perché devono essere costruiti molto bene.
Un popup accessibile dovrebbe:
- ricevere il focus quando si apre;
- non lasciare il focus dietro al popup;
- avere un pulsante di chiusura chiaro;
- potersi chiudere con Esc;
- essere navigabile da tastiera;
- avere un titolo comprensibile;
- non aprirsi in modo aggressivo;
- non impedire la lettura della pagina;
- non creare trappole da cui l’utente non riesce a uscire.
Anche il cookie banner deve essere accessibile. Deve essere leggibile, navigabile da tastiera, comprensibile e non deve coprire contenuti in modo ingestibile.
Per esempio, un pulsante “Accetta” e un pulsante “Rifiuta” dovrebbero essere entrambi raggiungibili facilmente. Non bisogna obbligare l’utente a fare percorsi complicati solo per rifiutare.
Video, audio e contenuti multimediali
Se una pagina contiene video, bisogna pensare a sottotitoli, trascrizioni e controlli accessibili.
Un video informativo dovrebbe avere almeno sottotitoli quando contiene parlato importante. Se il video comunica informazioni visive indispensabili, può servire anche una descrizione testuale o un’alternativa equivalente.
Un video decorativo in hero, invece, dovrebbe essere gestito con attenzione:
- niente autoplay con audio;
- possibilità di pausa se il movimento distrae;
- contrasto sufficiente del testo sovrapposto;
- fallback immagine;
- peso ottimizzato;
- nessuna informazione essenziale affidata solo al video.
Se nella hero c’è un video emozionale, per esempio luce che filtra nel mare, va benissimo usarlo come atmosfera. Ma il messaggio principale della pagina deve restare nel testo HTML, non dentro il video.
Tabelle accessibili
Le tabelle vanno usate per dati tabellari, non per impaginare contenuti.
Una tabella accessibile dovrebbe avere intestazioni chiare, eventualmente un caption, e una struttura leggibile anche da mobile.
Esempio:
<table>
<caption>Confronto tra sito non accessibile e sito accessibile</caption>
<thead>
<tr>
<th>Elemento</th>
<th>Problema comune</th>
<th>Soluzione accessibile</th>
</tr>
</thead>
<tbody>
<tr>
<td>Link</td>
<td>Testo “clicca qui”</td>
<td>Testo descrittivo del contenuto collegato</td>
</tr>
</tbody>
</table>Su mobile, le tabelle molto larghe possono creare problemi. Meglio progettare tabelle semplici o trasformarle in blocchi leggibili.
Documenti PDF e file scaricabili
Un errore frequente è curare la pagina web e poi caricare PDF non accessibili. Se il PDF contiene informazioni importanti, anche quel documento dovrebbe essere accessibile.
Le Linee Guida AgID collegano anche i documenti non web alla norma EN 301 549, con criteri su contenuti non testuali, sottotitoli, audiodescrizione, informazioni e correlazioni, sequenza significativa, uso del colore, contrasto, ridimensionamento del testo, lingua del documento, errori e focus visibile.
Quando possibile, meglio pubblicare le informazioni direttamente come pagina HTML. L’HTML è più flessibile, più responsive, più facile da aggiornare e più semplice da rendere accessibile rispetto a molti PDF.
WooCommerce ed e-commerce
Per un e-commerce, l’accessibilità diventa ancora più importante perché l’utente deve poter completare un processo: cercare un prodotto, leggere le informazioni, selezionare varianti, aggiungere al carrello, inserire dati, pagare, ricevere conferma.
L’EAA include l’e-commerce tra i servizi coperti a livello europeo. Le Linee Guida AgID fanno inoltre esempi legati a servizi e-commerce e requisiti di accessibilità quando i servizi sono erogabili a consumatori e anche a soggetti che li usano per fini professionali.
In un negozio online bisogna controllare con particolare attenzione:
- ricerca prodotti;
- filtri;
- schede prodotto;
- immagini e gallery;
- varianti colore/taglia;
- prezzi e sconti;
- carrello;
- checkout;
- messaggi di errore;
- metodi di pagamento;
- email transazionali;
- documenti allegati;
- area account.
Un checkout non accessibile non è solo un problema tecnico. È una barriera commerciale.
Accessibilità, SEO e conversioni
Accessibilità e SEO non sono la stessa cosa, ma spesso si aiutano.
Un sito accessibile tende ad avere:
- titoli più ordinati;
- link più descrittivi;
- testi più chiari;
- immagini con alternative corrette;
- struttura HTML più pulita;
- migliore esperienza mobile;
- form più facili da usare;
- contenuti più comprensibili;
- navigazione più logica.
Tutte queste cose fanno bene anche alla SEO e alle conversioni.
Un utente che capisce subito cosa offri, riesce a leggere bene i contenuti, trova il pulsante giusto, compila il form senza errori e naviga senza frustrazione è più propenso a contattarti, acquistare o tornare sul sito.
Come testare l’accessibilità di un sito WordPress
Non esiste un solo test magico. Bisogna combinare strumenti automatici e verifica manuale.
Gli strumenti automatici sono utili per trovare errori evidenti, per esempio contrasti insufficienti, alt mancanti, label assenti, problemi ARIA o struttura dei titoli. Però non capiscono davvero se un testo è chiaro, se un alt è sensato o se il percorso utente è comprensibile.
Una buona verifica pratica dovrebbe includere:
- navigazione completa con tastiera;
- controllo del focus visibile;
- test dello zoom al 200%;
- controllo mobile;
- verifica dei colori;
- controllo dei form;
- test dei popup;
- lettura dei contenuti con screen reader;
- controllo dei titoli H1, H2, H3;
- verifica dei link fuori contesto;
- controllo immagini e alt text;
- test delle pagine più importanti;
- test del checkout, se presente.
Strumenti utili possono essere Lighthouse, axe DevTools, WAVE, Accessibility Insights, SiteImprove Accessibility Checker, contrast checker, NVDA su Windows e VoiceOver su macOS/iOS.
Per un sito WordPress professionale, il controllo non dovrebbe limitarsi alla home. Bisogna testare almeno:
- home page;
- pagina servizio;
- pagina contatti;
- articolo del blog;
- archivio blog;
- pagina categoria;
- form;
- popup;
- menu mobile;
- eventuale pagina carrello/checkout;
- eventuale area riservata.
Checklist indispensabile per rendere un sito più accessibile
Una checklist pratica potrebbe essere questa.
- Il sito ha un solo H1 per pagina.
- I titoli seguono una gerarchia logica.
- I testi sono leggibili e ben contrastati.
- Il sito funziona da tastiera.
- Il focus è sempre visibile.
- Il menu mobile è accessibile.
- I link hanno testi descrittivi.
- Le immagini informative hanno alt corretti.
- Le immagini decorative non disturbano gli screen reader.
- I form hanno label visibili.
- Gli errori nei form sono chiari.
- I pulsanti descrivono l’azione.
- I popup si possono chiudere da tastiera.
- I video non partono con audio automatico.
- I video informativi hanno sottotitoli o alternative.
- Il testo può essere ingrandito senza rompere il layout.
- Il sito è usabile da mobile.
- Il colore non è l’unico modo per comunicare un’informazione.
- I documenti scaricabili sono accessibili o sostituiti da pagine HTML.
- Il contenuto è scritto in modo chiaro.
- Le funzionalità principali sono testate manualmente.
L’accessibilità va mantenuta nel tempo
Un sito può nascere accessibile e diventare meno accessibile dopo qualche mese. Basta caricare immagini senza alt, installare un plugin invasivo, modificare i colori, aggiungere uno slider, creare una landing page con un builder o inserire un form non controllato.
Per questo l’accessibilità dovrebbe entrare nel metodo di lavoro.
Quando si pubblica una nuova pagina, bisognerebbe chiedersi:
- il titolo è corretto?
- la struttura è chiara?
- le immagini hanno alt sensati?
- i pulsanti sono descrittivi?
- il testo è leggibile?
- la pagina funziona da tastiera?
- il form è comprensibile?
- i colori hanno contrasto sufficiente?
- il contenuto è chiaro anche senza vedere la grafica?
Questa mentalità è molto più efficace di una correzione fatta di corsa alla fine.
Conclusione
Rendere accessibile un sito WordPress non significa complicare il progetto. Significa progettarlo meglio.
Un sito accessibile è più ordinato, più leggibile, più robusto e più professionale. Aiuta le persone con disabilità, ma migliora anche l’esperienza di tutti gli utenti. È utile per la SEO, per la conversione, per la reputazione del brand e per la conformità agli standard europei e italiani.
La cosa importante è non trattare l’accessibilità come un’aggiunta finale. Non basta installare un plugin, non basta mettere un’icona in basso a destra, non basta correggere due colori.
Bisogna partire dalla struttura, dal contenuto, dal tema, dai componenti, dai form, dalla navigazione, dai testi e dai test.
In altre parole, un sito accessibile nasce quando design, sviluppo e contenuto lavorano insieme. Ed è proprio lì che un sito smette di essere solo “bello da vedere” e diventa davvero utile per chi deve usarlo.
