Accessibilità dei contenuti generati tramite CSS

La maggior parte degli screen reader riconosce i contenuti generati tramite CSS, ma è bene fare attenzione a come vengono utilizzati.

Se avete utilizzato la proprietà content dei CSS, sapete già quanto sia utile per inserire del contenuto in abbinamento agli pseudo-elementi :after e :before.

Utilizzarla è semplicissimo, visto che il css:

p:before {
   content: "Inizio";
}

p:after {
   content: "Fine";
}

Agisce sul codice della pagina inserendo del contenuto subito prima e subito dopo l’elemento selezionato (il paragrafo in questo caso).

Mi sono chiesto a che punto fosse il supporto degli screen reader per contenuti inseriti in questo modo. Si tratta di testo non esistente all’interno della pagina html, e non è quindi scontato che sia accessibile a tutti i visitatori.

Screen reader e compatibilità

Su tink.uk trovate un ottimo articolo per approfondire la questione, con un’utile tabella riassuntiva del supporto degli screen reader. Il risultato dell’analisi è positivo: la maggior parte dei browser supporta i contenuti generati tramite CSS, e di conseguenza gli screen reader riescono a riconoscerli. Internet Explorer (è stata testata la versione 11) è l’unico browser che non li interpreta, e non vengono quindi letti per chi usa uno screen reader.

Attenzione: questo significa che la proprietà content non è supportata da Internet Explorer in abbinamento ad uno screen reader, anche se il contenuto viene visualizzato correttamente. La compatibilità dei CSS generated content è ormai universale.

Contenuto o presentazione?

Vorrei però chiarire un punto fondamentale: i contenuti generati tramite CSS dovrebbero essere usati esclusivamente a scopo di presentazione. Il contenuto effettivo deve rimanere nell’HTML: i fogli di stile servono ad altro.

Questo però non diminuisce l’utilità della proprietà content e ci sono numerosi modi di sfruttarla:

• Per inserire icone usando web font come FontAwesome
• Per inserire delle immagini usando come valore url(img.png), come succede per background-image
• Per avere a disposizione elementi addizionali nell’HTML a scopo di presentazione

Io mi trovo spesso ad utilizzarla per questi motivi, ed è un grande aiuto per tenere il codice HTML ridotto al minimo indispensabile. Non abusatene però: le icone sono il caso limite. Se iniziate ad avere bisogno di visualizzare dei contenuti testuali e li state inserendo tramite CSS, probabilmente è il caso di ripensarci.

Nota di chiusura: questo blog oggi compie 9 anni. Tanto è passato dal primo post del 9 aprile 2006 e negli ultimi tempi mi sono promesso numerose volte di tornare a scrivere con una certa frequenza, senza però mai riuscire a farlo. Facciamo così: questa volta non dico niente, e vediamo cosa succede nei prossimi mesi :)