Screen-Reader-Simulation-Tester

Simuliert die Vorlesereihenfolge und gesprochene Semantik eines Screenreaders aus URL oder HTML

Sie koennen HTML direkt einfuegen oder eine URL angeben. Das Tool schaetzt eine Screenreader-nahe Lesereihenfolge und zeigt, was blinde Nutzer wahrscheinlich zuerst hoeren: Seitentitel, Landmarks, Ueberschriften, Links, Buttons, Formularlabels, Bilder und Listeneintraege.

So wird es genutzt:

  • HTML-Eingabe: fuer stabile Offline-Analysen
  • Seiten-URL: zum Abruf und zur Analyse einer Live-Seite
  • Screenreader-Preset: veraendert nur die Formulierung des Berichts
  • Landmark-Zusammenfassung: zeigt header, nav, main und footer
  • Korrekturhinweise anzeigen: blendet konkrete Reparaturvorschlaege ein

Der Bericht hebt hervor:

  • wahrscheinliche Vorlesereihenfolge
  • Spruenge in der Ueberschriftenhierarchie
  • fehlende aria-labels oder Formularbeschriftungen
  • fehlende oder leere Bild-alts
  • Links und Buttons ohne zugaenglichen Namen

Beispielergebnisse

1 Beispiele

Vorschau, wie ein Screenreader eine Landingpage vorliest

Zeigt Vorlesereihenfolge, unbeschriftete Elemente und Fehler in der Ueberschriftenhierarchie.

What a screen reader may announce
Eingabeparameter anzeigen
{ "htmlInput": "<html><head><title>Launch Promo</title></head><body><header><a href=\"/\"><img src=\"/logo.png\"></a></header><main><h1>Launch Promo</h1><h3>Early access</h3><form><input id=\"email\" type=\"email\" /><button></button></form></main></body></html>", "pageUrl": "", "preset": "VoiceOver", "includeLandmarkSummary": true, "showFixSuggestions": true }

Wichtige Fakten

Kategorie
Sicherheit & Validierung
Eingabetypen
textarea, text, select, checkbox
Ausgabetyp
html
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Der Screen-Reader-Simulation-Tester analysiert HTML-Code oder Live-URLs, um die wahrscheinliche Vorlesereihenfolge und gesprochene Semantik eines Screenreaders zu simulieren. Das Tool deckt Barrierefreiheitslücken wie fehlende ARIA-Labels, fehlerhafte Überschriftenhierarchien oder unbeschriftete Buttons auf und zeigt Entwicklern, was blinde Nutzer beim Navigieren der Seite tatsächlich hören.

Wann verwenden

  • •Wenn Sie die Barrierefreiheit einer neuen Landingpage vor dem Live-Gang überprüfen möchten.
  • •Um fehlende Alt-Texte, ARIA-Labels oder fehlerhafte Überschriftenstrukturen in bestehendem HTML-Code zu identifizieren.
  • •Wenn Sie nachvollziehen müssen, in welcher Reihenfolge Screenreader-Nutzer durch die Inhalte und Formulare Ihrer Website navigieren.

So funktioniert es

  • •Fügen Sie Ihren HTML-Code in das Textfeld ein oder geben Sie eine Live-URL ein, die analysiert werden soll.
  • •Wählen Sie ein Screenreader-Preset (NVDA, JAWS oder VoiceOver) und aktivieren Sie bei Bedarf die Landmark-Zusammenfassung sowie Korrekturhinweise.
  • •Starten Sie die Simulation, um einen detaillierten Bericht über die Vorlesereihenfolge und semantische Struktur zu erhalten.
  • •Nutzen Sie die angezeigten Korrekturvorschläge, um identifizierte Barrierefreiheitsfehler gezielt zu beheben.

Anwendungsfälle

Audit von Web-Formularen auf korrekte Verknüpfung von Labels und Eingabefeldern.
Überprüfung der semantischen Struktur (Landmarks wie Header, Main, Footer) von Web-Templates.
Schnelle Identifikation von unbeschrifteten Links und Buttons in Navigationsmenüs.

Beispiele

1. Barrierefreiheits-Check einer Landingpage

