1116 sujets

Accessibilité du Web

Bonjour,

Partie d'une liste imbriqué (dl,dt,dd) , fonctionnant uniquement avec un javascript et du display:none , ...
je propose a un ami une version "revisité" de son menu qui me semble plutot accessible .

Ceci dit , je ne suis pas un expert et la demande initiale concerne un bug connu de ce type de menu et un aspect concernant le référencement .

La raison me fait opter pour une architecture html différente et un support css pour l'effet a conserver , avec un leger support js pour IE6 et inf ... au cas ou . Je ne m'inquiete donc que du coté "utilisable ou pas " .
Puis , je me dis que cette architecture et le display:none en moins ne peuvent pas avoir un impact négatif sur le référencement. (vous pouvez tourné la phrase autrement hein !).

voici une page avec le menu revisité :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Déroulant vertical, CSS et accessibilité</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content="menu vertical a un niveau deroulant , test sur la tabulation et le survol a la souris . Base 100% html et CSS (cascaded style sheet) Pas de javascript impliqué , exepté pour une compatibilté IE (Internet Explorer)  versions 6 et inferieur" />
<meta name="keywords" content="Menu deroulant en CSS,
compatible html et xhtml ,CSS 2.1 , survol a la souris (mouseover), accesible par tabulation , compatibilité IE6 et inferieur " />
<meta name="Identifier-url" content="http://gcyrillus.free.fr" />
<meta name="Copyright" content="©Copyright :  http://gcyrillus.free.fr"  />
<meta name="Location" content="Normandie , Ile de France " />
<style type="text/css" media="screen">

