# Accessibility Web

> Référentiel accessibilité web WCAG 2.2 AA pour {{COMPANY_NAME}} — structure et alternatives textuelles, ARIA, clavier et focus, modales, formulaires, contrastes, contenus dynamiques, tableaux, liens. À charger avant de construire ou de relire tout livrable HTML (landing pages 05-web-content/, dashboard 11-reporting/) et pour toute question a11y. La revue automatisée avant livraison est déléguée à…

- **Type:** Skill
- **Install:** `agentstack add skill-littlpinguin-marketing-cockpit-template-accessibility-web`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Littlpinguin](https://agentstack.voostack.com/s/littlpinguin)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Littlpinguin](https://github.com/Littlpinguin)
- **Source:** https://github.com/Littlpinguin/marketing-cockpit-template/tree/main/.claude/skills/accessibility-web

## Install

```sh
agentstack add skill-littlpinguin-marketing-cockpit-template-accessibility-web
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# accessibility-web — référentiel WCAG 2.2 AA {{COMPANY_NAME}}

> Contenu vendorisé et condensé depuis **accessibility-agents** v6.0.0 de Community-Access / Taylor Arndt (MIT) — sous-ensemble web uniquement (10 agents spécialistes sur 80) — voir `docs/vendored-content.md`. Sources d'autorité : [WCAG 2.2](https://www.w3.org/TR/WCAG22/), [ARIA APG](https://www.w3.org/WAI/ARIA/apg/), [axe-core](https://github.com/dequelabs/axe-core).

**Pourquoi c'est bloquant** : l'European Accessibility Act s'applique depuis le 28 juin 2025 aux produits et services numériques vendus dans l'UE (e-commerce inclus). Un livrable web inaccessible est un risque légal, pas seulement un défaut de qualité. Les skills `landing-page` et les pages du dashboard `11-reporting/` passent une revue a11y avant livraison (agent `a11y-auditor`).

## Première règle (avant tout ARIA)

**Ne pas utiliser ARIA si le HTML natif exprime la sémantique.** `` bat `` ; `` bat ``. Un ARIA incorrect est pire que pas d'ARIA : il casse activement l'expérience lecteur d'écran. Ne jamais ajouter de rôle redondant (``, ``…). Exception : plusieurs `` sur une page → `aria-label` distincts.

## 1. Structure, titres, alternatives textuelles (WCAG 1.1.1, 2.4.6)

- Hiérarchie de titres sans saut (H1 unique → H2 → H3) ; landmarks (``, ``, ``, ``) ; `` de page descriptif ; attribut `lang` correct.
- **Toute image a un `alt`** : descriptif si porteuse de sens (regarder l'image et vérifier que l'alt correspond réellement au contenu) ; `alt=""` si décorative (jamais d'alt absent) ; description longue pour les graphiques/données (figure + figcaption ou texte adjacent).
- SVG : `role="img"` + `` si signifiant, `aria-hidden="true"` si décoratif. Icônes seules : nom accessible obligatoire.
- Ne jamais porter un message clé uniquement par une image (croise la règle email/brand-check du template).

## 2. Clavier et focus (WCAG 2.1.1, 2.4.3, 2.4.7)

- **Tout ce qui ne s'atteint pas, ne s'opère pas ou ne s'échappe pas au clavier seul ne marche pas.**
- Ordre de tabulation = ordre du DOM = ordre visuel. **Jamais de `tabindex` > 0.** `tabindex="0"` avec parcimonie ; `tabindex="-1"` pour le focus programmatique.
- Indicateur de focus toujours visible (grep les `outline: none` / `outline: 0` sans remplacement) — contraste 3:1 contre le composant ET le fond.
- SPA / changements de vue : déplacer le focus sur le titre de la nouvelle vue (`tabindex="-1"` + `focus()`), annoncer le changement.
- Skip link en premier élément focusable ; pas de piège au clavier (sauf modale, voir §4).

## 3. ARIA sur les widgets courants (WAI-ARIA 1.2, APG)

- **Tabs** : `role="tablist"` (+ `aria-label`) ; chaque onglet = `` ; navigation aux flèches, un seul tab dans l'ordre de tabulation (`tabindex="-1"` sur les inactifs) ; panneaux `role="tabpanel"` + `aria-labelledby`.
- **Accordéons** : bouton avec `aria-expanded` + `aria-controls`.
- **États dynamiques** : `aria-expanded`, `aria-selected`, `aria-checked`, `aria-current` maintenus en JS — un ARIA statique menteur est un bug bloquant.

## 4. Modales et overlays (APG Dialog Pattern)

- **Toujours l'élément natif ``** (`role="dialog" aria-modal="true" aria-labelledby="titre"`), jamais des `` sauf contrainte documentée.
- Focus à l'ouverture selon le contenu : confirmation destructive → focus sur l'action la moins destructive (Annuler) ; contenu long → focus sur le titre (`tabindex="-1"`) ; défaut → premier élément focusable.
- Focus piégé dans la modale tant qu'elle est ouverte ; **Échap ferme et rend le focus au déclencheur** ; déclencheur avec `aria-haspopup="dialog"` ; titre de modale en H2 ; arrière-plan inerte.

## 5. Formulaires (WCAG 3.3, 1.3.5)

- **Chaque champ a un `` associé** (le clic sur le label active le champ — ce qu'`aria-label` ne fait pas). Jamais le `placeholder` comme seul label.
- `autocomplete` sur les champs d'identité (email, name, tel…) ; champs requis indiqués par le texte + `required`/`aria-required` (pas seulement une astérisque colorée).
- Erreurs : message textuel explicite lié au champ (`aria-describedby`), `aria-invalid="true"`, focus déplacé sur la première erreur ou récapitulatif en tête ; jamais la couleur seule.
- Groupes radio/checkbox dans `` + `` ; feedback de soumission annoncé (voir §7).

## 6. Contrastes et visuel (WCAG 1.4.3, 1.4.11, 2.4.13)

- Texte normal (` sémantique avec `` (jamais une grille de `` pour des données) ; `` descriptif.
- Tri : `aria-sort` sur le `` actif, bouton de tri dans l'en-tête ; tableaux complexes → `headers`/`id`.
- Le dashboard `11-reporting/` (tableaux de métriques) est directement concerné.

## 9. Liens

- Texte de lien explicite hors contexte (« Voir le rapport Q3 », jamais « cliquez ici » / « en savoir plus » répétés).
- Ouverture dans un nouvel onglet signalée (texte ou nom accessible) ; liens visuellement distincts autrement que par la couleur seule dans le corps de texte ; pas de liens brisés ou placeholder (`href="#"`).

## Sévérité des constats (modèle de tri)

| Sévérité | Définition | Exemples |
|---|---|---|
| 🔴 Bloquant | Empêche l'accès à la fonction | piège clavier, modale sans échappement, formulaire sans labels, contraste < 3:1 sur le CTA |
| 🟠 Majeur | Dégrade fortement l'usage | hiérarchie de titres cassée, erreurs non annoncées, focus invisible |
| 🟡 Mineur | Friction ou non-conformité isolée | alt perfectible, lien ambigu isolé, aria redondant |

Tout constat cite son critère WCAG (ex. « 2.4.7 Focus Visible »), sa localisation et sa correction proposée.

## Workflow dans le template

1. **En construction** (skill `landing-page`, dashboard) : appliquer ce référentiel dès l'écriture du HTML — l'accessibilité ne se rattrape pas en QA.
2. **Avant livraison** : dispatcher l'agent **`a11y-auditor`** (`.claude/agents/a11y-auditor.md`) qui audite le rendu réel (axe-core + vérifications manuelles ciblées) et rend un verdict par sévérité.
3. **Correction** : corriger les 🔴 et 🟠 avant livraison ; consigner les 🟡 restants dans le fichier de livraison.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Littlpinguin](https://github.com/Littlpinguin)
- **Source:** [Littlpinguin/marketing-cockpit-template](https://github.com/Littlpinguin/marketing-cockpit-template)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-littlpinguin-marketing-cockpit-template-accessibility-web
- Seller: https://agentstack.voostack.com/s/littlpinguin
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.