Die Barrierefreiheit einer Oberfläche prüfen

Prüfen Sie einen Bildschirm oder HTML-Ausschnitt gegen WCAG 2.2 und erhalten Sie eine priorisierte Liste von Problemen samt Lösungen. Entwickelt für ChatGPT, Claude und Gemini. Er enthält 2 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Fortgeschritten · Text · Redaktionelle Prüfung ausstehend

Prompt

Handle als zertifizierter Auditor für Web-Barrierefreiheit (WCAG 2.2 Stufe AA). Analysiere diese Oberfläche: {{interface}} Nutzungskontext: {{context}} Gib für jedes gefundene Problem an: - Betroffenes WCAG-Kriterium (Nummer und Name). - Schweregrad: kritisch, hoch, mittel oder niedrig. - Wen es betrifft (Screenreader, Tastatur, Sehbehinderung, Farbfehlsichtigkeit, kognitive Einschränkungen …). - Eine konkrete Lösung, wo sinnvoll mit korrigiertem Code. Schließe ab mit: 1. Den 3 Korrekturen mit der größten Wirkung, mit denen ich beginnen sollte. 2. Einer Liste manueller Tests, die ich durchführen sollte (Tastatur, 200 % Zoom, Screenreader). Wenn sich etwas anhand der gegebenen Informationen nicht beurteilen lässt, sage das, statt Annahmen zu treffen.

Beispielergebnis

Der erhaltene Ausschnitt enthält nur <form>…</form>, daher kann ich den tatsächlichen Code nicht prüfen. Für ein typisches mobiles Bestellformular sollten Sie zuerst diese Punkte kontrollieren:

Befunde

1. Felder ohne zugeordnetes Label

Kriterium: 1.3.1 Info und Beziehungen · 4.1.2 Name, Rolle, Wert
Schweregrad: kritisch · Betrifft: Screenreader, kognitive Einschränkungen
Korrektur:

<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" autocomplete="email" required>

2. Fehler nur durch roten Rahmen erkennbar

Kriterium: 1.4.1 Benutzung von Farbe · 3.3.1 Fehlererkennung
Schweregrad: hoch · Betrifft: Farbenblindheit, Screenreader
Korrektur: Fehlertext per aria-describedby verknüpfen, dazu aria-invalid="true".

3. „Bezahlen"-Button auf dem Handy zu klein

Kriterium: 2.5.8 Zielgröße (Minimum)
Schweregrad: mittel · Betrifft: eingeschränkte Motorik
Korrektur: mindestens 24 × 24 px; empfohlen sind 44 px Höhe.

Manuelle Tests

Kauf nur mit der Tastatur abschließen (Tab, Umschalt+Tab, Enter).
Zoom auf 200 % ohne Inhaltsverlust.
Fehlermeldungen mit VoiceOver oder TalkBack prüfen …

Häufig gestellte Fragen

Was soll ich als Oberfläche einfügen?

Das HTML der Seite, den Code einer Komponente oder eine ausführliche Beschreibung des Bildschirms. Je mehr echten Code Sie liefern, desto genauer die Befunde.

Ersetzt das ein professionelles Audit?

Nein. Es findet schnell viele typische Probleme, aber ein formales Konformitätsaudit erfordert manuelle Tests mit assistiven Technologien und idealerweise mit Menschen mit Behinderungen.

Wofür ist dieser Prompt gedacht?

Prüfen Sie einen Bildschirm oder HTML-Ausschnitt gegen WCAG 2.2 und erhalten Sie eine priorisierte Liste von Problemen samt Lösungen.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude und Gemini entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (HTML oder Beschreibung und Nutzungskontext). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Fortgeschrittene: Es hilft, das Thema zu kennen, um guten Kontext zu liefern und das Ergebnis kritisch zu prüfen.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts

UI/UX-Design

Barrierefreie Dark-Mode-Farbpalette mit WCAG-Kontrastprüfung

Entwickle aus deinen Markenfarben eine Dark-Mode-Palette mit semantischen Tokens, einer WCAG-Kontrasttabelle für jedes Farbpaar, Korrekturen für Fehler und fertigem CSS.