1178 sujets

Accessibilité du Web

[Resolu]Accessibilité d'un menu en onglets avec description des liens

Bonjour à tous et à toutes,

Après avoir codé un menu en onglets avec une description des liens, je me suis posé une question quant à l'accessibilité de ce dernier.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Menu à onglets</title>
		<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
    </head>
	
<body>
   
	<div id="page">
		<ul id="tabnav">
			<li class="active"><a href="#" title="aller à la page...">Images Test 1<span>Texte de description du contenu du lien 1. Texte de description du contenu du lien 1. </span></a></li>
			<li><a href="#" title="aller à la page...">Images Test 2<span>Texte de description du contenu du lien 2. Texte de description du contenu du lien 2.</span></a></li>
			<li><a href="#" title="aller à la page...">Liens</a></li>
			<li><a href="#" title="aller à la page...">Liens</a></li>
			<li><a href="#" title="aller à la page...">Liens</a></li>
		</ul>
	</div>
	
</body>
</html>




/* CSS menu */

#page {
	width: 750px;
	height: 300px;
	margin: 0 auto;
}

ul#tabnav {
	position: relative;
	font-size: 1.0em;
	list-style-type: none;
	padding-bottom: 24px;
	border-bottom: 1px solid #AAA;
	margin: 0;
}

ul#tabnav li {
	float: left;
	height: 21px;
	background-color: #DDD;
	margin: 2px 2px 0 2px;
	border: 1px solid #AAA;
}

ul#tabnav li.active {
	border-bottom: 1px solid #fff;
	background-color: #FFF;
}

#tabnav a {
	float: left;
	display: block;
	color: #000;
	text-decoration: none;
	padding: 12px;
	line-height: 0;
}

#tabnav a:hover, a:focus {
	background-color: #fff;
}

#tabnav a span {
	display: none;
}

#tabnav a:hover span {
	display: block;
	position: absolute;
	top: 35px;
	left: 0;
	width: 750px;
	text-align: left;
	color: #000000;
}


Si vous testez ces deux codes, vous obtiendrez un simple menu en onglets. Cependant, si vous passez votre souris sur les deux premiers liens, vous remarquerez qu'une petite description s'affiche en dessous de ces derniers.

Néanmoins, j'ai remarqué qu'une personne naviguant au clavier ne peux pas avoir accès à ces descriptions.
D'où ma question : Qu'en-pensez-vous et avez-vous une idée pour rendre ce menu accessible aux personnes naviguant par l'intermédiaire de leur clavier ?
Modifié par jQz (20 Apr 2010 - 14:59)
Bonjour,

Pour rendre accessible ta description lors d'une navigation au clavier il faut la rendre active lors de la prise de focus et donc utiliser : "#tabnav a:focus span".
Je n'ai pas vérifié mais il est également possible que la propriété "display:none" rende la description inaccessible à certaines revues d'écran.
Voici une proposition de modification de ta feuille de style :

#tabnav a:hover, #tabnav a:focus { 
    background-color: #fff; 
} 
 
#tabnav a span { 
    display: block; 
    position: absolute; 
    top: 35px; 
    left: -5000px; 
    width: 750px; 
    text-align: left; 
    color: #000000;
} 
 
#tabnav a:hover span, #tabnav a:focus span { 
    left: 0;
}
Bonjour Shunkin,

Je viens de tester la modification que tu m'a proposé, et elle fonctionne parfaitement.
Merci beaucoup Smiley smile .
Sujet clos
Aller à