CSS  »  Articoli  »  Effetti con CSS 

È 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:

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:

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.

Altri articoli

Altre guide

Altre newsletter