Catégories

← View All Tools

Verificateur d accessibilite

Detecte les problemes WCAG 2.1 courants dans du HTML, des pages ou des maquettes et fournit des corrections concretes

Exemples de résultats

2 Exemples

Verifier un extrait de landing pour les etiquettes manquantes

Analyse un bloc HTML et detecte les boutons vides, alt manquants et champs sans label

Accessibility report with critical issues for images, links, buttons, and forms.
Voir paramètres d'entrée
{ "htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />", "wcagLevel": "AA" }

Inspecter une maquette pour le risque de contraste

Analyse une image de maquette avec des heuristiques de contraste basees sur la palette

Accessibility report with palette-based contrast warnings from a design image.
Voir paramètres d'entrée
{ "designImage": "/public/samples/images/logo.png", "wcagLevel": "AAA" }

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/png, image/jpeg, image/webp, image/svg+xml

Points clés

Catégorie
Validation
Types d’entrée
textarea, text, file, select
Type de sortie
html
Couverture des échantillons
4
API disponible
Yes

Vue d’ensemble

Le Vérificateur d'accessibilité est un outil d'analyse conçu pour identifier les problèmes de conformité WCAG 2.1 dans vos extraits HTML, pages web ou maquettes graphiques. En évaluant les contrastes, les balises alternatives manquantes et la navigation au clavier, il génère un rapport détaillé avec des recommandations concrètes pour rendre vos interfaces accessibles à tous les utilisateurs.

Quand l’utiliser

  • •Lors de l'intégration de nouveaux composants HTML pour s'assurer qu'ils respectent les normes d'accessibilité avant la mise en production.
  • •Pendant la phase de design pour vérifier que les couleurs d'une maquette offrent un contraste suffisant (niveaux AA ou AAA).
  • •Lors de l'audit d'une page web existante pour repérer rapidement les éléments non conformes comme les boutons sans label ou les images sans texte alternatif.

Comment ça marche

  • •Saisissez un extrait HTML, l'URL d'une page web ou téléchargez l'image de votre maquette (PNG, JPEG, WEBP, SVG).
  • •Sélectionnez le niveau d'exigence WCAG souhaité (AA ou AAA).
  • •L'outil analyse le code ou l'image pour détecter les erreurs courantes (contraste, attributs alt, labels de formulaires).
  • •Consultez le rapport HTML généré contenant les avertissements critiques et les suggestions de correction directes.

Cas d’usage

Validation de l'accessibilité des composants d'interface utilisateur (UI) par les développeurs front-end.
Vérification préventive des contrastes de couleurs par les designers UI/UX directement sur leurs maquettes.
Audit de conformité rapide des pages d'atterrissage (landing pages) par les équipes d'assurance qualité (QA).

Exemples

1. Vérification d'un extrait de landing page

Développeur Front-end
Contexte
Un développeur intègre une nouvelle section d'en-tête avec des icônes SVG et des champs de formulaire.
Problème
S'assurer qu'aucun bouton n'est vide et que tous les champs ont des labels accessibles pour les lecteurs d'écran.
Comment l’utiliser
Collez le code HTML dans le champ Entrée HTML et sélectionnez le niveau WCAG AA.
Configuration d’exemple
{
  "htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />",
  "wcagLevel": "AA"
}
Résultat
Un rapport HTML met en évidence les images sans attribut alt, les boutons SVG sans texte caché et les inputs sans label.

2. Inspection des contrastes d'une maquette

Designer UI
Contexte
Une designer a créé une nouvelle palette de couleurs pour le logo et les boutons d'une application.
Problème
Vérifier si les couleurs choisies respectent les normes strictes de contraste pour les malvoyants.
Comment l’utiliser
Téléchargez l'image de la maquette dans Image de maquette et choisissez le niveau WCAG AAA.
Configuration d’exemple
{
  "designImage": "/public/samples/images/logo.png",
  "wcagLevel": "AAA"
}
Résultat
L'outil génère un rapport signalant les zones de l'image où le ratio de contraste est insuffisant selon les critères AAA.

Tester avec des échantillons

xml, html, image
Exemples XML
Exemples de format XML (eXtensible Markup Language) de structures simples à complexes
preferred input family image
image
Exemples de Traitement d'Images Windows C++
Exemples de traitement d'images Windows C++ incluant lecture/sauvegarde d'images, redimensionnement et conversion de format utilisant Windows Imaging Component
preferred input family image
image
Exemples SVG
Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG
preferred input family image
image
Exemples de Traitement d'Images Web Rust
Exemples de traitement d'images Web Rust incluant lecture/écriture, redimensionnement et conversion de format
preferred input family image
image

Hubs associés

Outils Image pour Convert
Découvrez 100 outils image pour des workflows de convert et comparez rapidement des utilitaires proches.
Outils Text pour Convert
Découvrez 80 outils text pour des workflows de convert et comparez rapidement des utilitaires proches.
Outils Image
Découvrez 40 outils image pour des workflows de utility et comparez rapidement des utilitaires proches.
Outils Xml pour Convert
Découvrez 33 outils xml pour des workflows de convert et comparez rapidement des utilitaires proches.

FAQ

Quels types de fichiers sont acceptés pour l'analyse de maquettes ?

Vous pouvez télécharger des images au format PNG, JPEG, WEBP ou SVG (jusqu'à 20 Mo) pour vérifier les contrastes de votre design.

Quelle est la différence entre les niveaux WCAG AA et AAA ?

Le niveau AA est la norme standard requise par la plupart des législations, tandis que le niveau AAA est le niveau d'accessibilité le plus strict, exigeant notamment des ratios de contraste plus élevés.

L'outil peut-il analyser une page web complète ?

Oui, en fournissant simplement l'URL de la page, l'outil récupérera et analysera le contenu pour détecter les problèmes d'accessibilité.

Est-ce que cet outil corrige automatiquement mon code HTML ?

Non, l'outil génère un rapport d'audit avec des recommandations concrètes, mais c'est à vous d'appliquer les corrections dans votre code source.

Quels éléments HTML sont principalement vérifiés ?

L'outil se concentre sur les images (attributs alt), les liens et boutons (labels accessibles), les formulaires et les contrastes de couleurs.

Documentation de l'API

Point de terminaison de la requête

POST /fr/api/tools/accessibility-checker

Paramètres de la requête

Nom du paramètre Type Requis Description
htmlInput textarea Non -
pageUrl text Non -
designImage file (Téléchargement requis) Non -
wcagLevel select Non -

Les paramètres de type fichier doivent être téléchargés d'abord via POST /upload/accessibility-checker pour obtenir filePath, puis filePath doit être passé au champ de fichier correspondant.

Format de réponse

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentation de MCP

Ajoutez cet outil à votre configuration de serveur MCP: 

{
  "mcpServers": {
    "elysiatools-accessibility-checker": {
      "name": "accessibility-checker",
      "description": "Detecte les problemes WCAG 2.1 courants dans du HTML, des pages ou des maquettes et fournit des corrections concretes",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Vous pouvez chaîner plusieurs outils, par ex.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 outils.

Prend en charge les liens de fichiers URL ou la codification Base64 pour les paramètres de fichier.

Si vous rencontrez des problèmes, veuillez nous contacter à [email protected]