Menu sous forme de jumpbox <select> : est-ce accessible ?

Bonjour,

Je suis en développement d'un site qui va utiliser, pour ceux qui le peuvent, une liste <select> en guise de menu d'article.
Pour passer d'une rubrique (page) à une autre dans l'article, on choisi le titre de la section dans une liste <select> et on y accède directement.

Voici le code actuel :

<select onchange="window.location.href=this.value">
<option value="http://domaine.tld/page-1">Page 1 de mon dossier</option>
<option value="http://domaine.tld/page-2">Page 2 de mon dossier</option>
<option value="http://domaine.tld/page-3">Page 3 de mon dossier</option>
<option value="http://domaine.tld/page-4">Page 4 de mon dossier</option>
</select>

Je vous rassure le site n'est pas encore en production. Et bien heureusement car en faisant ainsi, impossible de naviguer dans le dossier si javascript est désactivé...
De plus, je doute que ce genre de menu soit réellement accessible.

Pour ces raisons, je préfèrerais faire mon menu sous la forme :

<ul>
<li><a href="http://domaine.tld/page-3">Page 3 de mon dossier</a></li>
<li><a href="http://domaine.tld/page-4">Page 4 de mon dossier</a></li>
</ul>

mais qu'il ait toujours l'apparence d'un <select>.
Est-ce réalisable en CSS ? Car si oui, je pourrais à la fois le rendre accessible ET utilisable sans Javascript.
Ou alors je me plante de voie ?

Comment feriez vous ?

Merci
Modifié par vanquish (21 Apr 2010 - 18:45)

Bonjour regarde sur le site www.avaya.com tu verras en haut a droite un menu déroulant pour sélectionner un pays, je pense que c'est de cela que tu parle.
si oui j'ai réussi a le reproduire sur une site en intranet pour la société dans laquelle je bosse.

Merci. En réalité, je cherche plus à faire quelque chose comme ici : en bas de page http://www.presence-pc.com/tests/radeon-5870-eyefinity-23279/2/ entre page précédente et page suivante.

vanquish a écrit :
Est-ce réalisable en CSS ?

Lui donner l'apparence d'un widget natif de l'OS ou du navigateur: non.
Créer une sorte de menu déroulant (une entrée «de base» et une liste de liens), aux couleurs du site tant qu'on y est, c'est par contre tout à fait possible.

Utilisable sans JavaScript: il y a plusieurs possibilités pour ça. Soit tu affiches tous les liens les uns en dessous des autres si JS est désactivé (ou plutôt tu affiches comme ça par défaut, et tu masques certains liens via JavaScript et pas uniquement avec CSS). Soit tu affiches un seul lien, qui pointera vers une page qui reprend la liste complète des liens.

Accessible: il faut voir l'implémentation exacte. Difficile pour une personne extérieure au projet de donner une recette miracle (code à copier-coller ) qui colle à tes besoins.

Pour info, l'exemple donné sur Présence PC n'est pas accessible. Un des problèmes est que même si la navigation au clavier semble possible (si le focus est sur le lien correspondant à la page en cours, valider le lien va afficher la liste déroulante des pages, dans laquelle on pourra naviguer), ce n'est pas utilisable avec la plupart des navigateurs car la mise en forme par défaut au :focus a été supprimée en CSS, donc on ne sait jamais où se trouve le focus.
Modifié par Florent V. (22 Apr 2010 - 18:24)

Les select qui ouvrent une nouvelle page sur onchange ne sont pas accessibles non plus : une seule pression sur une touche fléchée et le onchange se déclenche, sur IE entres autres, interdisant de choisir ce qui se trouve plus bas ou plus haut que l'élément qui suit ou qui précède immédiatement l'élément actif.