ARIA : rôle combobox

Description

Un combobox est un widget composite qui combine un champ de saisie nommé avec un popup fournissant des valeurs possibles pour ce champ de saisie. Le but de ce widget est d'améliorer l'expérience utilisateur en aidant l'utilisateur·ice à sélectionner une valeur sans avoir à taper la valeur complète et, en fonction de la prise en charge des valeurs, d'empêcher l'utilisateur·ice d'entrer des valeurs non valides ou non prises en charge.

Le rôle combobox peut être défini sur un élément input pour les combobox modifiables, ou sur un élément button pour les combobox uniquement sélectionnables. Cet élément contrôle un autre élément, tel qu'un listbox ou une grid, qui peut apparaître dynamiquement pour aider l'utilisateur·ice à définir une valeur.

L'élément avec le rôle combobox peut être soit un champ de texte à une seule ligne modifiable (utilisant un élément <input>), similaire à un avec un <datalist>), soit un élément uniquement sélectionnable (utilisant un élément button) qui n'affiche que la valeur actuelle sans permettre la saisie de texte directe.

Un combobox WAI-ARIA nécessite uniquement un attribut : aria-expanded. Cependant, plusieurs autres attributs sont généralement nécessaires en fonction de l'implémentation : aria-haspopup, aria-controls, aria-activedescendant, et aria-autocomplete.

En général, l'état initial d'un combobox est réduit, avec aria-expanded="false" défini. Dans l'état réduit, seul l'élément combobox et, éventuellement, un bouton frère pour invoquer le popup, sont visibles. L'aria-expanded, avec la valeur définie sur false, est requise lorsqu'elle est réduite, car elle indique aux technologies d'assistance que le widget est extensible.

Le combobox est dans l'état étendu lorsque l'élément combobox affichant sa valeur actuelle et son élément popup associé sont visibles. Lorsqu'il est étendu, aria-expanded="true" doit être défini.

L'élément popup associé à un combobox peut être soit un listbox, soit un tree, soit un grid, soit un dialog.

