Tecnica Screen Reader su siti WordPress

La classe CSS “screen-reader-text” fa parte del Codex WordPress quindi, in sostanza, è molto probabile che sia presente anche nel tuo sito WordPress. Questa classe è usata:

• Per nascondere il testo visivamente, mantenendolo attivo con Screen Reader. È importante per fornire un testo alternativo a chi usa la tecnologia assistiva (WCAG SC 1.1.1 livello A);
• Per skip link per assicurare la navigazione con tastiera quando un link riceve il :focus (WCAG SC 2.4.1 livello A);

Avevo già parlato di una classe simile in uno nei post precedenti. Sul web si trova con il nome “sr-only”. Questa classe CSS ha le stesse proprietà ma è specifica per WordPress ed esiste dal … 2009.

Ne parlo con piacere perché ogni tanto bisogna dire che sono stati fatti tanti passi in avanti nell’ambito dell’accessibilità digitale. Questo argomento è stato affrontato anche nel panel sull’anniversario dei 20 anni della Legge Stanca (video su YouTube).

Nel tuo sito WordPress potresti avere la necessità di rendere alcuni testi leggibili solo con Screen Reader. Ad esempio, potresti voler nascondere alcuni titoli per ragioni di layout grafico. Come fare se nel tuo sito usi un Visual Composer come Elementor?

All’inizio della homepage hai messo una hero section e cambi il titolo H1 e i testi in base al periodo. Questo può avere due problemi:

• Accessibilità, anche se c’è il metatitle, potrebbe essere strano iniziare il sito senza dire a cosa serve. Sarebbe come un libro senza copertina;
• SEO, sappiamo che l’accessibilità è strettamente legata alla SEO. Di conseguenza, se cambiamo spesso il titolo H1, non è possibile fissare una strategia sulla pagina.

Una soluzione pratica potrebbe essere di far precedere alla hero section un titolo H1 con un breve testo informativo. Basta assegnare la classe “screen-reader-text” al blocco che contiene il testo. Il titolo nella hero section diventa un titolo H2, così segue l’ordine gerarchico. Questa tecnica può essere usata anche da persone non esperte, con un minimo di formazione.

Nella slide ho inserito qualche esempio con alcuni dei Visual Composer e sistemi di gestione a blocchi più usati:

1. Elementor
2. Gutenberg
3. Divi
4. WPBakery

Tutti questi sistemi prevedono la possibilità di assegnare una classe CSS dopo aver selezionato il blocco o un elemento testo al suo interno.

Seleziona il blocco dove hai inserito il testo, quindi spostati nel pannello Elementor. Cerca il campo CSS Classes. Qui puoi incollare la classe CSS “screen-reader-text”.

Consiglio: quando aggiungi questa classe CSS, il blocco viene nascosto e non puoi più selezionarlo. Come fare? Ti consiglio di aprire la funzione Navigator, così puoi accedere alla mappa dei blocchi usati nella pagina.

Seleziona il blocco dove hai messo il testo. A destra troverai il campo Additional CSS class(es). Incolla qui la classe CSS “screen-reader-text”. Adesso il blocco sarà leggibile solo con Screen Reader.

Il metodo è molto simile. Seleziona il blocco con dentro il testo da nascondere. Vai nelle impostazioni e accedi alla sezione Advanced. Qui trovi il campo CSS Class dove puoi scrivere la classe CSS “screen-reader-text”. Adesso il blocco è leggibile solo con Screen Reader.

Ultimo Visual Composer analizzato. Anche su WPBakery basta selezionare il blocco con il testo. Nelle impostazioni generali trovi il campo Extra class name in cui devi inserire la classe CSS “screen-reader-text”. Il gioco è fatto.