È una buona pratica, purtroppo poco utilizzata, quella di
fornire contenuti di supporto e ausili alla navigazione di pagine
web a utenti di screen reader, browser testuali e dispositivi alternativi.
L'accessibilità è un argomento vasto e complesso: una trattazione
esaustiva si può trovare nella guida Accessibilità dei siti web pratica.
Un ruolo significativo lo giocano però anche i CSS, e sarà questo l'argomento che tratteremo.
Perchè non usare display:none
È una pratica comune nascondere a schermo link di salto ai
contenuti e testo di supporto attraverso una classe CSS che ha un nome ormai
quasi standard, ovvero "hidden". A questa classe viene sovente associata erroneamente
la seguente regola CSS:
.hidden{
display: none
}
Qualcuno dei lettori ricorderà che sulla dichiarazione display:none si basa anche
la prima tecnica di image replacement, ovvero la
FIR, a cui Ë seguita
l'approfondita e critica analisi Facts and opinion about Fahrner Image Replacement.
In breve, il risultato è che usare display:none presenta un problema: ha l'effetto
di non rendere visivamente i contenuti a schermo ma li nasconde anche a diversi screen
reader, soprattutto quelli basati sul rendering engine di Internet Explorer, con conseguente
perdita di informazione a utenti con disabilità e dispositivi di navigazione alternativi.
Per questo motivo display:none, seppure possa sembrare una soluzione pratica e veloce per
nascondere contenuto di supporto a schermo, non andrebbe mai usata.
La tecnica off-left
Ci sono molti modi per nascondere a schermo l'informazione senza usare display:none
e molti possono essere presi in prestito proprio dalle tecniche di image replacement che sono
seguite alla FIR. La tecnica off-left si presenta però quasi pensata proprio per questo motivo.
In sostanza si tratta di portare fuori dalla parte visibile dello schermo link e informazioni
di supporto alla navigazione e consultazione grazie ai posizionamenti assoluti. La classe "hidden"
diventa quindi:
.hidden{
position: absolute;
top: -9999px;left:-9999px;
}
In questo modo gli elementi di pagina a cui viene attribuito la classe "hidden" verranno resi dal
browser, solo non saranno visibili perché fuori dallo schermo. Basterà quindi attribuire nell'HTML
tale classe agli elementi che vorremo nascondere a schermo ma che forniamo proprio per essere
un ausilio alla navigazione e alla consultazione a dispositivi alternativi. Alla prossima.
