In questo articolo non vorrei discutere delle caratteristiche di accessibilità già presenti in WordPress, ma delle pratiche da adottare per creare temi di WordPress accessibili o per lo meno non inaccessibili. Alcune delle raccomandazioni che leggerete potranno sembrarvi estreme, ma riflettono lo stato dell'arte delle tendenze in fatto di accessibilità.
Ridurre al minimo JavaScript
Il punto è questo: le tecnologie assistive hanno cominciato a supportare JavaScript solo da alcuni anni, ma il loro supporto non può in alcun caso essere equiparato a quello dei normali browser.
Un altro aspetto da tenere presente è la difficoltà nell'aggiornamento della tecnologia in uso dall'utente: aggiornare uno screen reader (lettore di schermo) è cosa ben più ardua dell'aggiornare un browser. Molto spesso l'aggiornamento richiede una spesa aggiuntiva, quindi molti utenti ci rinunciano.
Nello specifico, JavaScript non dovrebbe:
- Generare contenuto, né in modo tradizionale né in modalità asincrona (AJAX).
- Aprire finestre popup.
- Nascondere elementi utilizzando i valori delle proprietà CSS
displayovisibility. - Intercettare l'ordine di tabulazione della pagina.
- Intercettare gli eventi dei form relativi al focus o alla digitazione.
- Creare animazioni continue fuori dal controllo dell'utente.
- Disabilitare i tasti del mouse dell'utente.
- Vincolare agli eventi il funzionamento normale degli elementi HTML (link, bottoni ecc.).
Il punto 3 in pratica taglia fuori tutti gli effetti visuali delle principali librerie JavaScript e di tutti i plugin a loro associati. Il punto 5 rende di fatto nulla l'efficacia della validazione inline dei form e il punto 6 elimina dalle possibilità praticabili tutti gli slideshow automatici. L'ultimo punto, infine, impone che ogni elemento HTML venga usato solo per lo scopo che gli è proprio e non al fine di eseguire un'azione JavaScript.
Uso accorto dei CSS
I CSS operano sia sul fronte della leggibilità di un documento sia su quello della scalabilità dello stesso a seconda della diversa risoluzione dello schermo. Per quanto riguarda la leggibilità del testo, i font devono essere di dimensione adeguata e comunque mai al di sotto del 100%. Il colore del testo e lo sfondo devono avere un contrasto convalidato dagli strumenti di verifica del W3C. I blocchi di testo dovranno avere una larghezza ed un'interlinea adeguata per facilitare la lettura.
Da evitare in tal senso:
- Gradienti.
- Ombreggiature del testo.
- Animazioni.
- Transizioni.
- Contenuto generato con funzione di informazione.
- Web fonts di difficile lettura.
- Trasformazioni.
- Uso delle proprietà
displayevisibilityin alcune tecniche (come l'image replacement).
Sul fronte della scalabilità si raccomanda l'uso di layout fluidi, agevolati dove possibile dalle Media Queries CSS3.
Prima i contenuti
I contenuti principali andrebbero posti il più in alto possibile nella struttura della pagina. Se si hanno molte voci di navigazione, si dovrebbe consentire all'utente di saltare la navigazione.
L'ordine delle intestazioni HTML (heading) è fondamentale: si dovrebbe sempre rispettare la gerarchia delle intestazioni e non usarle a scopo presentazionale. Le immagini dovrebbero avere un attributo alt che aggiunga delle informazioni utili all'immagine e che effettivamente sia d'aiuto all'utente.
In tal senso è inutile inserire un'immagine in evidenza con il titolo del post. Si possono invece usare i custom fields in questo modo:
$featured_image_alt = get_post_meta('image-alt', true);
$featured_image = get_the_post_thumbnail(get_the_ID(), 'full', array( 'alt' => $featured_image_alt[0], 'title' => '' ));
In questo modo possiamo decidere con più autonomia qual'è il testo migliore da inserire.
I link HTML che si aprono in una nuova finestra dovrebbero sempre essere segnalati. Il loro attributo title può essere usato per descrivere la risorsa collegata, ma sempre in modo da aggiungere informazioni utili senza mai replicare il testo del link.
I file video ed audio dovrebbero avere una descrizione alternativa leggibile dagli utenti di tecnologie assistive. In tal senso creare degli shortcode ad hoc può essere un'ottima soluzione.