accessibility

Category: Development & Coding | Uploader: vendeesign | Downloads: 0 | Version: v1.0（Latest）
WCAG AA pour code UI : HTML/JSX/Vue/Svelte, composants interactifs, navigation, focus, images. Couvre sémantique, labels, clavier, contrastes, touch targets, ARIA.
Changelog: Source: GitHub https://github.com/vendeesign/codebloom
Directory Structure

Current level: skills/accessibility/
📄 SKILL.md 5.2 KB
SKILL.md

---
name: accessibility
description: "WCAG AA pour code UI : HTML/JSX/Vue/Svelte, composants interactifs, navigation, focus, images. Couvre sémantique, labels, clavier, contrastes, touch targets, ARIA."
license: MIT
compatibility: "UI projects with HTML/JSX/TSX/Vue/Svelte"
metadata:
  author: anima-adn
  version: 1.8.4
  category: design
---

# Accessibility — Garde-fou UI

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

**Consulter `DESIGN_SYSTEM.md`** s'il existe — les tokens de couleur et spacing du projet servent de référence pour les contrastes et touch targets.

## 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 — les lecteurs d'écran, le clavier et les moteurs de recherche comprennent nativement `<button>`, `<nav>`, `<main>`. ARIA est un correctif pour les cas où le HTML natif ne suffit pas, 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"`. Un élément non focusable est invisible pour les utilisateurs clavier
- Ordre de focus logique — suit le flux visuel. Un tab order incohérent désoriente l'utilisateur
- Focus visible — supprimer `outline` sans alternative rend la navigation clavier aveugle
- Piège de focus dans les modals — sans trap, le focus se perd dans le contenu derrière le modal
- `Escape` ferme les modals, menus, popovers — convention universelle attendue par tous les utilisateurs

### 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; }
}
```

## Vérification

### Outils automatiques
- **Linting** : `eslint-plugin-jsx-a11y` (React), `vue-a11y` (Vue) — à suggérer lors du `/codebloom:setup` si projet UI
- **Audit** : `axe-core` / `@axe-core/react`, Lighthouse accessibility audit
- **CI** : `pa11y` ou `axe-core/cli` pour tests d'accessibilité automatisés

### Vérification manuelle rapide
- Naviguer au clavier seul (Tab, Enter, Escape, flèches)
- Zoomer à 200% — le contenu reste lisible et utilisable ?
- Tester avec un lecteur d'écran (VoiceOver macOS, NVDA Windows)

## 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
Comments 0
Latest | Hot
Please login before commenting.
No comments yet. Be the first one!
accessibility

Directory Structure

SKILL.md

Report

Notice
