Select - Champ de sélection

Champ de sélection dans lequel les utilisateurs peuvent choisir une ou plusieurs options

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut

  • Élément principal : <input type="text" role="combobox">
  • Attributs ARIA utilisés :
    • aria-controls="listbox"
    • aria-expanded="false"
    • aria-haspopup="listbox"
    • aria-labelledby pointant vers le libellé
    • aria-disabled="false"
    • aria-describedby pointant vers le texte d’aide

 

Attributs de l’élément ayant un impact sur l’accessibilité

Attribut

Impact

label

⚠️ Obligatoire (ou son équivalent slot=”label”; sauf si accessible-name est utilisé, non recommandé)

Donne un libellé accessible au champ.

accessible-name

⚠️ Déconseillé, préférer l’utilisation de label

Donne un libellé accessible au champ.

help-text

Ajoute un texte d’aide pour l’utilisateur, référencé par le aria-describedby.

description

Ajoute une description, référencée par le aria-describedby.

disabled

Ajoute les attributs disabled et aria-disabled=”true” à l’élément interactif

readonly

Ajoute les attributs readonly et aria-disabled à l’élément interactif

error

Ajoute un attribut aria-invalid=”true” et un attribut aria-describedby pointant vers le texte d’erreur à l’élément intéractif.
Affiche les messages d’erreur.

⚠️ Si cet attribut est ajouté, veillez à ajouter également un attribut error-message.

error-message

⚠️ Obligatoire si error=”true”

Indique à l’utilisateur les erreurs liées au champ

required

Ajoute l’attribut required à l’élément interactif, et affiche un astérisque à gauche du label

 

Navigation et interaction clavier

Touches supportées :

  • Flèche haut / Flèche bas → navigation entre les différentes options (ouvre la liste déroulante si elle n’était pas ouverte)
  • Home → navigation vers la première option
  • End → navigation vers la dernière option
  • Esc
    • Si la liste déroulante est ouverte, fermeture de la liste
    • Si la liste déroulante est fermée en mode sélection multiple, effacement de la saisie
    • Si la liste déroulante est fermée en mode sélection simple, désélection le cas échéant
  • Tab → Fermeture de la liste si elle était ouverte
  • Entrer → sélection d’une option

 

Référence