Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

2.3.3. Listes déroulantes simulées

Principe

Les listes déroulantes dites “simulées” n’utilisent que partiellement les éléments de formulaires proposés par défaut par HTML, à savoir les champs <select> et les balises <option>. Elles exploitent une astuce CSS, qui permet ensuite de customiser en partie les listes obtenues.

Remarque

Il existe d’autres techniques plus avancées pour simuler totalement des listes déroulantes, qui permettent notamment un contrôle très fin de l’apparence des listes de choix. Ces techniques sont beaucoup plus lourdes que la solution proposée ici, elles ne sont pas abordées dans ce document.

Code HTML de base

Le code HTML de base utilise une liste déroulante classique :

<form action="index.html" method="post">
    <label for="couleur-yeux">
        Quelle est la couleur de vos yeux ?
        <select name="couleur-yeux" id="couleur-yeux">
            <option value="noirs">Noirs</option>
            <option value="bleus">Bleus</option>
            <option value="verts">Verts</option>
            <option value="marrons">Marrons</option>
            <option value="autres">Autres</option>
        </select>
    </label>
 
    <input type="submit" value="Transmettre les informations" />
</form>

Sans JavaScript, un formulaire classique est proposé à l’utilisateur.

Comportement avec JavaScript

Avec JavaScript, le comportement des listes déroulantes simulées doit être le même que celui des listes déroulantes classiques.

La méthode consiste, dans les grandes lignes, à respecter les étapes suivantes :

  1. La propriété CSS opacity: 0; est appliquée sur la balise <select> lorsque JavaScript est activé. Cette propriété a pour effet de rendre la liste invisible par défaut, au détail près que les options continuent d’apparaître au clic sur le <select>, qui conserve sa place à l’écran, puisqu’il est seulement rendu invisible en jouant sur l’opacité.
  2. Un conteneur vide est créé dans le DOM, juste après le <select>. Par exemple un <span>. Ce conteneur est ensuite peuplé dynamiquement en JavaScript, avec la valeur courante de la liste déroulante. Le script est appelé à chaque fois que l’état de la liste déroulante change.
  3. Le <select> invisible est positionné en CSS juste au-dessus du conteneur créé, de manière à ce qu’un clic sur le conteneur déclenche l’ouverture de la liste déroulante.

Plus précisément, les scripts doivent gérer les points suivants :

  • La propriété CSS opacity: 0; est appliquée sur le <select>.
  • Un conteneur vide est ajouté dans le DOM juste après le <select>. Dans l’exemple, un <span> est utilisé.
  • L’attribut aria-hidden=“true” est appliqué sur ce conteneur, afin de le masquer aux utilisateurs de lecteurs d’écran, qui auront eux accès au <select> invisible.
  • Le conteneur ne prend jamais le focus, mais une classe est rajoutée sur ce dernier via l’attribut class, dès lors que le focus est positionné sur le <select>. Cette classe est supprimée dès que le <select> perd le focus. CSS utilise cette classe pour simuler visuellement la prise de focus sur le conteneur.
  • Une image est intégrée dans le conteneur par l’intermédiaire d’une balise <img /> avec attribut alt vide, pour indiquer aux utilisateurs qu’il s’agit d’une liste déroulante. Une bonne pratique d’accessibilité consiste à utiliser une flèche orientée vers le bas pour cet élément.
  • Dès que l’état de la liste change, la valeur du conteneur est mise à jour. Elle reprend la valeur de l’option sélectionnée dans la liste déroulante.
  • Le script qui peuple le conteneur est toujours appelé une fois par défaut, au chargement de la page.

Le code ainsi obtenu avec JavaScript sera le suivant :

<form method="post" action="index.html">
    <label for="couleur-yeux">
        Quelle est la couleur de vos yeux ?
        <div class="conteneur-liste">
            <select id="couleur-yeux" name="couleur-yeux">
                <option value="noirs">Noirs</option>
                <option value="bleus">Bleus</option>
                <option value="verts">Verts</option>
                <option value="marrons">Marrons</option>
                <option value="autres">Autres</option>
            </select>
            <span class="conteneur-choix" aria-hidden="true">Noirs<img alt="" src="images/fleche.png"></span>
        </div>
    </label>
 
    <input type="submit" value="Transmettre les informations">
</form>

Démonstration

notices/interfaces-riches-javascript/listes-deroulantes-simulees.txt · Dernière modification: Le 24/01/2014 à 16:57 par Régis Lapeze
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :