Questa è la traduzione dell'articolo Hiding with CSS: Problems and solutions di Roger Johansson pubblicato originariamente su 456 Berea St. il 4 Maggio 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Molti tutorial dedicati a CSS e Javascript suggeriscono di usare la proprietà display:none per nascondere elementi. Può avvenire temporaneamente (per esempio quando si usa Javascript per nascondere o mostrare parti di una pagina in base all'azione dell'utente) o permanentemente (per esempio nelle tecniche di image replacement, nei cosiddetti skip links o negli header strutturali).
Nella maggior parte dei casi, usare display:none per nascondere un elemento è una scelta errata, perché incide negativamente sull'accessibilità. Pensavo che fosse ormai un fatto acquisito, ma apparentemente sono ancora in molti a non essere consapevoli del fatto che si tratta di un problema serio. Per questa ragione, ecco una rapida spiegazione del problema e un suggerimento per una tecnica alternativa (credo che anche questa dovrebbe essere ben nota).
"display:none" significa: non mostrare!
Quello che molti sembrano non comprendere è che display:none significa qualcosa come "Fai in modo che questo elemento non esista. Non mostrarlo. Non stamparlo. Non pronunciare il contenuto". Forse l'esempio più ovvio di come possa causare problemi è quello di una persona che usa uno screen reader e visita un sito che usa display:none per nascondere qualcosa agli utenti che non hanno problemi di vista. Dal momento che molti screen reader ignorano tutto ciò che viene nascosto con display:none, usare questo metodo per nascondere cose come skip link, testo, link di navigazione o header strutturali è un'idea terribile.
Una tecnica alternativa che causa meno problemi è quella detta "off-left" (descritta su questa pagina del wiki di css-discuss). Si tratta di posizionare assolutamente l'elemento nascosto al di fuori dell'area del viewport. Ecco il codice CSS che si usa per ottenere il risultato desiderato:
.structural {
position:absolute;
left:-9999px;
}L'effetto visuale sarà lo stesso che si ottiene con display:none, ma in questo caso chi usa uno screen reader sarà in grado di fruire il contenuto degli elementi nascosti.
Nascondere con i CSS, mostrare con Javascript
Un altro caso in cui è necessario riflettere con attenzione prima di usare i CSS per nascondere un elemento è quello in cui si intende mostrare qualcosa quando l'utente compie una certa azione, per esempio nei menu dinamici o nei testi di aiuto nella compilazione dei form. Se usate Javascript per mostrare qualcosa, dovreste usarlo anche per nasconderlo. Altrimenti, le persone che hanno i CSS attivi e Javascript disabilitato non saranno mai in grado di vedere il contenuto nascosto.
La soluzione è semplice. Invece di usare un id o un nome di classe definiti nel markup per applicare il CSS che nasconde, usate Javascript per aggiungere un nome di classe agli elementi che volete nascondere. Poi create una regola CSS che nasconde gli elementi con quel nome di classe.
Un'opzione alternativa consiste nell'usare Javascript per assegnare all'elemento body una classe tipo "js" e poi usarla nei selettori del foglio di stile.
In entrambi i casi, se CSS e Javascript sono entrambi disponibili, lo script funzionerà come ci si aspetta. Se i CSS sono abilitati ma non Javascript, lo script non funzionerà, ma almeno il contenuto sarà disponibile per tutti.
