Accessibilità siti web: cosa significa davvero essere conformi alle WCAG con WordPress  

Come Gutenberg è progettato per essere accessibile “by design”

Gutenberg rappresenta un cambio di paradigma nell’approccio di WordPress all’accessibilità siti web, evolvendo da post-hoc fixes ad accessibility-first design. Nonostante le iniziali sfide di accessibilità documentate dal WordPress Accessibility Team nel 2018, Gutenberg ha subito miglioramenti sostanziali e oggi incorpora funzionalità di accessibilità native. 

Definizione di ARIA landmarks e regioni semanticamente significative 

Gutenberg sfrutta gli elementi HTML5 (come <header>, <main>, <nav>, <footer>) che, per specifica, definiscono ruoli di landmark ARIA impliciti, consentendo agli screen reader di individuare rapidamente le aree principali della pagina. 
Oltre ai landmark impliciti, l’editor inserisce markup semantico nel DOM dell’amministrazione, facilitando la navigazione nelle varie sezioni (toolbar, pannello impostazioni, contenuto). 

• Header e Toolbar: il blocco <header> identifica la parte superiore dell’editor, mentre il toolbar container utilizza role=”toolbar” per raggruppare i comandi di blocco. 
• Main e Content Area: l’area di editing è racchiusa in un <main> con role=”region” e aria-label=”Editor di contenuto”, così da essere facilmente raggiungibile con i comandi di navigazione degli screen reader. 
• Sidebar delle impostazioni: quando attivata, viene dichiarata con role=”complementary” e un’etichetta (aria-label=”Impostazioni blocco”), rendendo chiaro agli utenti dove trovare le opzioni del blocco selezionato. 

Questa struttura semantica riduce il rischio che un utente perda informazioni, migliorando la coerenza con i principi di robustezza delle WCAG (Robust) e garantendo che il contenuto sia percepibile e operativo anche con tecnologie assistive.

Modalità di navigazione avanzata e shortcut da tastiera 

Per rendere l’editor completamente operabile da tastiera, Gutenberg introduce due modalità di interazione: 

• editing mode: modalità predefinita, in cui i tasti alfanumerici editano il contenuto del blocco attivo; 
• selection mode: premendo Esc si entra in modalità selezione, che trasforma la tastiera in un dispositivo di navigazione tra blocchi. 

Con l’aggiornamento a WordPress 6.8, poi, le scorciatoie per screen reader sono sempre visibili in editor, indipendentemente dalla risoluzione dello schermo, evitando che utenti con disabilità visive perdano l’accesso ai comandi essenziali. 

Questa attenzione alla navigazione da tastiera e alle scorciatoie risponde direttamente al principio Operable delle WCAG 2.1 AA, assicurando che ogni funzione dell’editor sia raggiungibile senza mouse. 

Verifica del contrasto e supporto a Dark Mode nell’editor 

Controllo in tempo reale del contrasto

Gutenberg integra un sistema di verifica del contrasto colore direttamente nel pannello stile dei blocchi: quando si scelgono colori di testo e sfondo, l’editor segnala immediatamente eventuali combinazioni non conformi a WCAG 2.1 AA con un avviso di tipo: 

“Questa combinazione di colori potrebbe risultare difficile da leggere. Prova un colore testo più scuro o uno sfondo più chiaro.” 

Questo aiuta autori e designer a correggere errori prima della pubblicazione, aderendo al principio Perceivable delle WCAG. 

Reflections del tema e modalità scura

Se il tema front-end supporta una dark mode, Gutenberg riflette tale schema colori nell’editor di blocco, offrendo un’anteprima fedele e migliorando l’accessibilità per chi preferisce sfondi scuri. 

Grazie a questi strumenti, Gutenberg consente un workflow inclusivo, aiutando a rispettare i requisiti di contrasto WCAG senza necessità di tool esterni. 

Automazione di alt text e didascalie integrate 

Campo alt text nel blocco immagine 

Quando si inserisce un blocco Immagine, Gutenberg mostra il campo “Testo alternativo (alt)” nel pannello delle impostazioni a destra. Qui l’autore può digitare una descrizione significativa, obbligatoria per il soddisfacimento del criterio WCAG 1.1. 

Markup semantico per le didascalie 

Le didascalie sono gestite nativamente tramite <figure> e <figcaption> semantici, elementi riconosciuti dagli screen reader come contesto associato all’immagine. Questo garantisce che le caption siano lette subito dopo l’immagine, migliorando la comprensione del contenuto visivo.

Supporto nativo per screen reader e notifiche dinamiche

Gutenberg utilizza la funzione JavaScript wp.a11y.speak() per comunicare agli screen reader messaggi di stato (ad esempio “Blocco aggiunto”, “Blocco spostato”) tramite ARIA live regions nascoste in coda al DOM. Questo assicura che gli aggiornamenti vengano annunciati anche se l’utente non interagisce direttamente con l’elemento. 

Le live regions sono designate con aria-live=”polite” o aria-live=”assertive”, a seconda dell’urgenza del messaggio.  
Così, uno screen reader interrompe la lettura corrente solo per informazioni critiche (es. errori di salvataggio), mentre altri aggiornamenti vengono annunciati al termine della riproduzione corrente. 

Supporto migliorato in WordPress 6.8

Con l’ultima versione, oltre alla visibilità delle scorciatoie, sono stati rifiniti gli annunci live per evitare ripetizioni o messaggi obsoleti, migliorando l’esperienza complessiva di chi utilizza tecnologie assistive.  

Grazie a queste funzionalità, Gutenberg soddisfa il principio Understandable (annunci chiari e contestuali) e contribuisce al principio Robust (compatibilità con diverse tecnologie assistive) offrendo un’esperienza di editing accessibile “by design”: un ambiente in cui redattori e sviluppatori possono creare contenuti conformi alle WCAG 2.1 AA senza sforzi aggiuntivi.