Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Élément principal : <input>
- Attributs ARIA utilisés :
- aria-describedby pointant vers le préfixe, le suffixe, et 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 |
⚠️ Obligatoire si un format spécifique est attendu 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 |
|
autocomplete |
⚠️ Obligatoire sur tous les champs de saisie concernant des données à caractères personnelles (nom, prénom, mail, téléphone, etc.). La liste des valeurs à utiliser est consultable sur ce site : https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/autocomplete. |
|
counter |
Affiche le compteur de caractère si l’attribut maxlength est renseigné, et ajoute le compteur dans la liste des éléments vers lesquels pointe aria-describedby. |
Navigation et interaction clavier
Touches supportées :
- type=”date”
- Esc → ferme le panneau
- Tab → fermeture du panneau si le focus devait en sortir
- Sur les champs de sélection de date :
- Flèche gauche → sélectionne le champ numérique précédent (jour/mois/année)
- Flèche droite → sélectionne le champ numérique suivant (jour/mois/année)
- Flèche haut → incrémente le champ sélectionné
- Flèche bas → décrémente le champ sélectionné
- Entrer → valide la saisie
- Sur le bouton de calendrier :
- Entrer, Espace → ouverture / fermeture du calendrier
- Sur une date du calendrier :
- Flèches → navigation entre les dates du calendrier
- Entrer, Espace → sélection de la date
- type=”time”
- Esc → ferme le panneau
- Tab → fermeture du panneau si le focus devait en sortir
- Sur le panneau :
- Flèches → navigation et sélection ds entre les dates du calendrier
- Entrer → fermeture du panneau
Gestion du focus :
- type=”date”
-
Lorsqu’une valeur est saisie, si l’ajout d’un autre chiffre ferait passer la valeur du champ au dessus de sa valeur maximale, le focus est automatiquement déplacé sur le prochain champ
Exemple : Si je saisie “12” dans le champ “jour”, l’ajout d’un autre chiffre ne correspondrait plus à une valeur de jour. Le focus passe donc automatiquement au champ suivant. - À la fermeture du calendrier, retour du focus sur le bouton calendrier.
- type=”time”
- A l’ouverture du panneau, déplacement du focus sur l’heure sélectionnée, ou à défaut l’heure minimale.
- À la fermeture du panneau, retour du focus sur le bouton horloge.
Référence