Come Nascondere con i CSS. Alternative a Display:None

Traduzione dell’articolo “Hiding with CSS: Problems and solutions” di Roger Johansson

Questo è la traduzione dell’articolo “Hiding with CSS: Problems and solutions” di Roger Johansson, originariamente pubblicato su 456 Berea St. il 4 Maggio 2009. La traduzione è presentata qui con il consenso dell’editore e dell’autore.

Molti tutorial su CSS e Javascript consigliano l’utilizzo della proprietà display: none per nascondere elementi, che sia in modo temporaneo (ad esempio, quando si utilizza Javascript per mostrare o nascondere parti di una pagina in base all’azione dell’utente) o in modo permanente (come nelle tecniche di image replacement, nei cosiddetti skip link o negli header strutturali).

Nella maggior parte dei casi, utilizzare display: none per nascondere un elemento è una scelta sbagliata, poiché può avere impatti negativi sull’accessibilità. Pensavo che questo fosse ormai un concetto consolidato, ma sembra che molti ancora non siano consapevoli del fatto che si tratta di un problema serio. Per questo motivo, ecco una rapida spiegazione del problema e una proposta di una tecnica alternativa (che credo dovrebbe essere ben nota).

display: none significa: non mostrare! Quello che molti sembrano non comprendere è che display: none significa qualcosa del tipo “Fai in modo che questo elemento non esista. Non mostrarlo. Non stamparlo. Non pronunciare il contenuto”. Forse l’esempio più evidente di come ciò possa causare problemi è quello di una persona che utilizza uno screen reader e visita un sito che utilizza display: none per nascondere qualcosa agli utenti non vedenti. Poiché molti screen reader ignorano tutto ciò che viene nascosto con display: none, utilizzare questo metodo per nascondere elementi come skip link, testo, link di navigazione o header strutturali è un’idea terribile.

Una tecnica alternativa che comporta meno problemi è quella chiamata “off-left” (descritta su questa pagina del wiki di css-discuss). Si tratta di posizionare l’elemento nascosto in modo assoluto al di fuori dell’area del viewport. Ecco il codice CSS che si utilizza per ottenere il risultato desiderato:

L’effetto visivo sarà lo stesso di display: none, ma in questo caso, chi utilizza uno screen reader sarà in grado di accedere al contenuto degli elementi nascosti.

Nascondere con CSS, mostrare con Javascript Un altro caso in cui è necessario riflettere attentamente prima di utilizzare CSS per nascondere un elemento è quando si intende mostrare qualcosa quando l’utente compie una certa azione, come nei menu dinamici o nei testi di aiuto nella compilazione dei form. Se si utilizza Javascript per mostrare qualcosa, dovrebbe essere utilizzato anche per nasconderlo. In caso contrario, le persone che hanno i CSS attivi ma Javascript disabilitato non saranno in grado di vedere mai il contenuto nascosto.

La soluzione è semplice. Invece di utilizzare un id o un nome di classe definito nel markup per applicare il CSS che nasconde, utilizzare Javascript per aggiungere un nome di classe agli elementi che si desidera nascondere. Quindi, creare una regola CSS che nasconda gli elementi con quel nome di classe.

Un’opzione alternativa è utilizzare 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 previsto. Se i CSS sono abilitati ma non il Javascript, lo script non funzionerà, ma almeno il contenuto sarà disponibile per tutti.