Votre avis : un élément select avec onchange accessible

Je ne suis pas sûr que la définition de onchange soit assez précise pour être sûr qu'IE est le seul à avoir ce comportement. Faudrait vérifier la doc...

Quoi qu'il en soit, pour les autres navigateurs, l'action se déclenche dès que la liste perd le focus, ça peut quand même être potentiellement surprenant.

Merci QuentinC.

Si quelqu'un a des infos sur la navigation dans cette page avec IE8...

Bonjour

Je viens préciser que la demande de Patidou provient du coup de main qu'il me donne pour un problème rencontré sur mon blog de tests

En effet, je développe un petit plugin pour Dotclear 2 qui affiche la liste des blogs d'une installation multiblogs dans un petit menu déroulant (balise select). Le choix d'un élément de la liste redirige vers le blog choisi (menu de droite > tous les blogs)

En l'absence de javascript, un bouton input permet d'envoyer la requête vers un script en php. Si javascript est activé, c'est l'évènement onChange qui est intercepté pour réaliser la redirection.

Tout cela marche bien avec Firefox.

Le souci vient avec Internet Explorer (6,7 et 8 !) et la navigation au clavier : si javascript est activé, il est impossible de naviguer avec les flèches dans ce menu déroulant sans déclencher la redirection.

J'aimerais bien que ce menu soit accessible...

Le seul moyen c'est de ne pas utiliser onchange, je le crains. Ou alors ... j'ai une petite idée de dernière minute, je ne sais pas si ça pourrait fonctionner mais ça reste quand même du gros bricolage :
Intercepter les évènements keyup. Dans onchange, si une touche spécifique vient d'être appuyée, annuler la redirection

Grosso modo un truc dans ce genre :

var list = .... ;
list.lastKey = 0;
list.lastKeyTs = 0;
list.onkeyup = function (evx) {
var e = (evx? evx : window.event);
var k = (e.keyCode? e.keyCode : e.which);
this.lastKey = k;
this.lastKeyTs = (new Date()).getTime(); // timestamp
};
list.onchange = function () {
if (this.lastKey >= 33 && this.lastKey <= 40) {
var t = (new Date()).getTime();
if (t-this.lastKeyTs <250) return;
}
this.form.submit();
};

Les touches fléchés ne sont pas les seules touches à prendre en compte : en effet, on peut aussi se déplacer dans la liste avec page up / page down, et avec home et end.
Je ne suis plus sûr de leurs codes de touche respectifs, mais je sais qu'ils sont tous entre 33 et 48 et qu'ils se suivent. Essayer avec un script bidon au cas où.

J'ai finalement opté pour la suppression de ce javascript et l'affichage d'un bouton OK pour soumettre le formulaire.

Au final, sacrifier l'accessibilité pour une fonctionnalité aussi peu importante m'a semblé être le mauvais choix, merci QuentinC pour ta réponse qui m'a ouvert les yeux

Bonjour,

Il s'agit au final de faire des liens vers des pages ou des sites? Pas de saisie d'information par l'utilisateur?

Auquel cas, tout cela n'a strictement rien à faire dans un formulaire. C'est une erreur de conception en amont.

euh... il n'y a pas effectivement de saisie de texte par le visiteur, mais un choix opéré dans une liste déroulante (la liste affiche dynamiquement des liens vers les autres blogs d'une installation multiblog), le résultat de ce choix étant la redirection vers un de ces blogs.

Du coup, je ne comprends pas trop pourquoi ça n'aurait rien à voir avec un formulaire, la balise <select> étant un élément de contrôle de la balise <form> , non ?

a écrit :
Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

Bonjour,

Pas optimal, un peu ancien, mais utile comme point de départ: http://www.heltenkelt.se/accessible-selectbox/