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-autocomplete="list"
- aria-expanded="false"
- aria-haspopup="listbox"
- aria-labelledby pointant vers le libellé
- aria-disabled="false"
- aria-describedby pointant vers le texte d’aide
- aria-activedescendant avec l’id de l’option active
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. ⚠️ 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