Les combobox ont une valeur implicite de aria-haspopup de listbox, donc l'inclusion de cet attribut est facultative si le popup est un listbox. Si l'élément popup du combobox est un tree, un grid ou un dialog (tout autre chose qu'un listbox), l'attribut aria-haspopup est requis. La valeur de aria-haspopup doit être soit le rôle tree, grid, dialog ou listbox. Notez que pour cette propriété, true signifie menu, donc assurez-vous que la valeur correspond au rôle du popup, et non à une valeur booléenne.

Lorsque le popup d'un combobox est affiché, assurez-vous que l'attribut aria-controls sur l'élément combobox est défini sur l'id de l'élément popup listbox, tree, grid ou dialog. C'est ainsi que la relation entre l'élément avec le rôle combobox et le popup qu'il contrôle est indiquée. (Remarque : Dans les anciennes spécifications ARIA, cela était aria-owns plutôt que aria-controls, vous pouvez donc voir aria-owns dans d'anciennes implémentations de combobox. Le aria-owns dans le code doit être mis à jour vers aria-controls !)

Si l'interface utilisateur du combobox inclut un contrôle visible, tel qu'une icône, qui permet de contrôler la visibilité du popup via des événements de pointeur et de toucher, ce contrôle doit être un <button>, <input> de type button, ou un élément de rôle button avec un tabindex de -1. Cela permettra au bouton d'être focalisable mais pas inclus dans la séquence de tabulation du clavier. Il ne doit pas être un descendant de l'élément avec le rôle combobox.

Pour être accessible au clavier, le support du clavier pour déplacer le focus entre l'élément combobox et les éléments contenus dans le popup listbox, tree, grid ou dialog, doit être programmé. Une convention courante est que la touche Flèche vers le bas déplace le focus de l'input vers le premier descendant focalisable de l'élément popup.

La propriété aria-activedescendant peut être utilisée pour identifier l'élément actuellement actif du popup du combobox, par exemple une option dans un popup listbox, pour les implémentations où le focus DOM reste sur le combobox. Si le focus DOM ne reste pas sur le combobox lorsque son popup est invoqué, mais que le focus DOM se déplace plutôt dans le popup, comme un dialogue, alors aria-activedescendant peut ne pas être nécessaire.

Si le combobox est implémenté comme un élément <input> modifiable, la valeur du combobox est la valeur de l'input. Pour les combobox uniquement sélectionnables implémentés avec un élément button, la valeur provient de l'option sélectionnée dans le popup.

L'attribut aria-autocomplete n'est applicable que pour les combobox modifiables qui prennent en charge la saisie de texte. Pour ces combobox, définissez l'attribut sur une valeur qui correspond au comportement fourni : inline, list, ou both. L'attribut indique que la saisie de texte déclenchera l'affichage d'une ou plusieurs prédictions de la valeur prévue par l'utilisateur·ice et spécifie comment ces prédictions seront présentées. Pour les combobox uniquement sélectionnables utilisant un élément button, aria-autocomplete ne doit pas être utilisé car aucune saisie de texte n'est possible.

Chaque combobox doit avoir un nom accessible, qui peut être fourni de l'une des trois manières suivantes :

1. Pour un élément <input>, utilisez un <label> associé.
2. Si un label visible existe dans l'interface utilisateur, utilisez aria-labelledby faisant référence à l'id de l'élément label.
3. Si aucun label visible n'est présent, utilisez aria-label.

Rôles, états et propriétés WAI-ARIA associés

aria-expanded

Requis. Identifie si le combobox est ouvert (true) ou fermé (false).

aria-haspopup

Implicite. Si omis, par défaut listbox. Prend également en charge tree, grid ou dialog. Identifie le combobox comme ayant un popout et indique le type.

Interactions au clavier

Flèche vers le bas

Ouvre le popup s'il est fermé et déplace le focus vers l'option suivante, ou vers la première option si aucune n'a été sélectionnée.

Alt + Flèche vers le bas (Optionnel)

Si le popup est disponible mais non affiché, affiche le popup sans déplacer le focus.

Flèche vers le haut

Ouvre le popup s'il est fermé et déplace le focus vers l'option précédente, ou vers la dernière option si aucune n'a été sélectionnée.

Alt + Flèche vers le haut (Optionnel)

Si le popup a le focus, renvoie le focus au combobox, sinon il ferme le popup.

Échap

Ferme le popup s'il est ouvert. Si le popup est déjà fermé, efface la valeur du combobox pour les combobox éditables.

Interactions au clavier pour les combobox éditables

Entrée

Si une suggestion de saisie semi-automatique est sélectionnée dans le popup, accepte la suggestion en mettant à jour la valeur du combobox et en plaçant le curseur d'entrée à la fin. Peut également déclencher une action par défaut (par exemple, dans une application de messagerie, ajouter la valeur acceptée à une liste de destinataires).

Tab

Accepte la valeur actuelle et déplace le focus vers l'élément focusable suivant.

Interactions au clavier pour les combobox à sélection uniquement

Entrée ou Espace

Lorsque le popup est fermé, ouvre le popup. Lorsque le popup est ouvert et qu'une option est sélectionnée, accepte l'option sélectionnée comme valeur du combobox et ferme le popup.

Tab

Accepte la sélection actuelle et déplace le focus vers l'élément focusable suivant.

Début ou Fin

Lorsque le popup est ouvert, déplace le focus vers la première ou la dernière option respectivement.

Exemples

<label for="jokes">Choisissez le type de blagues que vous aimez</label>
<div class="combo-wrap">
  <input
    type="text"
    id="jokes"
    role="combobox"
    aria-controls="joketypes"
    aria-autocomplete="list"
    aria-expanded="false"
    data-active-option="item1"
    aria-activedescendant="" />
  <span aria-hidden="true" data-trigger="multiselect"></span>
  <ul id="joketypes" role="listbox" aria-label="Blagues">
    <li class="active" role="option" id="item1">Jeux de mots</li>
    <li class="option" role="option" id="item2">Devinettes</li>
    <li class="option" role="option" id="item3">Visuelles</li>
    <li class="option" role="option" id="item4">Toc-toc</li>
    <li class="option" role="option" id="item5">Répliques</li>
  </ul>
</div>

Spécifications

Voir aussi

• L'élément HTML <label>
• L'élément HTML <select>
• L'élément HTML <option>
• L'élément HTML <input>
• ARIA : rôle listbox
• ARIA : rôle option
• ARIA : rôle list
• ARIA : rôle listitem
• Meilleures pratiques ARIA - Liste déroulante ^(angl.)
• Un exemple de Module de liste déroulante accessible ^(angl.) par Deque