Incontournables XHTML / CSS :
| Auteur | |
|---|---|
| jollion | # 18 Jun 2008 - 13:42:18  |
| 5 Posts |
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 |
  |
|
| Mikachu | # 18 Jun 2008 - 14:53:43 |
C'est quand les vacances ?  Modérateur 3319 Posts |
Salut, Je déplace dans le salon adéquat. Ton lien de marche pas  Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite ! |
| |
|
| dominique | # 18 Jun 2008 - 15:18:48 |
zen  Modérateur 3836 Posts |
Bonjour et bienvenue jollion  Ta question arrive bien à propos, nous en discutions entre modos dernièrement et Raphael m'a rappelé ce billet 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 Je n'ai pas trop regardé le menu, mais le changement d'images est des plus désagréable et gêne à sa consultation Modifié par dominique (18 Jun 2008 - 15:22) De Tchouang Tseu :
Savoir ce contre quoi on ne peut rien et l'accepter comme sa destinée, voilà la vertu suprême. |
| |
|
| Heyoan | # 18 Jun 2008 - 15:28:18 |
Un p'tit Kiwiz Coca ?  Modérateur 3153 Posts |
dominique a écrit :+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  ! |
|
|
| jollion | # 18 Jun 2008 - 16:22:53 |
| 5 Posts |
Milles excuses pour le mauvais lien, il s'agit d'un prototype à cette adresse : http://www.museedesconfluences.fr/musee_v1/menus/jo_coulissants_jquery/ Merci Dominique, (je suis assez novice dans l'usage des forum) |
| |
|
| Florent V. | # 18 Jun 2008 - 16:50:23 |
On va manger des chips.  Modérateur 13465 Posts |
Moi j'aime bien le changement des images. (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. Modifié par Florent V. (18 Jun 2008 - 16:57) |
| |
|
| Florent V. | # 18 Jun 2008 - 18:01:05 |
On va manger des chips. Modérateur 13465 Posts |
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. 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. |
| |
|
| jollion | # 19 Jun 2008 - 07:56:19 |
| 5 Posts |
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 |
| |
|
| Florent V. | # 19 Jun 2008 - 09:14:11 |
On va manger des chips. Modérateur 13465 Posts |
jollion a écrit : 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). |
| |
|
| jollion | # 19 Jun 2008 - 09:53:39 |
| 5 Posts |
ok, j'ai compris, cette fois, merci Florent  |
| |
|
| dominique | # 20 Jun 2008 - 09:37:39 |
zen Modérateur 3836 Posts |
Je me permet d'en ajouter une petite couche comme tu as déclaré ne pas être habitué aux forums As-tu lu le billet dont je t'ai donné le lien dans mon précédent message ? Extraits du billet : 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. 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. 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 De Tchouang Tseu :
Savoir ce contre quoi on ne peut rien et l'accepter comme sa destinée, voilà la vertu suprême. |
| |
|
| Florent V. | # 20 Jun 2008 - 12:15:00 |
On va manger des chips. Modérateur 13465 Posts |
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». |
| |
|
| dominique | # 20 Jun 2008 - 13:45:03 |
zen Modérateur 3836 Posts |
Merci pour les précisions, Florent De Tchouang Tseu :
Savoir ce contre quoi on ne peut rien et l'accepter comme sa destinée, voilà la vertu suprême. |
| |
|
| knarf | # 20 Jun 2008 - 22:25:49 |
 920 Posts |
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) |
| |
|
| jollion | # 23 Jun 2008 - 08:34:32 |
| 5 Posts |
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 (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  , 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 .Merci encore Jean |
| |
|
| knarf | # 24 Jun 2008 - 05:36:42 |
| 920 Posts |
Bonjour,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. |
| |
|
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org
Nos partenaires : Editions Eyrolles
Nikozen : Hébergement - Réalisation : Alsacreations.fr