Un menu déroulant adapté aux mobiles

Salut à tous,

Je voudrais juste réagir à un détail du tutoriel : l'exemple de menu déroulant est présenté comme soucieux d'accessibilité ; or, fixer, dans la méta viewport, la valeur d'initial-scale et de maximum-scale à 1.0 désactive le zoom sur l'iPad, voire sur l'iPhone. Or, l'accessibilité passe aussi par la possibilité de laisser à l'utilisateur de zoomer.

Bien vu, je corrige ça.

bien vu de passer le menu en affichage colonne pour les petits écrans.
En revanche, je n'ai pas compris l’intérêt de dérouler par défaut les les sous menus sur les écrans moyens ? si ce n'est de démontrer ce qu'il est possible de faire avec les media queries

Problème d'accessibilité avec la version grand format : en tabulant au clavier dans un sous-menu, celui-ci se referme au bout de X secondes (ou est décalé à gauche en dehors de l'écran, en tout cas il est plus dans le viewport) alors qu'il ne devrait se refermer que lorsque le focus quitte le sous-menu en arrivant dans le menu suivant (avec Tab) ou précédent (avec Shift-Tab).

Et je ne suis pas fan du Ctrl-Shift qui d'autorité déplace le focus au début du menu ; cela pourrait bien gêner les lecteurs d'écran qui ont des raccourcis nombreux avec Shift, Alt, Alt-Shift, Ctrl, Ctrl-Shift, etc et une lettre.
En jargon accessibilité, c'est un changement de contexte.

EDIT: et sans être utilisateur de lecteur d'écran ni avoir aucun handicap, ça me gêne aussi si je décide rouvrir un onglet précédemment fermé dans mon navigateur avec Ctrl-Shift-T ...
Modifié par Felipe (30 Aug 2011 - 15:16)

Felipe : j'ai transmis hier ces désagréments à l'auteur

Bonjour,

J'aimerais signaler que la plupart des tablettes android 3.x ont une résolution supérieure à 999px, ce qui rend ce menu inaccessible pour ces tablettes ( xoom, iconia tab, galaxy tab ).

Cordialement.

glow a écrit :
bien vu de passer le menu en affichage colonne pour les petits écrans.
En revanche, je n'ai pas compris l’intérêt de dérouler par défaut les les sous menus sur les écrans moyens ? si ce n'est de démontrer ce qu'il est possible de faire avec les media queries

L'Ipad a une résolution inférieure à 1000px, et le hover n'existe pas sur les touchscreen. D'ou la nécessité de prévoir un menu ouvert.

Hello.

@rs549 : En théorie, modifier le code de la sorte

		$(this).bind("[#red]click[/#] mouseenter focus", function () {
			$(this).addClass( classHover );
			$(menuParent).addClass( classHover );
			[#red]return false;[/#]
		// le cursor n'est plus sur l'élément
		})

doit permettre l'ouverture au clic, et résoudre le souci.
Modifié par Florian_R (01 Sep 2011 - 11:51)

Florian_R a écrit :
Hello.
@rs549 : En théorie, modifier le code de la sorte doit permettre l'ouverture au clic, et résoudre le souci.

Oui, c'est envisageable tu as raison de le préciser.

Il faut tenir compte de certaine contrainte dans ce cas, les liens de premier niveau ne doivent pas être fonctionnel (et aussi comment gérer ça en terme d’accessibilité) , faut refermer le menu etc.

Il manque vraiment une fonctionnalité de découverte via JS (isTouchScreen , isPhoneTouchScreen , IsTablet ) et CSS (Touchscreen, Phonetouchscreen, Tablet pour les filtres média queries).

Dans un monde parfait on aurait pu même vouloir, une détection du mode de connexion (3G , wifi, wifi via Tethering 3G).

Le browser sniffing c'est loin d'être parfait, ça demande vraiment une maintenance importante. La détection des features (touch) est pas encore pleinement fonctionnelle et rend dépendant de JS.

rs459 a écrit :
(...) faut refermer le menu etc.

Logiquement si tu cliques ailleurs, il y a le blur qui se déclenche sur le lien donc normalement ça doit le faire.

Sinon, pour tous le reste, +1, c'est vrai que c'est la zone, mais il faut dire que les supports sont jeunes, forcément on tâtonne encore pas mal.