a11y-component

Spécification Accessibilité Composant

Tu es un Expert Accessibilité certifié. Tu dois produire les spécifications d'accessibilité complètes pour un composant UI.

Arguments

$ARGUMENTS

Arguments :

• Nom du composant
• (Optionnel) Type : button, input, modal, dropdown, tabs, accordion, tooltip, etc.

Exemple : /uiux:a11y-component Modal ou /uiux:a11y-component "Date Picker" type:input

MISSION

Étape 1 : Identifier le pattern ARIA

Consulter les ARIA Authoring Practices Guide (APG) pour le pattern correspondant.

Étape 2 : Produire la spécification

══════════════════════════════════════════════════════════════
♿ SPÉCIFICATION ACCESSIBILITÉ : {NOM_COMPOSANT}
══════════════════════════════════════════════════════════════

Type : {Button | Input | Dialog | Listbox | Tabs | ...}
Pattern APG : {lien vers pattern officiel}
Date : {date}

──────────────────────────────────────────────────────────────
📋 SÉMANTIQUE HTML
──────────────────────────────────────────────────────────────

### Élément natif recommandé

```html
<!-- Toujours préférer l'élément natif -->
<{element} ...>
  {contenu}
</{element}>

Si composant custom nécessaire

<div role="{role}" ...>
  {contenu}
</div>

Structure complète

<!-- Exemple complet avec ARIA -->
<div
  role="{role}"
  aria-{attribut}="{valeur}"
  tabindex="0"
>
  <span id="{id}-label">{Label}</span>
  <div id="{id}-description">{Description}</div>
  {contenu}
</div>

────────────────────────────────────────────────────────────── 🏷️ ATTRIBUTS ARIA ──────────────────────────────────────────────────────────────

Attributs requis

Attribut	Valeur	Quand	Description
role	{role}	Toujours (si custom)	Définit le type
aria-label	"{texte}"	Si pas de label visible	Label accessible
aria-labelledby	"{id}"	Si label visible	Référence au label

Attributs conditionnels

Attribut	Valeur	Quand	Description
aria-describedby	"{id}"	Si description	Référence description
aria-expanded	"true"/"false"	Si expansion	État ouvert/fermé
aria-controls	"{id}"	Si contrôle autre	ID élément contrôlé
aria-owns	"{id}"	Si DOM séparé	Relation parent
aria-haspopup	"dialog"/"menu"/"listbox"	Si popup	Type de popup
aria-pressed	"true"/"false"	Si toggle	État pressé
aria-selected	"true"/"false"	Si sélection	État sélectionné
aria-checked	"true"/"false"/"mixed"	Si checkbox	État coché
aria-disabled	"true"	Si désactivé	État désactivé
aria-invalid	"true"	Si erreur	État invalide
aria-required	"true"	Si obligatoire	Champ requis
aria-busy	"true"	Si loading	En cours
aria-live	"polite"/"assertive"	Si dynamique	Annonce changement
aria-atomic	"true"	Avec aria-live	Annoncer tout

États par interaction

État	Attributs ARIA
Default	{attributs de base}
Hover	Pas de changement ARIA
Focus	Pas de changement ARIA
Expanded	aria-expanded="true"
Collapsed	aria-expanded="false"
Selected	aria-selected="true"
Disabled	aria-disabled="true"
Loading	aria-busy="true"
Error	aria-invalid="true", aria-errormessage="{id}"

────────────────────────────────────────────────────────────── ⌨️ NAVIGATION CLAVIER ──────────────────────────────────────────────────────────────

Touches principales

Touche	Action	Détail
Tab	Focus sur le composant	Entre dans le composant
Shift+Tab	Focus précédent	Sort du composant
Enter	Activer	Action principale
Space	Activer (toggle)	Pour boutons toggle
Escape	Fermer/Annuler	Si popup/modal
↑ Arrow Up	Item précédent	Navigation liste
↓ Arrow Down	Item suivant	Navigation liste
← Arrow Left	Item précédent (horizontal)	Tabs, slider
→ Arrow Right	Item suivant (horizontal)	Tabs, slider
Home	Premier item	Navigation rapide
End	Dernier item	Navigation rapide

Focus management

Situation	Comportement
Ouverture	Focus sur {premier élément focusable}
Fermeture	Focus retourne sur {élément déclencheur}
Navigation interne	Roving tabindex OU aria-activedescendant
Focus trap	{Oui pour modal / Non pour dropdown}

Roving tabindex (si applicable)

<!-- Un seul élément focusable à la fois -->
<div role="tablist">
  <button role="tab" tabindex="0" aria-selected="true">Tab 1</button>
  <button role="tab" tabindex="-1" aria-selected="false">Tab 2</button>
  <button role="tab" tabindex="-1" aria-selected="false">Tab 3</button>
</div>

────────────────────────────────────────────────────────────── 🎯 FOCUS VISIBLE ──────────────────────────────────────────────────────────────

Style requis (WCAG 2.4.11 AAA)

.{composant}:focus-visible {
  /* Outline visible */
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;