/* reset , RAZ */
#navsite ul {margin:0;padding:0px ;list-style-type:none;width:200px;}
#navsite li {margin:0;padding:0px 3px;list-style-type:none;width:194px;}
/*dimension du conteneur  du menu et stylage simple */
#navsite {width:200px;border:1px solid;background:#ccc;padding-bottom:0.5em;}
/* Premier titre precedent la navigation */
#navsite h2 strong {text-align:center;background:#aaa;display:block;margin:0;width:200px;}
#navsite h2 {text-indent:1em;margin:0 0 10px 0;padding:0;overflow:hidden;}
/* prise de reference pour les liste imbriquée */
#navsite div {position:relative;}
/* positionement hors ecran de la liste au repos */
#navsite div ul {position:absolute;right:2000px;width:200px;top:0;}
/* affichage de la liste , soliciter par le passage de la souris */
#navsite div  div:hover ul , 
#navsite div div.over ul /* class ie 6 */ 
{right:-200px;border:1px solid;background:#eee;z-index:2}
/* affichage du lien qui reçoit le focus par le biais d'une tabulation clavier */
#navsite  li a:focus , #navsite  li a:active {background:#eee;left:2200px;position:relative;z-index:3}
/* positionement du lien au survol de la souis , prevalant sur le focus */
#navsite  ul li a:hover , #navsite div:hover ul li a  , #navsite div div:hover h2 ,
#navsite  div.over ul li a , #navsite div div.over ul li a , #navsite div.over h2 /* class ie 6 */ 
 {position:static!important;background:#eee;}
</style>
	<!--[ if lte IE  6]>
	<style type="text/css">
		#navsite div ul {position:static;right:0px;width:200px;top:0;}
	</style>
<script type="text/javascript"   >
document.write('<'+'style type="text'+'/'+'css"'+'>'+'#navsite div ul {position:absolute;right:2000px;width:200px;top:0;}<'+'/style'+'>');
	menuvert = function() {
		if (document && document.getElementById) 
	{
		lemenu = document.getElementById("ie6");
		for (i=0; i<lemenu.childNodes.length; i++) 
		{
			node = lemenu.childNodes[ i];
			if (node.nodeName=="DIV") 
				{
					node.onmouseover=function() 
					{
						this.className+=" over";
  					}
  					node.onmouseout=function() 
					{
  					this.className=this.className.replace(" over", "");
   					}
   				}
  		}
 	}
}
window.onload=menuvert;
</script>
<![ endif]-->
</head>
<h1>Menu vertical deroulant simple</h1>
<p>Les liens s'affiche au survol des titres ou au focus induit par la tabulation.</p>
<p>Un supplement de javascript pour IE6 et inferieur , permet de rendre ce script compatible garace a l'ajout ou le retrait d'une classe a la "volée" </p>
<div id="navsite">
	<h2><strong>GUIDE</strong></h2>
	<div id="ie6">		
		<div tabindex="0"><h2>abattages</h2>
				<ul>
					<li><a href="#a">Qu'est-ce ?</a></li>
					<li><a href="#b">Définition</a></li>
					<li><a href="#c">question</a></li>
					<li><a href="#d">manipulation </a></li>
					<li><a href="#e">attitude</a></li>
					<li><a href="#f">Pourquoi se former ?</a></li>
				</ul>
		</div>	
		<div tabindex="0"><h2>Greffes</h2>
				<ul>
					<li><a href="#g" >techniques</a></li>
					<li><a href="#h" >Pour tous</a></li>
					<li><a href="#i" >Indications</a></li>
					<li><a href="#j" >Pourquoi ?</a></li>
					<li><a href="#k" >Auto-greffe</a></li>
				</ul>
 		</div>
	</div>
</div>

</body>
</html>


(menu et mise en forme simplifié , fonctionnement identique a l'original).

Ce menu est accessible au clavier , et mérite peut-être , un 'parentNode' pour un affichage plus agréable a la tabulation , je ne juge pas la surcharge js necessaire .( ... Aucun framework JS n'est ou ne sera integré a ce site qui ne contient que textes et images d'illustrations et icônes pour rythmé la mise en page).


"Cette construction de menu n'est pas remarquable , ce n'est qu'une amelioration a un menu qui ne peut fonctionné sans javascript".

"La consultation a partir d'un telephone portable (par exemple ) n'as pas eté envisagez pour ce menu . Cet aspect ne concerne pas que le menu , mais toutes critiques sont bonnes."

Alors , menu a garder ? ou a ne mettre en place que temporairement le temps d'opter pour un autre type de navigation ?


Pourquoi un menu déroulant ?
- Le menu revisité contient une trentaine de lien reparti dans 8 rubriques.
Ouvert dans le flux , il occuperait environ 700 pixels de hauteur ... peu confortable visuellement avec 40 lignes d'infos a trier contre 8 deja trier.
- repartir les liens dans 8 pages , eloigne d'un click et d'un chargement suplementaire de page le contenu a atteindre .

Mes argument ou raisonnement sont-ils pertinent ou suis je passé a coté de quelque chose ?

G.C.
Modifié par gc-nomade (14 Jul 2009 - 21:45)
Je n'ai pas lu ton code source. Beaucoup trop long. Peux-tu plutôt mettre un lien vers cette page pour pouvoir tester en ligne directement ?

Pour simple rappel, je ne sais pas si tu l'as fait ou non, la règle n°1 des menus déroulants est de doubler les onmouseover d'un onclick. Ca améliore déjà bien les choses.
bonjour,

( lien de la page test : http://gcyrillus.free.fr/essai/menu-1-level.html )

Ah oui , bien vu pour le on click , il n'est pas ajouté dans le js pour IE6 et inferieur .

Il est simulé par le pseudo element :focus dans les autres navigateur , permettant ainsi (en principe) d'atteindre la liste de liens sans la voir se refermé intempestivement .

Pour le js , il me faudrait ajouter un onclick et un onblur pour reinitialiser l'affichage j'imagine , on repart tout doucement dans une gestion complete du menu en javascript Smiley smile , vivement que IE6 ne soit plus Smiley smile ).

merci
Un menu déroulant se gère en Javascript en prévoyant le coup au cas où il est désactivé. Rien ne doit se faire aux niveau événements en css. Smiley cligne

Exemple : le plugin superfish pour jquery. Smiley smile

Et QuentinC a raison pas de onclick, ton menu ne fonctionne pas sur iPhone.
okay , donc je retiens .

1) un menu deroulant se construit ouvert en statique , les possibilités css sont inadaptés.
2) gestion des effets ouvert et fermé uniquement par le biais d'un javascript .
avec prise en compte des evenements: onmouseover , onmouseout , onclick , onblur .

Du coup , IE6 ne demande pas de traitement de faveur .

Le javascript s'appliquera donc a modifié les styles et ne pas ajouter/enlever une class qui peut ne pas etre chargé dans la feuille de style.

Bon je crois avoir compris l'essentiel .

Merci
Je ne dis que ce que je remarque de façon totalement objective sans donner d'avis : je n'ai aucun comportement dynamique avec IE6+jaws7. Le menu se présente toujours et dès le démarrage avec deux parties contenant chacune 5 ou 6 liens (pas compté). Je ne sais pas si c'est ce qui est voulu ou pas.
merci de ton retour,

Pour ie6 et en principe,
Une feuille de style par le biais des commentaire conditionnels , présente le menu ouvert .
Ensuite , toujours via les CC , vient la partie javascript qui , de façon assez brutale , reformate les listes en position:absolute; avec un document.write(); ce qui referme donc en principe les listes .
Puis , via dom , les evenement onmouseover et onmouseout sont ajouter et se charge d'ajouter ou enlever une class .

Dans ce que tu me decrit , le comportement ressemble au cas ou javascript n'est pas actif , ... ou mal ecrit . Cela ne marche pas , mais le menu reste visible et accessible a la souris. Cet effet est voulu par defaut , il y a donc un hic dans le fichier en ligne coté ecriture ou syntaxe .

Je vais m'appuyer sur le script que patidou me conseille et a coté réecrire un script simple (pour moi même pour ne pas me contenter d'un copier/coller) prenant en compte tes conseils et ceux de Patidou .

Bonne journée/soirée

<edit>Une balise <ins> que je n'avais pas refermé est probablement la cause de ce defaut </>
<redeit>Dans windows mobile , le menu est aussi affiché ouvert (apres verif) , c'est aussi le comportement que j'attendais et qui me semble normal sur un petit ecran </>
<gné>(reflexion personel: pourquoi l'iphone veut t'il jouer au grand , il afficherait aussi du lightbox like ? lol whouah , j'en veut un ! )</>
Modifié par gc-nomade (16 Jul 2009 - 23:41)