CSS: menu a discesa accessibile

  • CSS
  • Gabriele Romanato

Un menu a discesa realizzato con i CSS può essere pienamente accessibile a patto di non utilizzare la dichiarazione display: none per nascondere il sottomenu. Infatti i lettori di schermo (come Jaws) interpretano questa dichiarazione e non leggono il contenuto a cui viene applicata, rendendo di fatto il contenuto inaccessibile. Per questo motivo useremo un'altra tecnica: il posizionamento assoluto con un elevato valore negativo. Vediamo i dettagli.

Abbiamo questa struttura HTML:


<ul id="navigation">

	<li><a href="#">Home</a></li>
	<li class="submenu"><a href="#">Articoli</a>
	
	  <ul>
	  
	    <li><a href="#">Articolo 1</a></li>
	    <li><a href="#">Articolo 2</a></li>
	    <li><a href="#">Articolo 3</a></li>
	  
	  </ul>
	
	</li>
	<li><a href="#">About</a></li>

</ul>

Le voci di lista con classe submenu sono quelle che contengono i sottomenu. Quindi avremo i seguenti stili:


body {
	margin: 0;
	padding: 0;
	font: 100% Arial, sans-serif;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation {
	height: 3em;
	background: #000;
	padding: 0 1em;
}

#navigation > li {
	float: left;
	margin-right: 0.5em;
	height: 100%;
	width: 9em;
}

#navigation > li > a {
	float: left;
	padding: 0;
	text-align: center;
	width: 100%;
	text-decoration: none;
	height: 100%;
	line-height: 3;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	display: block;
}

#navigation > li > a:hover {
	background: #d00;
}

#navigation li ul {
	width: 100%;
	background: #000;
	clear: both;
	position: absolute;
	top: -1000em;
}

#navigation li ul li {
	width: 100%;
	display: block;
	margin: 0.5em 0;
}

#navigation li ul li a {
	display: block;
	height: 100%;
	padding: 1em;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

#navigation li ul li a:hover {
	background: #666;
}

#navigation li.submenu:hover ul {
	position: static;
}

Le regole importanti sono le seguenti:


#navigation li ul {
	width: 100%;
	background: #000;
	clear: both;
	position: absolute;
	top: -1000em;
}

#navigation li.submenu:hover ul {
	position: static;
}

L'alternanza di posizionamento assoluto e statico permette al sottomenu di essere nascosto e quindi mostrato quando l'utente passa con il mouse sopra il link corrispondente del menu principale. Questa soluzione ci permette di evitare del tutto la dichiarazione display: none.

Potete visionare l'esempio finale in questa pagina.

Torna su