Kategorien

← View All Tools

Barrierefreiheitspruefer

Erkennt haeufige WCAG-2.1-Probleme in HTML, Seiten oder Designbildern und liefert direkt umsetzbare Hinweise

Beispielergebnisse

2 Beispiele

Landingpage-Snippet auf fehlende Labels pruefen

Prueft einen HTML-Block auf leere Buttons, fehlende Alt-Texte und unlabeled Formularfelder

Accessibility report with critical issues for images, links, buttons, and forms.
Eingabeparameter anzeigen
{ "htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />", "wcagLevel": "AA" }

Mockup auf Kontrastrisiken untersuchen

Fuehrt eine palettenbasierte Kontrastheuristik auf einem Designbild aus

Accessibility report with palette-based contrast warnings from a design image.
Eingabeparameter anzeigen
{ "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

Wichtige Fakten

Kategorie
Validation
Eingabetypen
textarea, text, file, select
Ausgabetyp
html
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Der Barrierefreiheitsprüfer analysiert HTML-Code, Webseiten-URLs oder Designbilder auf häufige WCAG-2.1-Probleme. Er identifiziert fehlende Alt-Texte, unzureichende Kontraste sowie fehlende Formular-Labels und liefert direkt umsetzbare Hinweise zur Behebung, um die digitale Zugänglichkeit für alle Nutzer zu verbessern.

Wann verwenden

  • •Vor dem Deployment von neuen Webseiten, um HTML-Snippets auf fehlende ARIA-Attribute oder Labels zu prüfen.
  • •Während der Designphase, um Mockups und UI-Entwürfe auf ausreichende Farbkontraste zu testen.
  • •Bei Audits bestehender Landingpages, um schnell einen Überblick über kritische Barrierefreiheitsprobleme zu erhalten.

So funktioniert es

  • •Fügen Sie Ihren HTML-Code ein, geben Sie eine Seiten-URL an oder laden Sie ein Designbild (PNG, JPEG, WEBP, SVG) hoch.
  • •Wählen Sie die gewünschte WCAG-Stufe (AA oder AAA) für die Prüfung aus.
  • •Das Tool analysiert die Eingabe auf Kontrastrisiken, fehlende Alt-Texte und Tastaturzugänglichkeit.
  • •Sie erhalten einen detaillierten HTML-Bericht mit konkreten Warnungen und Lösungsvorschlägen.

Anwendungsfälle

Frontend-Entwickler prüfen HTML-Komponenten wie Buttons und Formulare auf korrekte Semantik und Zugänglichkeit.
UI/UX-Designer testen Farbpaletten in Mockups auf ausreichenden Kontrast gemäß WCAG-Richtlinien.
QA-Tester validieren bestehende Webseiten über die URL-Eingabe auf Einhaltung der Barrierefreiheitsstandards.

Beispiele

1. HTML-Snippet auf fehlende Labels prüfen

Frontend-Entwickler
Hintergrund
Ein Entwickler hat eine neue Navigationsleiste mit Icon-Buttons und einem Suchfeld erstellt.
Problem
Sicherstellen, dass Screenreader die Buttons und das Eingabefeld korrekt vorlesen können.
Verwendung
Fügen Sie den HTML-Code `<img src="/hero.png"><a href="/pricing"><svg></svg></a><button><svg></svg></button><input type="email" />` in das Feld "HTML-Eingabe" ein und wählen Sie "WCAG AA".
Beispielkonfiguration
WCAG-Stufe: AA
Ergebnis
Ein Bericht zeigt kritische Probleme wie leere Buttons, fehlende Alt-Texte bei Bildern und unbeschriftete Formularfelder auf.

2. Mockup auf Kontrastrisiken untersuchen

UI-Designer
Hintergrund
Ein neues Logo und Farbschema für eine Landingpage wurden entworfen.
Problem
Vor der Umsetzung muss geprüft werden, ob die gewählten Farben den strengen AAA-Kontrastanforderungen genügen.
Verwendung
Laden Sie die Datei `logo.png` im Feld "Designbild" hoch und setzen Sie die WCAG-Stufe auf "AAA".
Beispielkonfiguration
WCAG-Stufe: AAA
Ergebnis
Das Tool liefert einen Bericht mit palettenbasierten Kontrastwarnungen, falls die Farben nicht ausreichend unterscheidbar sind.

Mit Samples testen

xml, html, image
XML-Beispiele
XML (eXtensible Markup Language)-Formatbeispiele von einfachen bis komplexen Strukturen
preferred input family image
image
Windows C++ Bildverarbeitung Beispiele
Windows C++ Bildverarbeitungsbeispiele einschließlich Bild-Laden/Speichern, Größenänderung und Formatkonvertierung mit Windows Imaging Component
preferred input family image
image
SVG Beispiele
Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren
preferred input family image
image
Web Rust Bildverarbeitungsbeispiele
Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung
preferred input family image
image

Verwandte Hubs

Image-Convert-Tools
Entdecken Sie 100 image-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Text-Convert-Tools
Entdecken Sie 80 text-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Image-Tools
Entdecken Sie 40 image-Tools für utility-Workflows und vergleichen Sie ähnliche Utilities schnell.
Xml-Convert-Tools
Entdecken Sie 33 xml-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.

FAQ

Welche WCAG-Stufen werden unterstützt?

Sie können zwischen den Konformitätsstufen WCAG AA und WCAG AAA wählen.

Kann ich Bilder auf Kontrastprobleme prüfen?

Ja, laden Sie einfach ein Designbild hoch. Das Tool führt eine palettenbasierte Kontrastheuristik durch, um Risiken zu erkennen.

Welche Dateiformate werden für Designbilder akzeptiert?

Das Tool unterstützt PNG, JPEG, WEBP und SVG-Dateien bis zu einer Größe von 20 MB.

Werden auch fehlende Formular-Labels erkannt?

Ja, die HTML- und URL-Prüfung identifiziert Eingabefelder ohne zugehörige Labels oder ARIA-Attribute.

Wie sieht das Ergebnis der Prüfung aus?

Sie erhalten einen übersichtlichen HTML-Bericht, der alle gefundenen Probleme auflistet und Hinweise zur Behebung gibt.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/accessibility-checker

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
htmlInput textarea Nein -
pageUrl text Nein -
designImage file (Upload erforderlich) Nein -
wcagLevel select Nein -

Dateitypparameter müssen erst über POST /upload/accessibility-checker hochgeladen werden, um filePath zu erhalten, dann filePath an das entsprechende Dateifeld übergeben.

Antwortformat

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

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-accessibility-checker": {
      "name": "accessibility-checker",
      "description": "Erkennt haeufige WCAG-2.1-Probleme in HTML, Seiten oder Designbildern und liefert direkt umsetzbare Hinweise",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Unterstützt URL-Dateilinks oder Base64-Codierung für Dateiparameter.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]