Guide pratique
6 min de lecture
Mis à jour le
Permettre de choisir plusieurs éléments
Choisis des cases, une liste multisélection ou des étiquettes, puis vérifie la sélection au clavier et la reprise.
Réponse directe
Commence par des cases visibles pour un ensemble court. Utilise une liste multisélection pour une collection fixe ou une recherche avec étiquettes soigneusement testée pour un grand vocabulaire. Rends les choix visibles, permets leur retrait et vérifie les valeurs envoyées.
01
1. Choisis le contrôle selon le besoin
Pour quelques choix indépendants visibles, commence par des cases à cocher natives avec des libellés, regroupées sous une question commune. Pour une liste fixe plus longue, envisage un select natif avec multiple ou une listbox multisélection accessible. Teste le navigateur et l’appareil visés : les gestes de sélection native varient.
Si la personne recherche dans un grand vocabulaire et conserve plusieurs choix sous forme d’étiquettes supprimables, définis séparément la sélection et le retrait. Le nom « combobox » ne garantit pas à lui seul une multisélection accessible. Décide si la saisie crée une valeur ou cherche seulement dans les valeurs existantes ; ne transforme pas silencieusement une faute en nouvel enregistrement.
02
2. Distingue le focus de la sélection
Le focus indique où s’applique la prochaine action au clavier ; la sélection contient les valeurs utilisées. Dans le modèle multisélection recommandé par APG, les flèches déplacent le focus et Espace bascule le choix ciblé sans touche modificatrice. Passer sur un choix ne doit pas effacer les précédents. Expose la capacité de sélection multiple et l’état de chaque option de façon cohérente.
Une option de listbox ne sert pas de conteneur à des liens ou boutons actionnables séparément. Si une ligne comporte plusieurs actions, choisis une autre interaction. Un groupe de cases à cocher conserve son comportement : Tab atteint les contrôles et Espace change la case ciblée. Ne transpose pas arbitrairement les flèches de la listbox sur des champs natifs.
03
3. Rends les choix visibles
Exemple original : une liste de lecture peut recevoir les thèmes Design, Tests et Rédaction. Demande « Quels thèmes correspondent à cette liste ? » et autorise zéro à trois choix. Pars sans choix, sélectionne Design et Tests, puis retire Design. La valeur enregistrée doit contenir uniquement Tests ; la position du focus ne change pas ce contenu.
Utilise des identifiants stables pour les valeurs et des libellés traduits à l’écran. Montre les éléments retenus et leur nombre si le filtrage peut les masquer. Précise si « Tout sélectionner » concerne les résultats visibles ou toute la collection. Conserve les choix quand la recherche change.
04
4. Permets le retrait et la reprise
Prévois un retrait individuel et une action pour vider les choix. Le bouton d’une étiquette doit nommer la valeur retirée. Après le retrait, garde le focus à un endroit utile et prévisible, par exemple l’action suivante ou la saisie. Effacer la recherche et vider les valeurs sélectionnées sont deux actions différentes : nomme-les distinctement.
Si l’application des choix échoue, conserve la sélection en cours et explique la reprise. Sélectionner des éléments n’autorise pas à lancer une opération destructive. Dans cet exemple de lecture, les thèmes peuvent être modifiés : prévois le retour à l’édition. Explique un choix désactivé quand son indisponibilité serait incompréhensible.
05
5. Vérifie le parcours complet
Exécute l’exemple au clavier seul, puis avec le lecteur d’écran et l’appareil tactile visés. Vérifie la question, les libellés, le focus visible, les états, les noms des actions de retrait et les valeurs envoyées. Sélectionne des choix non voisins, filtre, reviens, vide puis envoie un ensemble vide si autorisé. Note les plateformes non testées.
Pour des options asynchrones, lance une première recherche lente puis une seconde plus rapide. Seuls les résultats courants doivent apparaître ; les choix conservent leur identité même temporairement absents. Ce scénario ne prouve pas une cause particulière de concurrence. Les listes virtualisées et les grands vocabulaires distants demandent des vérifications d’accessibilité propres à leur implémentation.
- Choisis Design et Tests, puis retire Design : seul Tests reste.
- Filtre sur Rédaction puis efface la recherche : Tests reste sélectionné.
- Vide les choix puis applique : les valeurs envoyées sont vides si cela est autorisé.
À conserver
Vérifie avant livraison
- 01Le contrôle correspond au nombre et à l’indépendance des choix.
- 02Déplacer le focus n’efface pas les choix par surprise.
- 03Retrait, vidage et reprise respectent le comportement annoncé.
- 04Clavier, technologie d’assistance et valeurs envoyées ont été vérifiés.
- 05Le filtrage conserve les choix et la portée de Tout sélectionner est explicite.
- 06Une réponse lente ne remplace pas les résultats récents et ne perd pas les identifiants choisis.
Sources primaires
Les affirmations techniques de ce guide sont reliées aux spécifications et documentations first-party.
- Listbox Pattern (nouvel onglet)W3C · Modèles de sélection, focus et sémantique des options ; ne certifie pas un composant.
- Checkbox Pattern (nouvel onglet)W3C · Groupes nommés et états des cases.
- The select element (nouvel onglet)MDN Web Docs · Sélection multiple native et interactions selon la plateforme.
Continuer
Guides et outils associés
Comprendre → Reconnaître → Choisir → Comparer
Pack pour ton agent
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
Implémenter correctement
Applique « Permettre de choisir plusieurs éléments » pas à pas
# Applique le guide « Permettre de choisir plusieurs éléments » dans ton agent ## Objectif Commence par des cases visibles pour un ensemble court. Utilise une liste multisélection pour une collection fixe ou une recherche avec étiquettes soigneusement testée pour un grand vocabulaire. Rends les choix visibles, permets leur retrait et vérifie les valeurs envoyées. ## Prérequis - Inspecte le dépôt, la documentation et les conventions existantes. - Confirme que le besoin correspond au périmètre du guide : Choisis des cases, une liste multisélection ou des étiquettes, puis vérifie la sélection au clavier et la reprise. - Préserve les décisions correctes déjà en place. ## Étapes du guide - 1. 1. Choisis le contrôle selon le besoin — Pour quelques choix indépendants visibles, commence par des cases à cocher natives avec des libellés, regroupées sous une question commune. Pour une liste fixe plus longue, envisage un select natif avec multiple ou une listbox multisélection accessible. Teste le navigateur et l’appareil visés : les gestes de sélection native varient. - 2. 2. Distingue le focus de la sélection — Le focus indique où s’applique la prochaine action au clavier ; la sélection contient les valeurs utilisées. Dans le modèle multisélection recommandé par APG, les flèches déplacent le focus et Espace bascule le choix ciblé sans touche modificatrice. Passer sur un choix ne doit pas effacer les précédents. Expose la capacité de sélection multiple et l’état de chaque option de façon cohérente. - 3. 3. Rends les choix visibles — Exemple original : une liste de lecture peut recevoir les thèmes Design, Tests et Rédaction. Demande « Quels thèmes correspondent à cette liste ? » et autorise zéro à trois choix. Pars sans choix, sélectionne Design et Tests, puis retire Design. La valeur enregistrée doit contenir uniquement Tests ; la position du focus ne change pas ce contenu. - 4. 4. Permets le retrait et la reprise — Prévois un retrait individuel et une action pour vider les choix. Le bouton d’une étiquette doit nommer la valeur retirée. Après le retrait, garde le focus à un endroit utile et prévisible, par exemple l’action suivante ou la saisie. Effacer la recherche et vider les valeurs sélectionnées sont deux actions différentes : nomme-les distinctement. - 5. 5. Vérifie le parcours complet — Exécute l’exemple au clavier seul, puis avec le lecteur d’écran et l’appareil tactile visés. Vérifie la question, les libellés, le focus visible, les états, les noms des actions de retrait et les valeurs envoyées. Sélectionne des choix non voisins, filtre, reviens, vide puis envoie un ensemble vide si autorisé. Note les plateformes non testées. ## Critères d’acceptation — Vérifie avant livraison - Le contrôle correspond au nombre et à l’indépendance des choix. - Déplacer le focus n’efface pas les choix par surprise. - Retrait, vidage et reprise respectent le comportement annoncé. - Clavier, technologie d’assistance et valeurs envoyées ont été vérifiés. - Le filtrage conserve les choix et la portée de Tout sélectionner est explicite. - Une réponse lente ne remplace pas les résultats récents et ne perd pas les identifiants choisis. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Les étapes viennent d’un guide publié et sourcé, pas d’une improvisation.
- La checklist transforme le conseil en critères vérifiables.
- Le périmètre déclaré évite d’étendre le guide au-delà de ses preuves.
À essayer ensuite
Ancre le guide dans le projet
# Ancre le guide dans le projet ## Objectif Transforme les étapes appliquées en conventions durables du dépôt. ## Contrôles - Relie chaque décision prise à l’étape du guide qui la justifie. - Ajoute la checklist aux revues concernées. - Note les cas hors périmètre pour les guides voisins. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:0c141df5da9a2dfaa3aa29c578d660fd6ea440538b197bff6006f3caa98d16e1
Diagnostiquer un problème
Diagnostique un écart au guide « Permettre de choisir plusieurs éléments »
# Diagnostique une application ratée du guide « Permettre de choisir plusieurs éléments » ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Rejoue les étapes dans l’ordre et note la première qui diverge : - 1. 1. Choisis le contrôle selon le besoin — Pour quelques choix indépendants visibles, commence par des cases à cocher natives avec des libellés, regroupées sous une question commune. Pour une liste fixe plus longue, envisage un select natif avec multiple ou une listbox multisélection accessible. Teste le navigateur et l’appareil visés : les gestes de sélection native varient. - 2. 2. Distingue le focus de la sélection — Le focus indique où s’applique la prochaine action au clavier ; la sélection contient les valeurs utilisées. Dans le modèle multisélection recommandé par APG, les flèches déplacent le focus et Espace bascule le choix ciblé sans touche modificatrice. Passer sur un choix ne doit pas effacer les précédents. Expose la capacité de sélection multiple et l’état de chaque option de façon cohérente. - 3. 3. Rends les choix visibles — Exemple original : une liste de lecture peut recevoir les thèmes Design, Tests et Rédaction. Demande « Quels thèmes correspondent à cette liste ? » et autorise zéro à trois choix. Pars sans choix, sélectionne Design et Tests, puis retire Design. La valeur enregistrée doit contenir uniquement Tests ; la position du focus ne change pas ce contenu. - 4. 4. Permets le retrait et la reprise — Prévois un retrait individuel et une action pour vider les choix. Le bouton d’une étiquette doit nommer la valeur retirée. Après le retrait, garde le focus à un endroit utile et prévisible, par exemple l’action suivante ou la saisie. Effacer la recherche et vider les valeurs sélectionnées sont deux actions différentes : nomme-les distinctement. - 5. 5. Vérifie le parcours complet — Exécute l’exemple au clavier seul, puis avec le lecteur d’écran et l’appareil tactile visés. Vérifie la question, les libellés, le focus visible, les états, les noms des actions de retrait et les valeurs envoyées. Sélectionne des choix non voisins, filtre, reviens, vide puis envoie un ensemble vide si autorisé. Note les plateformes non testées. ## Causes possibles - Une étape a été sautée ou exécutée hors ordre. - Le besoin réel sort du périmètre du guide. - Un critère de la checklist n’a jamais été vérifié. ## Corrections bornées - Reprends uniquement l’étape divergente et ce qui en dépend. - Documente l’écart si le périmètre du guide ne couvre pas le besoin. ## Vérification finale — Vérifie avant livraison - Le contrôle correspond au nombre et à l’indépendance des choix. - Déplacer le focus n’efface pas les choix par surprise. - Retrait, vidage et reprise respectent le comportement annoncé. - Clavier, technologie d’assistance et valeurs envoyées ont été vérifiés. - Le filtrage conserve les choix et la portée de Tout sélectionner est explicite. - Une réponse lente ne remplace pas les résultats récents et ne perd pas les identifiants choisis. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Le diagnostic rejoue des étapes ordonnées au lieu de chercher au hasard.
- Les corrections restent bornées à la première divergence réelle.
- La checklist sert de vérification finale reproductible.
À essayer ensuite
Préviens la prochaine dérive
# Préviens la prochaine dérive ## Objectif Fais de la première étape divergente un contrôle explicite du projet. ## Contrôles - Ajoute un contrôle ciblé sur l’étape qui a divergé. - Vérifie la checklist sur un second cas réel. - Documente la limite de périmètre rencontrée. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:fe9f4c59ab30cfc685bfeff3aa3137fa8c7be8666fcbbe524b0858a247d940ce
Digest du Pack: sha256:e4ffdd2f209cc7682f8ca7ce202a555d98c8b9c43165230027d6892f7d2466e1