1160 sujets

Accessibilité du Web

Bonjour,
Je cherche depuis un moment déjà, à réaliser un menu déroulant accessible, mais après y avoir travaillé et parcouru moulte forum, j'en viens à penser que les menus déroulants dynamiques en cascade ne sont génétiquement pas accessibles.
Le menu cité dans le commentaire précédant m'a inspiré, je l'ai mixé et modifié pour en arriver à ce prototype :
www.museedesconfluences.f...
Comme il s'agit d'un futur site de musée, je souhaite que celui-ci soit vraiment accessible (pas seulement en respectant les critères adhoc sur le papier.
J'aimerai avoir vos avis.
Merci d'avance pour vos réponses.
N.B. seule la première page possède un contenu, c'est à dire quelques notes sur l'accessibilité.
Les autres pages n'ont que le menu et un titre.
J'ai pris mon inspiration ici :
css.alsacreations.com/xmedia/exemples/accordeon/menu_demo.html
et un peu de code ici :
u-classroom.net/post/2007/06/06/Des-sous-menus-deroulants-non-obstrusifs-avec-Jquery
Bonjour et bienvenue jollion Smiley smile

Ta question arrive bien à propos, nous en discutions entre modos dernièrement et Raphael m'a rappelé ce billet Smiley cligne

Edité : Mikachu, le lien n'est pas complet pour que la page ne soit pas référencée, je suppose... Il suffit de corriger la fin Smiley cligne

Je n'ai pas trop regardé le menu, mais le changement d'images est des plus désagréable et gêne à sa consultation Smiley cligne
Modifié par dominique (18 Jun 2008 - 15:22)
dominique a écrit :
Je n'ai pas trop regardé le menu, mais le changement d'images est des plus désagréable et gêne à sa consultation Smiley cligne
+1

J'ajouterais que sur la page d'accueil et avec Javascript activé, la navigation au clavier met l'anti-popup de Firefox à rude épreuve et qu'avec Javascript désactivé il est impossible de voir où on est Smiley murf !
Moi j'aime bien le changement des images. Smiley smile
(Mais je pense aussi que ce n'est pas le plus ergonomique, et que ça peut faire fuir ou perturber des visiteurs. C'est bien pensé et techniquement habile, mais j'ai peur que ça ne nuise à l'efficacité du site.)

Edit: OK d'accord, donc on ne parle pas de la page d'accueil du site du Musée des confluences, mais de celle-ci. Véri ouelle. C'est plus cohérent avec la présentation de départ. Smiley smile
Modifié par Florent V. (18 Jun 2008 - 16:57)
Alors quelques commentaires:

1. Mes tests d'utilisation du menu avec Firefox 3 sont concluants. Ça marche très bien à la souris comme au clavier, ça marche bien sans Javascript ou sans CSS, ou avec les deux désactivés.

2. Sans Javascript, on a toujours des liens (inactifs). Le code HTML est le suivant:
<a href="#" class='plus' title='Afficher ou masquer le sous-menu'>Titre<span class='dehors'> - sous menu</span></a>

Tu pourrais avoir ceci:
<span class='title'>Titre</span>

et utiliser Javascript (en l'occurence jQuery) pour remplacer à la volée par ceci:
<span class='title' tabindex='0' title='Afficher ou masquer le sous-menu'>Titre</span>Titre</span>
(le <span class='dehors'> - sous menu</span> me semble peu utile)
En gros travailler avec un span, et ajouter en JS l'attribut tabindex et le title.

L'attribut tabindex='0' permet à l'élément de prendre le focus. Du moins c'est le cas avec Internet Explorer et Firefox. À creuser. Smiley smile

3. On peut tout à fait faire cette mise en page sans tableau, en donnant une largeur (peut-être en pourcentages) au menu et en le faisant flotter à gauche. Il faut ensuite décider si on utilise overflow: hidden pour masquer le texte qui dépasse, ou pas. Pour l'agrandissement du texte, l'objectif à atteindre est de l'ordre de deux agrandissements (taille la plus grande dans IE, deux Control-Plus dans Firefox), pour le RGAA.
Merci Florent pour tes remarques.

Je n'ai pas tout compris dans les différents points :

Point 2 : lorsque JS est désactivés, les menus restent entièrement déroulés. Du coup, les liens avec le signe "+", qui servaient normalement à dérouler les sous-menus ne servent plus. Est-ce de ceux-ci dont tu parles ?
Si j'ai bien compris, tu proposes que ce soit JS qui ajoute le signe plus (et éventuellement le complément du titre : "- sous-menu") de façon à cela n'apparaisse pas lorsque JS est désactivé et que tout est déroulé.

La présence de "<span class="dehors">complement de titre</span> ne fait pas très propre, mais la raison en est la façon dont Jaws lit les liens ou liste les liens (commande Inser=F7) : Par défaut, si le lien est du texte, c'est celui-ci qui est "lu" par Jaws, même si le TITLE est plus explicite. Comme dans les menus, on est souvent obligé d'être concis pour une question de place, j'ai trouvé ce moyen pour que l'intitulé soit plus clair (en lecture par Jaws). A noter un truc bizare : lorsqu'on affiche un élément avec un left:2000px, la fenêtre s'adapte et on a un ascenceur horizontal, alors que si on met left:-2000px, on n'a pas d'ascenceur.

Je n'ai pas bien compris l'intérêt de garder le focus avec "TABINDEX='0'". Lorsqu"une nouvelle page est chargé, n'a-t-on pas intérêt à repartir des premiers liens de la page, comme les liens de navigation rapide ou les liens d'évitement ?

Point 3 : Je suis revenu au tableau, car à l'origine je voulais une colonne de gauche de largeur fixe, une colonne de droite de largeur fixe, et une colonne centrale élastique et avec une largeur mini. Dans l'absolu (grâce au livre de Raphaël (merci au passage)) ça marchait bien avec Firefox, mais pas avec IE6, et j'ai fini par abandonner. J'y retournerai peut-être plus tard, je me focalise pour l'instant sur la navigation.

Merci encore pour votre aide.

Bonne journée Smiley smile
jollion a écrit :
Je n'ai pas bien compris l'intérêt de garder le focus avec "TABINDEX='0'". Lorsqu"une nouvelle page est chargé, n'a-t-on pas intérêt à repartir des premiers liens de la page, comme les liens de navigation rapide ou les liens d'évitement ?

tabindex="0" ne «garde» pas le focus, mais permet simplement à l'élément de recevoir le focus (comme si c'était un élément A sans attribut tabindex, en quelque sorte).
Je me permet d'en ajouter une petite couche comme tu as déclaré ne pas être habitué aux forums Smiley smile As-tu lu le billet dont je t'ai donné le lien dans mon précédent message ?

Extraits du billet :

a écrit :
Il est plus difficile pour les personnes rencontrant des problèmes de mobilité d’enchaîner un pointage, une prise de focus (focalisation) et un déplacement dans la zone qui se déroule.


a écrit :
Pour les internautes en déficits de concentration et de mémoire, les problèmes seront liés à la perception de la structure globale du menu.


a écrit :
Certains malvoyants utilisent un outil pour zoomer le contenu de la page. L’espace d'affichage du sous-menu s'avère donc limité. Dans la plupart des cas, ces personnes devront alors descendre dans la page pour voir l’ensemble des éléments du sous-menu et là, le focus du lien sera perdu et le sous-menu se refermera automatiquement, laissant l’utilisateur dans une situation très désagréable, voire frustrante de navigation impossible.


etc... Alors peut-on associer les mot "Accessibilité" et "menu coulissant" ?

Rappel du lien vers le billet Smiley cligne
Dominique: il me semble que le système de menu à coulisses, avec déroulement déclenché au clic plutôt qu'au survol, limite en bonne partie ces problèmes. Les remarques restent valides, bien sûr, mais elles me semblent moins catégoriques que pour un menu déroulant «classique».
a écrit :
Comme il s'agit d'un futur site de musée, je souhaite que celui-ci soit vraiment accessible (pas seulement en respectant les critères adhoc sur le papier.


Dans ce cas là, est-ce pertinent d'utiliser un menu de ce type même si celui-ci se comporte très bien dans différentes configurations?

Cela sera automatiquement source de problèmes et de difficulté de compréhension pour certains types de publics même si comme Florent le souligne il limite les possibles effets négatifs du billet cité par Dominique.
Modifié par knarf (20 Jun 2008 - 22:26)
Bonjour,
Je prend connaissance de vos remarques depuis jeudi, merci à chacun.

Pour Dominique, oui j'avais bien lu l'article dont tu me donnais le lien Smiley smile (je l'avais d'ailleur déjà lu).

Un des but de ce menu est de pouvoir présenter, à la demande, un résumé du contenu du site ( à la manière d'un plan de site, en fait) afin de mieux appréhender, d'un coup d'oeil comment est organisé ce contenu, et pouvoir choisir directement ce qui nous intéresse. C'est d'ailleur pour la même raison que j'ai voulu que chaque sous-menus ne se referme pas à l'ouverture du suivant. J'ai personnellement une "mémoire immédiate" sub-normale Smiley confus , et suis souvent obligé (sur le web) de revenir sur des pages précédentes pour me souvenir des sous-menus.

Même si mon proto ne bouge pas tout de suite, aucune de vos remarques n'est perdue Smiley smile .
Merci encore

Jean
Bonjour,

a écrit :
Un des but de ce menu est de pouvoir présenter, à la demande, un résumé du contenu du site ( à la manière d'un plan de site, en fait) afin de mieux appréhender, d'un coup d'oeil comment est organisé ce contenu, et pouvoir choisir directement ce qui nous intéresse.


Si je navigue avec la souris oui surement.

Au clavier par contre, en fonction de la structure des pages des rubriques et des sous rubriques (présence de menu contextuel en haut de page ou pas), cela risque d'être une autre paire de manches.