Accessibility — Garde-fou UI

Name: accessibility
Rating: 92
Author: vendeesign

Ce skill s'active quand du code UI est écrit ou modifié, pour garantir l'accessibilité dès la première ligne.

Zones de déclenchement

•HTML, JSX, TSX, Vue templates, Svelte
•Composants UI (boutons, formulaires, modals, menus, tabs)
•Navigation et routing
•Images, icônes, médias
•Gestion du focus et interactions clavier

Règles fondamentales

HTML sémantique d'abord

Au lieu de...	Utiliser...
`<div onClick>`	`<button>`
`<div class="header">`	`<header>`
`<span class="link">`	`<a href>`
`<div class="list">`	`<ul>` / `<ol>`
`<div class="input">`	`<input>` / `<select>` / `<textarea>`

Le HTML sémantique fournit l'accessibilité gratuitement. ARIA est un correctif, pas un remplacement.

Images et médias

•Toute <img> a un alt — descriptif si informatif, vide (alt="") si décoratif
•Icônes interactives : aria-label sur le bouton parent, aria-hidden="true" sur l'icône
•Vidéos : sous-titres ou transcription

Formulaires

•Chaque input a un <label> associé (via htmlFor/for ou wrapping)
•Messages d'erreur liés via aria-describedby
•Groupes de champs dans <fieldset> avec <legend>
•Attributs required, type, inputmode, autocomplete appropriés
•Ordre logique des champs (pas de tabindex positif)

Navigation clavier

•Tout ce qui est cliquable est focusable — éléments natifs (button, a) ou tabindex="0"
•Ordre de focus logique — suit le flux visuel
•Focus visible — ne jamais supprimer outline sans alternative
•Piège de focus dans les modals — focus ne sort pas du modal tant qu'il est ouvert
•Escape ferme les modals, menus, popovers

Contrastes

•Texte normal : ratio 4.5:1 minimum (WCAG AA)
•Grand texte (>18px bold ou >24px) : ratio 3:1 minimum
•Éléments interactifs : ratio 3:1 pour les bordures et indicateurs
•Ne pas communiquer l'information par la couleur seule (ajouter icône, texte, pattern)

Touch targets

•Taille minimale : 44x44px (WCAG) / 48x48px (Material recommandation)
•Espacement suffisant entre les cibles tactiles
•Zone de tap peut être plus grande que l'élément visuel (padding)

ARIA — Seulement quand nécessaire

html

<!-- Bon : HTML sémantique suffit -->
<button>Fermer</button>

<!-- Bon : ARIA nécessaire pour un composant custom -->
<div role="tablist">
  <button role="tab" aria-selected="true">Onglet 1</button>
  <button role="tab" aria-selected="false">Onglet 2</button>
</div>
<div role="tabpanel">Contenu</div>

<!-- Mauvais : ARIA redondant -->
<button role="button">Fermer</button>

<!-- Mauvais : ARIA à la place du sémantique -->
<div role="button" tabindex="0">Fermer</div>

Composants courants

Composant	Points clés
Modal	`role="dialog"`, `aria-modal="true"`, `aria-labelledby`, trap focus, Escape ferme
Menu dropdown	`role="menu"`, `aria-expanded`, flèches pour naviguer, Escape ferme
Tabs	`role="tablist/tab/tabpanel"`, `aria-selected`, flèches pour changer
Toast/notification	`role="alert"` ou `aria-live="polite"`
Accordion	`<details>/<summary>` natif ou `aria-expanded`
Carrousel	`aria-roledescription`, `aria-label`, contrôles pause/play

Animations

•Respecter prefers-reduced-motion — réduire ou supprimer les animations
•Pas de contenu clignotant (>3 flashes/seconde)

css

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

Comportement

•Signaler les manquements d'accessibilité comme des bugs, pas des suggestions
•Proposer le fix avec le code corrigé
•HTML sémantique avant ARIA — toujours
•Ne pas sur-compliquer — l'accessibilité de base (sémantique, labels, contrastes, clavier) couvre 90% des cas
•Référencer DESIGN_SYSTEM.md pour les tokens de couleur et spacing