E’ giusto usare display:none per nascondere un div?
Risposta: no.
Ed è molto semplice capirlo. Il display:none elimina completamente l’elemento a cui è associato all’interno della pagina, come se non esistesse. Comprenderete che per uno screen reader questo non va bene, altrimenti perchè inserire l’elemento?
Tommaso ci spiega le due alternative da usare:
Nascondere un elemento con i CSS in modo accessibile
I problemi nell’utilizzo del display:none e le alternative possibili.
Nella realizzazione di un sito è ricorrente la necessità di nascondere elementi presenti nel codice HTML: basti pensare agli skip link o alle tecniche di image replacement. Ci sono diversi modi per farlo con i CSS, ma non tutti sono corretti.
Evitare il display:none
Un metodo diffuso, che però è sbagliato, è utilizzare display: none per nascondere totalmente la parte di codice desiderata. Questa tecnica è inaccessibile, perchè elimina l’elemento dalla pagina come se non esistesse. La maggior parte degli screen reader trovando un elemento con display: none lo salterà senza leggerlo.
Pensate all’intestazione di un sito ed ai link per facilitare la navigazione nascosti in questo modo: non facendoli leggere agli screen reader l’accessibilità della pagina viene compromessa.
Trovate anche un approfondimento sul comportamento degli screen reader in questo articolo di Roger Johansson.
La soluzione con position:absolute
La soluzione più semplice è utilizzare position: absolute invece di display: none:
.skip {
position: absolute;
left: -9999px;
}In questo modo gli screen reader continueranno a leggere l’elemento nascosto. Per migliorare ulteriormente l’accessibilità della pagina con un occhio di riguardo alla navigazione da tastiera, è utile un’aggiunta del tipo:
.skip a:active, .skip a:focus {
position: absolute;
left: 1em;
}Così usando il tasto tab per spostarsi tra i collegamenti della pagina, gli elementi nascosti appariranno quando selezionati.
L’alternativa: text-indent
Una soluzione alternativa per nascondere un elemento della pagina può essere la proprietà text-indent, con un valore negativo:
.skip {
text-indent: -9999px;
}Questo metodo a volte viene usato per mantenere l’elemento contenitore nella pagina, facendo sparire solo il suo contenuto testuale. E’ da verificare nei vari casi il supporto dei browser, ma tutti quelli più importanti non dovrebbero avere problemi.
Testo nascosto con JavaScript
Un ultimo aspetto da considerare è la gestione di elementi della pagina che appaiono solo dopo un’azione dell’utente, usando JavaScript. E’ sbagliato nasconderli con i CSS: se questi elementi (ad esempio un menu a tendina) appaiono grazie a JavaScript, devono essere nascosti al caricamento della pagina secondo lo stesso principio.
La tecnica più semplice è usare JavaScript per assegnare una classe all’elemento desiderato e quindi nasconderlo (senza usare display: none!) tramite CSS.
E’ importante comprendere i problemi relativi al display: none descritti in questo articolo. Usandolo con cognizione di causa eviterete dei problemi ai vostri utenti: se conoscete altre soluzioni valide i commenti sono a vostra disposizione.
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
23 Commenti
Giusto l’articolo, ma secondo me è sbagliato il comportamento degli screen reader che non dovrebbero leggere il foglio di stile per lo screen.
Se io uso display:none nei css per il media screen uno screen reader dovrebbe ignorarlo.
manuxxon, è vero, è un comportamento anomalo questo, ma come per i browser ci dobbiamo adattare alle loro esigenze e bug, dobbiamo adattarci anche a questo
Molto interessante perchè sono tra quelli che non sapeva di utilizzare una metodologia sbagliata (display:none).
Dovrò ripassare un bel po di codice credo.
Datosi che il più delle volte si vuole nascondere qualcosa perchè si spera di poter migliorare le “performance” della pagina in termini di inidicizzazione, la verà domanda è, a cosa serve mettere realmente elementi nascosti se questi non devono essere visibile per l’utente finale?
Uno screen reader potrà leggere il contenuto come dici tu, ma cosa vorrei far leggere ad una persona affetta da problemi visivi che un utente normale non deve leggere?
Il motore di ricerca, con display:none o con la tecnica suggerita, in ogni modo leggeranno il contenuto.
Eh sì Lauryn, che dobbiamo fare, questo è un bel lavoro ma abbiamo le nostri croci da portare
…ovvero come trarre conclusioni sbagliate da un post ottimo
Tommaso ha dato delle indicazioni chiare relative a casi precisi. Ha fornito alternative accessibili al display:none, ma non mi pare abbia detto che non va MAI usato!
Il problema Lauryn sono le premesse ancora più a monte: “cosa c’è in quel div?”
Ci sono casi in cui voglio che nessuno (nemmeno gli screen reader) leggano porzioni di codice, per esempio box a comparsa il cui contenuto ha senso solo dopo un’azione dell’utente.
E in quel caso il diplay:none è più che legittimo… d’altra parte se no per cosa è stato inventato??
Ciao ciao
@abruzzo: hai perfettamente ragione, infatti è da valutare il motivo per cui si nasconde il testo…ovviamente se lo si nasconde per motivi seo lascia pure il display:none. metti invece che usi l’image replacement per il titolo h1, è utile che questo sia leggibile da uno screen reader e quindi il text-indent o il posizionamento assoluto sono d’obbligo
@Lauryn se fai l’image replacement la puoi fare anche senza ricorrere ad un indent fuori bordi pagina. Metti uno span, con visibility: hidden e lo lasci li dove sta, senza per questo compromettere il layout sui browser che potebbero mal interpretare quel valore negativo.
visibility hidden non funge con l’image replacement, o sbaglio?
Dipende da come lo fai.
Molto interessante..però sono d’accordo, ci sono casi magari non così frequenti in cui si vuole che quell’elemento si davvero non visibile, visto che la proprietà esiste.
Per l’image replacement il text-indent non credo sia una tecnica, ma un piccolo trucchetto. Rende lo stesso il sito a rischio accessibilità. Se uno ha le immagini disabilitate (raro ma può essere) non vede nulla.
Giuseppe, se il tuo commento è rivolto a me non fraintendere, mi sono espresso male. E’ ovvio che si parla solo di contenuti che riguardano gli screen reader ed io lo ritenevo sottointeso.
No Cristian, non mi rivolgevo a te, intendevo dire che non si può concludere con un “no” assoluto a prescindere dal “cosa” si vuole nascondere, tutto qui
Cos’è a:focus ? Mi è nuova, sapevo dell’active, del visited e dell’hover…
@Flavia: il focus è lo stato che si attiva quando con il tab scorri i vari links. di solito come tipo di comportamento lo si associa all’active e all’hover, per renderlo più evidente.
ci sono due ordini per elencarli, a seconda di quello che vuoi fargli fare:
LVFHA : :link :visited :focus :hover :active : quando vuoi che focus si comporti come l’hover
LVHFA : :link :visited :hover :focus :active : quando vuoi che il focus non si comporti come l’hover
o viceversa, io puntualmente sbaglio sempre l’ordine
Uff, credevo che il display:none fosse infallibile :/
Proprio ora ho provato un text-indent negativo ad uno span e Firefox 3.0.10 proprio non se lo fila. Ho provato con qualche accorgimento tipo misure fisse allo span/div ma nulla.. mi sa che torno al display:none
prova a dirci i dettagli sul forum, sono sicura che c’è una soluzione, magari lo span è dentro un elemento di blocco o in linea…
Grazie Lauryn, mi hai acceso una lampadina ihih avevo messo lo span dentro l’h1 e allo span avevo dato il text indent.. poi ho anche scritto -9999px invece che -9999, e infatti senza px non funziona lo stesso. vabè, in qualche modo, ho risolto, GRAZIEEE!
(Prima seguivo il blog solo in background, ora che ho rotto il ghiaccio mi vedrete più spesso)
non essere timido eheh siamo tutti qui!
Quindi questo vale anche per fini SEO? Se voglio che le voci del menù a tendina vengano indicizzate non posso usare jquery perchè le nasconde tramite display:none?
Come faccio ad ottenere lo stesso effetto senza usare display:none?
XD il menù di questo blog così è fatto LOL!
ciao simone, l’articolo è stato scritto un paio di anni fa, nel frattempo gli screen reader si sono un po’ aggiornati permettendo opzioni di lettura personalizzate per cui il problema dovrebbe essere superato (chiederò conferma al nostro amico di manualissimo.it che è non vedente). per quanto riguarda i fini SEO, considera che google è proprio come un cieco, non interpreta pertanto css nè javascript. se nel flusso html non vede un div non lo legge e basta.
ora che guardo il nuovo template, vedo che usa sia display:none che visibility: hidden in modo combinato, che sia forse per ovviare a questo difetto? mi riservo di studiare questa cosa, grazie per avermelo fatto notare
Grazie tantissimo a te per la risposta.
Appena sai qualcosa mi fai sapere?
In tutti i casi avevo pensato, e se al caricamento della pagina sposto tutto come ci mostra questo post e quando il caricamento della pagina è terminato lo nascondo e lo riposiziono con display:none? Sapresti dirmi se Google leggerà o meno quei div? In teoria SI, perchè sono regolarmente presenti finchè non sia completamente caricata tutta la pagina.
Scusami
e grazie ancora per la risposta.
fai presto a fare la prova: guarda la pagina con css e js disabilitati. in teoria è quello che legge google