Carousel Pattern
Composant de défilement de diapositives. Navigation par boutons, points cliquables et clavier (← →). La zone live annonce le slide courant aux lecteurs d'écran sans déplacer le focus.
✓ WCAG 2.1.1 Clavier · 2.2.2 Pause/Stop · 1.3.1 Structure · 4.1.2 Nom/Rôle/Valeur
carousel.html
Formulaire Pattern
Formulaire d'inscription complet avec validation inline accessible. Labels liés, messages d'erreur annoncés par
role="alert",
indicateurs visuels colorés et retour de soumission.
✓ WCAG 1.3.1 · 3.3.1 Erreurs · 3.3.2 Labels · 3.3.3 Suggestions · 1.4.3 Contraste
formulaire.html
Card produit Pattern
Carte produit avec image, badge, prix barré, note, favori et bouton d'ajout au panier. Le titre est un lien — la carte entière n'est pas le lien (évite les liens trop longs à l'annonce).
✓ WCAG 1.1.1 Alt · 1.4.3 Contraste · 2.4.4 Texte du lien · 2.5.5 Taille cible
card-produit.html
Tooltip Pattern
Infobulle accessible via CSS pur (hover + focus-within). Quatre positions disponibles.
Chaque tooltip a un role="tooltip"
et son déclencheur est lié via aria-describedby.
✓ WCAG 1.3.1 · 1.4.13 Hover/Focus · 4.1.2 Nom/Rôle/Valeur
tooltip.html
Ctrl + S
Copie le lien dans le presse-papier
Action irréversible
Mot de passe
8 caractères minimum, 1 majuscule, 1 chiffre
Cette action modifie les données de production. Assurez-vous d'avoir une sauvegarde.
💡 Survolez ou mettez le focus (Tab) sur chaque bouton pour voir le tooltip. Appuyez sur Échap pour fermer (WCAG 1.4.13).
Modale Pattern
Trois variantes : information, formulaire et confirmation destructive. Focus trap complet, fermeture par Échap, overlay cliquable, et restauration du focus sur le déclencheur.
✓ WCAG 2.1.1 Clavier · 2.1.2 Pas de piège · 2.4.3 Focus · 4.1.2 Role/Valeur
modale.html