Combobox et saisie semi-automatique bien conçus
Créez une sélection recherchable que les lecteurs d'écran comprennent.
Combobox et saisie semi-automatique bien conçus est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce qu'une boîte combinée ?
Une boîte combinée est un champ de saisie associé à une fenêtre contextuelle de suggestions. Pensez aux champs de recherche qui affichent des résultats correspondants à mesure que vous saisissez du texte. 🔍
Deux parties qui fonctionnent ensemble
Une boîte combinée comporte un champ de saisie textuelle dans lequel l'utilisateur écrit et une liste contextuelle distincte contenant les options. ARIA relie les deux afin que les lecteurs d'écran les associent.
Le rôle sur le champ de saisie
Placez role="combobox" directement sur le champ de saisie textuelle. Cela indique aux technologies d'assistance que la saisie ici fera apparaître une liste de choix.
<input role="combobox" aria-expanded="false"
aria-controls="results" type="text">Pointez vers la fenêtre contextuelle
Utilisez aria-controls sur le champ de saisie et donnez-lui l'identifiant de la fenêtre contextuelle. Cela relie le champ à la liste qu'il ouvre et ferme.
Annoncez l'état ouvert ou fermé
Basculez aria-expanded sur true lorsque la liste est affichée et sur false lorsqu'elle est masquée. Les lecteurs d'écran annoncent l'état de la fenêtre contextuelle à partir de cet attribut.
La fenêtre contextuelle est une liste de choix
Le conteneur des suggestions reçoit role="listbox" et chaque suggestion reçoit role="option". Les utilisateurs disposent ainsi d'une liste familière et navigable.
<ul id="results" role="listbox">
<li role="option" id="o1">Apple</li>
</ul>Le focus reste dans le champ de saisie
Voici l'astuce : le focus clavier ne quitte jamais le champ de saisie. L'utilisateur continue d'écrire tandis que les touches fléchées déplacent la sélection parmi les options.
aria-activedescendant
Faites pointer aria-activedescendant du champ de saisie vers l'identifiant de l'option sélectionnée. C'est ainsi qu'un lecteur d'écran lit le choix actif sans déplacer le focus réel.
<input role="combobox"
aria-activedescendant="o1">Les touches attendues
Les flèches bas et haut parcourent les options, Entrée sélectionne celle qui est active et Échap ferme la fenêtre contextuelle. Ces touches proviennent directement de l'APG.
Marquez l'option choisie
Définissez aria-selected="true" sur l'option sélectionnée et false sur les autres. Dans une boîte combinée à sélection unique, une seule option doit être sélectionnée à la fois.
Comportement de saisie semi-automatique
Utilisez aria-autocomplete pour décrire l'apparition des suggestions : « list » pour un menu filtré ou « both » lorsque le texte est également complété directement dans le champ.
Vérification rapide
L'utilisateur parcourt les suggestions de votre boîte combinée avec la flèche bas. Quel attribut indique au lecteur d'écran quelle option est active ?
Récapitulatif
Une boîte combinée associe un champ de saisie et une liste de choix : reliez-les avec aria-controls et aria-expanded, gardez le focus dans le champ et suivez l'option active avec aria-activedescendant. ✅
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Combobox et saisie semi-automatique bien conçus » est-elle gratuite ?
Oui — le texte complet de « Combobox et saisie semi-automatique bien conçus » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Combobox et saisie semi-automatique bien conçus » ?
Créez une sélection recherchable que les lecteurs d'écran comprennent. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Combobox et saisie semi-automatique bien conçus » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Lire l'APG : modèles, touches et exemples
- Combobox et saisie semi-automatique bien conçus
- Menu, barre de menus et bouton de menu
- Treegrid et autres modèles avancés