Initial commit
This commit is contained in:
12
.claude-plugin/plugin.json
Normal file
12
.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"name": "leapmultix-skill-validating-accessibility",
|
||||||
|
"description": "Skill validating-accessibility from LeapMultix",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"author": {
|
||||||
|
"name": "Julien LE SAUX",
|
||||||
|
"email": "contact@jls42.org"
|
||||||
|
},
|
||||||
|
"skills": [
|
||||||
|
"./skills"
|
||||||
|
]
|
||||||
|
}
|
||||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# leapmultix-skill-validating-accessibility
|
||||||
|
|
||||||
|
Skill validating-accessibility from LeapMultix
|
||||||
45
plugin.lock.json
Normal file
45
plugin.lock.json
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"$schema": "internal://schemas/plugin.lock.v1.json",
|
||||||
|
"pluginId": "gh:jls42/leapmultix:leapmultix-marketplace/skills/validating-accessibility",
|
||||||
|
"normalized": {
|
||||||
|
"repo": null,
|
||||||
|
"ref": "refs/tags/v20251128.0",
|
||||||
|
"commit": "cf78698a07f12341a33a08e6144366a42058c80e",
|
||||||
|
"treeHash": "fc1a6c068bb362cd13dd053cfd979236d95a6bac6240a4b1be11d22c68d4f78e",
|
||||||
|
"generatedAt": "2025-11-28T10:19:15.576356Z",
|
||||||
|
"toolVersion": "publish_plugins.py@0.2.0"
|
||||||
|
},
|
||||||
|
"origin": {
|
||||||
|
"remote": "git@github.com:zhongweili/42plugin-data.git",
|
||||||
|
"branch": "master",
|
||||||
|
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
|
||||||
|
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
|
||||||
|
},
|
||||||
|
"manifest": {
|
||||||
|
"name": "leapmultix-skill-validating-accessibility",
|
||||||
|
"description": "Skill validating-accessibility from LeapMultix",
|
||||||
|
"version": "1.0.0"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"path": "README.md",
|
||||||
|
"sha256": "67aa0ad847c2d08b01b985bb7f61eb9bc9fad34af9f54e6d13b7b2b78ee88e6c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": ".claude-plugin/plugin.json",
|
||||||
|
"sha256": "7c1f3e1cad559edbbfa6b2d2bb769d8049aedf6f60be369af659eed69b3b6c95"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "skills/validating-accessibility/SKILL.md",
|
||||||
|
"sha256": "f5d0639750a96fb054d936a3361015464e3bcbca3c29bfa41c76f0a37e5f13cd"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dirSha256": "fc1a6c068bb362cd13dd053cfd979236d95a6bac6240a4b1be11d22c68d4f78e"
|
||||||
|
},
|
||||||
|
"security": {
|
||||||
|
"scannedAt": null,
|
||||||
|
"scannerVersion": null,
|
||||||
|
"flags": []
|
||||||
|
}
|
||||||
|
}
|
||||||
167
skills/validating-accessibility/SKILL.md
Normal file
167
skills/validating-accessibility/SKILL.md
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
---
|
||||||
|
name: validating-accessibility
|
||||||
|
description: Validates web accessibility according to WCAG 2.1 AA standards for users with disabilities. Use when modifying UI, adding components, or performing accessibility audits
|
||||||
|
allowed-tools: Read, Grep, Glob, Bash, WebSearch
|
||||||
|
---
|
||||||
|
|
||||||
|
# Validateur d'Accessibilité
|
||||||
|
|
||||||
|
Guide la validation et l'amélioration de l'accessibilité web selon WCAG 2.1 niveau AA.
|
||||||
|
|
||||||
|
## Table des matières
|
||||||
|
|
||||||
|
- [Quand utiliser](#quand-utiliser)
|
||||||
|
- [Standards WCAG 2.1 AA](#standards-wcag-21-aa)
|
||||||
|
- [Scripts npm disponibles](#scripts-npm-disponibles)
|
||||||
|
- [Checklist essentielle](#checklist-essentielle)
|
||||||
|
- [Workflow d'audit](#workflow-daudit)
|
||||||
|
- [Checklist avant release](#checklist-avant-release)
|
||||||
|
- [En cas de doute](#en-cas-de-doute)
|
||||||
|
|
||||||
|
## Quand utiliser
|
||||||
|
|
||||||
|
- Ajout de composants UI
|
||||||
|
- Modification d'interfaces
|
||||||
|
- Avant chaque release majeure
|
||||||
|
- Audit d'accessibilité complet
|
||||||
|
|
||||||
|
## Standards WCAG 2.1 AA
|
||||||
|
|
||||||
|
**Quatre principes POUR :**
|
||||||
|
|
||||||
|
1. **Perceptible** - Information présentable
|
||||||
|
2. **Opérable** - Composants opérables
|
||||||
|
3. **Compréhensible** - Info et UI compréhensibles
|
||||||
|
4. **Robuste** - Contenu robuste
|
||||||
|
|
||||||
|
## Scripts npm disponibles
|
||||||
|
|
||||||
|
Trouve et utilise :
|
||||||
|
|
||||||
|
- Audit accessibilité complet
|
||||||
|
- Audit mobile responsive
|
||||||
|
- Vérification contraste
|
||||||
|
- Tests automatisés
|
||||||
|
|
||||||
|
## Checklist essentielle
|
||||||
|
|
||||||
|
### 1. Structure sémantique HTML
|
||||||
|
|
||||||
|
- Balises appropriées (`<header>`, `<nav>`, `<main>`, `<footer>`)
|
||||||
|
- Hiérarchie titres logique (h1 → h2 → h3)
|
||||||
|
- `<button>` pour actions, `<a>` pour navigation
|
||||||
|
|
||||||
|
### 2. Navigation clavier
|
||||||
|
|
||||||
|
- Éléments interactifs focusables
|
||||||
|
- Ordre tabulation logique
|
||||||
|
- Focus visible (outline ou custom)
|
||||||
|
- Raccourcis clavier sans conflit
|
||||||
|
|
||||||
|
### 3. ARIA (Accessible Rich Internet Applications)
|
||||||
|
|
||||||
|
**Utiliser quand sémantique HTML insuffisante**
|
||||||
|
|
||||||
|
Règles :
|
||||||
|
|
||||||
|
- Pas d'ARIA mieux que mauvais ARIA
|
||||||
|
- Vérifier support lecteurs d'écran
|
||||||
|
- Tester avec vraies technologies assistives
|
||||||
|
|
||||||
|
Attributs courants :
|
||||||
|
|
||||||
|
- `aria-label`, `aria-labelledby`
|
||||||
|
- `aria-describedby`
|
||||||
|
- `aria-hidden`
|
||||||
|
- `role` (button, dialog, alert, etc.)
|
||||||
|
|
||||||
|
### 4. Contraste couleurs
|
||||||
|
|
||||||
|
**WCAG 2.1 AA minimum :**
|
||||||
|
|
||||||
|
- Texte normal : 4.5:1
|
||||||
|
- Texte large (≥18pt ou ≥14pt gras) : 3:1
|
||||||
|
- Composants UI : 3:1
|
||||||
|
|
||||||
|
Outils : navigateur DevTools, Contrast Checker
|
||||||
|
|
||||||
|
### 5. Alternatives textuelles
|
||||||
|
|
||||||
|
- Toutes images avec `alt`
|
||||||
|
- Images décoratives : `alt=""`
|
||||||
|
- Images complexes : description détaillée
|
||||||
|
- Vidéos : sous-titres/transcription
|
||||||
|
|
||||||
|
### 6. Formulaires
|
||||||
|
|
||||||
|
- Labels explicites associés
|
||||||
|
- Messages d'erreur clairs
|
||||||
|
- Instructions visibles
|
||||||
|
- Validation côté client + serveur
|
||||||
|
|
||||||
|
### 7. Responsive et zoom
|
||||||
|
|
||||||
|
- Support zoom 200% sans perte fonctionnalité
|
||||||
|
- Contenu responsive (mobile, tablette, desktop)
|
||||||
|
- Touch targets ≥ 44×44 px mobile
|
||||||
|
|
||||||
|
## Workflow d'audit
|
||||||
|
|
||||||
|
### 1. Tests automatisés
|
||||||
|
|
||||||
|
Utilise scripts npm disponibles ou Lighthouse (Chrome DevTools).
|
||||||
|
|
||||||
|
### 2. Tests manuels
|
||||||
|
|
||||||
|
**Navigation clavier :**
|
||||||
|
|
||||||
|
- Tab à travers tous éléments interactifs
|
||||||
|
- Enter/Space pour activer
|
||||||
|
- Échap pour fermer modales/menus
|
||||||
|
|
||||||
|
**Lecteur d'écran :**
|
||||||
|
|
||||||
|
- VoiceOver (macOS/iOS)
|
||||||
|
- NVDA (Windows)
|
||||||
|
- JAWS (Windows)
|
||||||
|
|
||||||
|
**Contraste :**
|
||||||
|
|
||||||
|
- Vérifie tous textes et icônes
|
||||||
|
- Teste modes sombre/clair
|
||||||
|
|
||||||
|
### 3. Tests utilisateurs réels
|
||||||
|
|
||||||
|
- Personnes avec handicaps
|
||||||
|
- Différentes technologies assistives
|
||||||
|
- Feedback sur expérience réelle
|
||||||
|
|
||||||
|
## Checklist avant release
|
||||||
|
|
||||||
|
- [ ] Hiérarchie titres correcte
|
||||||
|
- [ ] Navigation clavier complète
|
||||||
|
- [ ] Contraste WCAG AA respecté
|
||||||
|
- [ ] Alt text sur toutes images
|
||||||
|
- [ ] Labels formulaires associés
|
||||||
|
- [ ] Focus visible partout
|
||||||
|
- [ ] Tests lecteur d'écran passés
|
||||||
|
- [ ] Zoom 200% fonctionnel
|
||||||
|
- [ ] Touch targets ≥ 44px mobile
|
||||||
|
|
||||||
|
## En cas de doute
|
||||||
|
|
||||||
|
**Source :** Standards WCAG 2.1 AA officiels
|
||||||
|
|
||||||
|
**Règles absolues :**
|
||||||
|
|
||||||
|
1. Toujours tester clavier uniquement
|
||||||
|
2. Toujours vérifier contraste
|
||||||
|
3. Toujours tester lecteur d'écran
|
||||||
|
4. Jamais cacher contenu sans `aria-hidden`
|
||||||
|
5. Jamais empêcher zoom mobile
|
||||||
|
|
||||||
|
**Workflow minimal :**
|
||||||
|
|
||||||
|
- Lighthouse audit
|
||||||
|
- Navigation clavier complète
|
||||||
|
- Test 1 lecteur d'écran minimum
|
||||||
Reference in New Issue
Block a user