Composants

Button

Déclenche une action. Une seule action principale par zone ; les autres sont secondaires ou discrètes.

Hauteur minimale 36 px, 44 px recommandée sur mobile. L'état de chargement pose aria-busy et garde un libellé lisible. Libellé = verbe d'action. États : repos, survol, focus, pressé, chargement, désactivé.

Link

Mène vers une autre page ou une autre section. Si l'élément déclenche une action sur place, c'est un bouton.

Le libellé doit avoir du sens hors contexte : pas de « cliquez ici ». Les liens externes l'annoncent. États : repos, survol, focus, visité.

Text field

Saisie courte. Toujours accompagné d'un libellé visible ; l'aide et l'erreur s'affichent sous le champ.

Libellé relié par for, aide et erreur reliées par aria-describedby, aria-invalid en cas d'erreur. Le placeholder n'est jamais un libellé. États : repos, focus, erreur, désactivé.

Textarea

Saisie longue, redimensionnable verticalement.

Libellé visible relié par for, aide et limite annoncées par aria-describedby, redimensionnable verticalement. États : repos, focus, erreur, désactivé.

Select

Choix unique dans une liste de plus de cinq options. En dessous, préférer des boutons radio.

Élément natif select : clavier, lecteurs d'écran et mobile fonctionnent sans code supplémentaire. États : repos, focus, désactivé.

Checkbox

Choix multiples indépendants, ou acceptation d'une condition.

Élément natif ; le libellé entier est cliquable ; Espace coche et décoche. États : non coché, coché, focus, désactivé.

Radio button

Choix unique parmi deux à cinq options visibles en même temps.

Groupe dans un fieldset avec legend. Les flèches déplacent la sélection dans le groupe. États : sélectionné, non sélectionné, focus, désactivé.

Switch

Active ou désactive un réglage avec effet immédiat, sans bouton de validation.

role="switch" : l'état activé ou désactivé est annoncé ; Espace bascule ; l'effet est immédiat, sans bouton de validation. États : désactivé, activé, focus.

Slider

Règle une valeur continue dans un intervalle ; l'effet se voit pendant qu'on fait glisser la poignée.

input type="range" natif, nommé par son label ; ← → ajustent la valeur, la poignée se saisit à la souris comme au doigt. États : repos, survol, saisi, focus.

Segmented control

Bascule entre deux à cinq vues ou filtres d'un même contenu.

Groupe nommé par aria-label, chaque option porte aria-pressed ; navigation par Tab. États : sélectionné, non sélectionné, survol, focus.

Badge

Indique un statut. La couleur est toujours doublée d'un libellé.

Non interactif ; la couleur est toujours doublée par un libellé et une pastille. Variantes : neutre, info, succès, avertissement, erreur.

Tag

Catégorise un contenu. Non interactif par défaut ; cliquable seulement s'il filtre une liste.

Non interactif par défaut ; s'il filtre une liste, il devient un bouton avec aria-pressed. États : repos, accent.

Alert

Message persistant lié au contexte de la page. Pour une confirmation éphémère, utiliser un toast.

role="alert" réservé aux erreurs urgentes, role="status" ou note sinon ; l'icône est décorative (aria-hidden). Variantes : info, succès, avertissement, erreur.

Toast

Confirmation brève d'une action, qui disparaît seule après cinq secondes. Jamais pour une erreur bloquante.

Région role="status" avec aria-live="polite" : le message est lu sans voler le focus. Bouton de fermeture accessible. Variantes : succès, erreur.

Tooltip

Précise un élément au survol ou au focus. Ne contient jamais d'information indispensable.

role="tooltip" relié par aria-describedby ; apparaît au survol et au focus ; Échap la masque ; jamais d'information indispensable. États : masquée, visible.

Modal

Interrompt le parcours pour une décision. À réserver aux confirmations importantes et aux tâches courtes.

Supprimer « Assistant de rédaction » ?

Le cas d'usage et son historique de revues seront retirés du registre. Cette action est définitive.

AnnulerSupprimer

Élément natif dialog : focus piégé, fermeture par Échap, retour du focus sur le bouton d'origine. Le bouton destructif dit ce qu'il détruit. États : fermée, ouverte.

Tabs

Organise des contenus de même niveau sans changer de page.

tablist, tab, tabpanel ; flèches gauche et droite, Début et Fin ; un seul onglet dans l'ordre de tabulation. États : actif, inactif, survol, focus.

Accordion

Replie des contenus secondaires, par exemple une FAQ.

Éléments natifs details et summary : Entrée et Espace ouvrent et ferment, l'état est annoncé. États : fermé, ouvert, focus.

Breadcrumb

Situe la page dans l'arborescence pour les sites de plus de deux niveaux.

nav nommée, liste ordonnée, dernier élément marqué aria-current="page" et non cliquable. États : lien, survol, page courante.

Pagination

Découpe une longue liste en pages numérotées.

nav nommée ; page courante en aria-current="page" ; flèches avec aria-label explicite. États : repos, survol, focus, courante.

Avatar

Représente une personne. Photo si disponible, initiales sinon.

Photo avec texte alternatif ; initiales en role="img" avec le nom complet ; un groupe annonce le nombre de personnes. Variantes : 32, 40, 56 px, groupe.

Progress bar

Montre l'avancement d'une tâche dont on connaît la durée ou le volume.

role="progressbar" avec aria-valuenow, aria-valuemin, aria-valuemax et un libellé relié. États : en cours, terminé.

Skeleton

Réserve l'espace pendant le chargement pour éviter les sauts de mise en page.

Le conteneur porte aria-busy="true" ; aucun texte factice n'est lu ; l'animation s'arrête si l'utilisateur réduit les animations. États : chargement, contenu chargé.

Card

Regroupe des informations sur un même objet. Si toute la carte est cliquable, un seul lien la couvre.

Un seul lien couvre la carte ; le titre est un vrai titre ; le focus est visible sur toute la carte. Variantes : statique, cliquable, mise en avant.

Table

Données à comparer ligne à ligne. Les chiffres sont alignés à droite et en chiffres tabulaires.

caption, en-têtes en th scope, chiffres alignés à droite ; défilement horizontal limité au tableau. États : repos, survol de ligne.