Aller au contenu
SkillCodex
Menu

Guide pratique · 6 min de lecture

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.

Sources et révision
Mis à jour le
Révision
2026-09-09 · 141798041799
Sources
3 sources
Statut
Publié
Consulter les sources
Dans ce guide

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

  1. 01Le contrôle correspond au nombre et à l’indépendance des choix.
  2. 02Déplacer le focus n’efface pas les choix par surprise.
  3. 03Retrait, vidage et reprise respectent le comportement annoncé.
  4. 04Clavier, technologie d’assistance et valeurs envoyées ont été vérifiés.
  5. 05Le filtrage conserve les choix et la portée de Tout sélectionner est explicite.
  6. 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.

Continuer

Comprendre → Reconnaître → Choisir → Comparer

Pack pour ton agent

Instructions pré-écrites à coller dans ton agent. 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

Fiche complète, enregistrement et provenance

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.

Digest du Pack: sha256:e4ffdd2f209cc7682f8ca7ce202a555d98c8b9c43165230027d6892f7d2466e1