validating-accessibility
Validates web accessibility according to WCAG 2.1 AA standards for users with disabilities. Use when modifying UI, adding components, or performing accessibility audits
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- GitHub stars: 1
- Updated: 2025-11-21
Download the latest version (v1.0.0) from this page.
SKILL.md
--- 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