Vérificateur d'Accessibilité
Analysez des extraits HTML à la recherche de problèmes courants d'accessibilité WCAG avec des suggestions concrètes de correction
Saisie HTML
Ce Que Nous Vérifions
Texte Alternatif des Images
Vérifie que tous les éléments <img> possèdent des attributs alt afin que les lecteurs d'écran puissent décrire les images aux utilisateurs.
Étiquettes de Formulaire
Vérifie que tous les champs de formulaire ont des étiquettes associées via <label for>, aria-label ou aria-labelledby.
Hiérarchie des Titres
S'assure que les titres suivent un ordre logique (h1, h2, h3...) sans sauter de niveaux.
Texte des Liens
Détecte les liens vides et les textes de lien génériques comme 'cliquez ici' qui ne sont pas significatifs pour les utilisateurs de lecteurs d'écran.
Attribut de Langue
Vérifie la présence d'un attribut lang sur l'élément <html>, ce qui aide les lecteurs d'écran à utiliser la prononciation correcte.
ARIA et Éléments Interactifs
Vérifie que les éléments interactifs possèdent des rôles appropriés et des étiquettes ARIA pour la prise en charge des technologies d'assistance.
Vérificateur d'Accessibilité
Analysez des extraits HTML à la recherche de problèmes courants d'accessibilité WCAG avec des suggestions concrètes de correction
Fonctionnalités
- Parse pasted HTML locally with DOMParser and check for common WCAG issues
- 12+ rule categories: alt text, form labels, heading hierarchy, empty links, ARIA usage, tabindex misuse, autoplay
- No network calls — paste HTML, get instant feedback
- NOT a full WCAG audit — for that use axe-core, Lighthouse, or a dedicated tool
- Useful for quick sanity-checks during development
Mode d'emploi
- Collez votre code HTML dans la zone de saisie ou chargez l'un des extraits d'exemple pour voir l'outil en action.
- Cliquez sur 'Vérifier l'Accessibilité' pour analyser votre HTML à la recherche de problèmes WCAG courants selon plus de 12 règles d'accessibilité.
- Examinez les résultats regroupés par gravité, lisez les suggestions de correction et mettez à jour votre HTML pour résoudre les problèmes détectés.
Conseils et bonnes pratiques
- Paste the HTML source (View Source / Inspect → Outer HTML) — the checker doesn't fetch URLs (CORS would block that anyway).
- For a complete audit, use axe-core in your test suite or Lighthouse in DevTools — those check ~30 more rules including dynamic ones.
- Heading hierarchy: each level should follow the previous (h1 → h2 → h3); skipping levels is flagged.
- Alt text rule allows `alt=""` for purely decorative images — only missing/duplicate alt is flagged.
- Form labels: every input should have an associated label (via `for` attribute) or `aria-label`. Placeholder-only is flagged.
FAQ
Quels problèmes d'accessibilité cet outil vérifie-t-il ?
Cet outil vérifie plus de 12 problèmes courants d'accessibilité WCAG, notamment : attributs alt manquants sur les images, champs de formulaire sans étiquette associée, violations de la hiérarchie des titres (niveaux sautés), liens vides et textes de lien génériques, attribut lang manquant sur l'élément HTML, éléments interactifs sans rôles ou étiquettes ARIA, boutons vides, éléments HTML obsolètes, valeurs positives de tabindex qui perturbent l'ordre de tabulation, éléments multimédias en autoplay et titres de document manquants. Chaque problème est associé à des critères de succès WCAG spécifiques.
Cela remplace-t-il un audit WCAG complet ?
Non, cet outil vérifie les problèmes courants au niveau HTML qui peuvent être détectés en analysant le balisage. Un audit WCAG 2.1 ou 2.2 complet nécessite des tests avec de vraies technologies d'assistance comme les lecteurs d'écran, la vérification des ratios de contraste de couleur, le test de la navigation au clavier, le test des mises à jour de contenu dynamique et l'évaluation de l'accessibilité cognitive. Cet outil est une excellente première étape pour détecter les problèmes les plus courants avant d'effectuer un audit manuel complet.
Quelle est la différence entre erreurs et avertissements ?
Les erreurs indiquent des violations d'accessibilité avérées qui auront un impact sur les utilisateurs de technologies d'assistance. Par exemple, un attribut alt manquant sur une image est une erreur car les lecteurs d'écran ne peuvent pas décrire l'image. Les avertissements signalent des problèmes potentiels qui peuvent être ou non des problèmes selon le contexte. Par exemple, un attribut alt vide est un avertissement car il est correct pour les images décoratives mais incorrect pour les images informatives. Les réussites confirment qu'une vérification spécifique a été satisfaite.
Puis-je vérifier l'URL d'un site web en direct au lieu de coller du HTML ?
Cet outil est conçu pour vérifier les extraits HTML que vous collez directement. Pour tester des sites web en direct, vous devriez afficher le code source de la page ou utiliser les outils de développement du navigateur pour copier le HTML, puis le coller ici. Pour les tests sur des sites en direct, envisagez des extensions de navigateur comme axe DevTools ou Lighthouse, qui peuvent inspecter le DOM rendu, y compris le contenu généré dynamiquement.
Pourquoi l'attribut lang sur l'élément HTML est-il si important ?
L'attribut lang indique aux lecteurs d'écran et autres technologies d'assistance la langue dans laquelle le contenu est écrit. Sans lui, un lecteur d'écran pourrait essayer de lire un texte anglais avec les règles de prononciation française, rendant le contenu incompréhensible. Il affecte également la façon dont les navigateurs gèrent la césure, la correction orthographique et d'autres fonctionnalités dépendant de la langue. Définir lang est l'une des améliorations d'accessibilité les plus simples mais les plus impactantes que vous puissiez faire.
Mon code HTML est-il envoyé à un serveur pour analyse ?
Non, toute l'analyse se déroule entièrement dans votre navigateur via JavaScript. Votre code HTML ne quitte jamais votre appareil. L'outil analyse le HTML à l'aide de l'API DOMParser intégrée au navigateur et exécute toutes les vérifications d'accessibilité localement. Il est donc sûr à utiliser avec du code propriétaire, des projets internes ou tout HTML contenant du contenu sensible.