Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

La tecnica off-left per contenuti accessibili

Un'alternativa accessibile all'uso della proprietà display:none
Un'alternativa accessibile all'uso della proprietà display:none
Link copiato negli appunti

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


Ti consigliamo anche