Frontend-Entwickler
Hintergrund
Ein Entwickler hat eine neue Promo-Seite erstellt und möchte sicherstellen, dass sie für Screenreader-Nutzer zugänglich ist.
Problem
Es ist unklar, ob alle Bilder Alt-Texte haben und die Überschriftenstruktur logisch aufgebaut ist.
Verwendung
Fügen Sie den HTML-Code der Promo-Seite in das Feld 'HTML-Eingabe' ein, wählen Sie das Preset 'VoiceOver' und aktivieren Sie 'Korrekturhinweise anzeigen'.
Beispielkonfiguration
Preset: VoiceOver, Landmark-Zusammenfassung: aktiviert, Korrekturhinweise: aktiviert
Ergebnis
Der Bericht zeigt die Vorlesereihenfolge an und warnt vor einem fehlenden Label beim E-Mail-Eingabefeld sowie einem leeren Button.

2. Analyse eines Live-Shops

QA-Tester
Hintergrund
Ein QA-Tester prüft einen bestehenden Online-Shop auf grundlegende Barrierefreiheitsstandards.
Problem
Der Tester muss schnell herausfinden, ob die Hauptnavigation und der Footer korrekt als Landmarks ausgezeichnet sind.
Verwendung
Geben Sie die Shop-URL in das Feld 'Seiten-URL' ein und aktivieren Sie die Option 'Landmark-Zusammenfassung'.
Beispielkonfiguration
URL: https://example-shop.com, Preset: NVDA, Landmark-Zusammenfassung: aktiviert
Ergebnis
Das Tool extrahiert die Landmarks und zeigt, dass der <main>-Bereich fehlt, was sofort als Korrekturhinweis ausgegeben wird.

Mit Samples testen

html
WebRTC Echtzeitkommunikation Beispiele
Umfassende WebRTC-Beispiele für P2P Audio/Video-Kommunikation, Datenkanäle, Bildschirmfreigabe und Signalisierungsserver
keywords screen
sample
Postman Collections - API Tests
Umfassende Postman Collection Beispiele inklusive API Tests, Automatisierungsskripte, Umgebungsvariablen, Mock Server und fortgeschrittene Testmuster für REST APIs
keywords aria
sample
HTML mit Bildern Proben
HTML-Quellcodeproben mit Bildern zum Testen der Extraktion
task extract
sample
Apache Pulsar Beispiele
Apache Pulsar Beispiele einschließlich Pub/Sub, Reader, Consumer mit verschiedenen Subscription-Typen, Schema-Management und Tiered Storage für Enterprise Messaging
keywords reader
sample

Verwandte Hubs

Html-Convert-Tools
Entdecken Sie 13 html-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Json-Convert-Tools
Entdecken Sie 100 json-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Image-Convert-Tools
Entdecken Sie 100 image-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Audio-Convert-Tools
Entdecken Sie 100 audio-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.

FAQ

Ersetzt dieses Tool echte Screenreader-Tests?

Nein, es handelt sich um eine semantische Simulation. Für eine vollständige Barrierefreiheitsprüfung sollten Sie Ihre Seite zusätzlich mit echten Screenreadern wie NVDA oder VoiceOver testen.

Kann ich passwortgeschützte Seiten analysieren?

Für passwortgeschützte oder lokale Seiten kopieren Sie am besten den gerenderten HTML-Code direkt in das Eingabefeld, anstatt die URL-Funktion zu nutzen.

Was bedeutet 'Sprünge in der Überschriftenhierarchie'?

Dies bedeutet, dass Überschriftenebenen übersprungen wurden (z. B. von H1 direkt zu H3). Dies erschwert Screenreader-Nutzern die Orientierung und Navigation.

Werden dynamische JavaScript-Inhalte erkannt?

Wenn Sie eine URL angeben, wird der initiale Quelltext analysiert. Für dynamische Inhalte, die erst nach Nutzerinteraktion erscheinen, fügen Sie den generierten HTML-Code manuell ein.

Was bewirkt die Auswahl des Screenreader-Presets?

Das Preset ändert lediglich die Formulierung und den Stil des generierten Berichts, um der typischen Ausgabe von NVDA, JAWS oder VoiceOver näher zu kommen. Die semantische Analyse bleibt gleich.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/screen-reader-simulation-tester

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
htmlInput textarea Nein -
pageUrl text Nein -
preset select Nein -
includeLandmarkSummary checkbox Nein -
showFixSuggestions checkbox Nein -

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-screen-reader-simulation-tester": {
      "name": "screen-reader-simulation-tester",
      "description": "Simuliert die Vorlesereihenfolge und gesprochene Semantik eines Screenreaders aus URL oder HTML",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=screen-reader-simulation-tester",
      "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.

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