webflow/webflow-barrierefreiheit

Barrierefreiheits-Audit

Umfassendes WCAG 2.1 Barrierefreiheits-Audit für Webflow-Seiten mit detaillierter Erkennung von Problemen und umsetzbaren Korrekturen.

Wichtiger Hinweis

ALLE Operationen müssen mit den Webflow MCP-Tools durchgeführt werden:

• Verwenden Sie das Webflow MCP-Tool webflow_guide_tool, um vor Beginn Best Practices zu erhalten
• Verwenden Sie das Webflow MCP-Tool data_sites_tool mit der Aktion list_sites, um verfügbare Seiten zu identifizieren
• Verwenden Sie das Webflow MCP-Tool data_sites_tool mit der Aktion get_site, um Seitendetails abzurufen
• Verwenden Sie das Webflow MCP-Tool data_pages_tool mit der Aktion list_pages, um alle Seiten und deren Seiten-IDs zu erhalten
• Verwenden Sie das Webflow MCP-Tool data_element_tool mit der Aktion get_all_elements (unter direkter Angabe der Seiten-ID), um detaillierte Elementinformationen zu erhalten
• Verwenden Sie das Webflow MCP-Tool data_element_tool mit der Aktion set_attributes, um Barrierefreiheitsprobleme zu beheben
• Verwenden Sie das Webflow MCP-Tool element_snapshot_tool, um visuelle Vorschauen von Elementen zu erhalten – dies ist ein Designer-Tool und erfordert eine Designer-Verbindung, falls verwendet
• Verwenden Sie KEINE anderen Tools oder Methoden für Webflow-Operationen
• Alle Tool-Aufrufe müssen den erforderlichen context-Parameter enthalten (15-25 Wörter, dritte Person Perspektive)
• Für das Audit oder die Korrekturen ist keine Designer-Verbindung erforderlich. data_element_tool arbeitet headless mit jeder Seiten-ID von list_pages. Der Designer wird nur benötigt, wenn Sie sich für die Verwendung von element_snapshot_tool für optionale visuelle Vorschauen entscheiden.

Anweisungen

Phase 1: Seiten- & Bereichsauswahl

1. Seiteninformationen abrufen: Verwenden Sie das Webflow MCP-Tool data_sites_tool mit der Aktion list_sites, um die Zielseite zu identifizieren
2. Nach Seitenauswahl fragen:
   • Wenn der Benutzer eine Seiten-ID angibt, direkt verwenden
   • Andernfalls data_pages_tool mit der Aktion list_pages verwenden, um verfügbare Seiten anzuzeigen
   • Benutzer auswählen lassen, welche Seite(n) auditiert werden sollen
3. Audit-Umfang bestätigen: Benutzer fragen, was geprüft werden soll:
   • Vollständiges Audit (alle Barrierefreiheitsprüfungen)
   • Nur kritische Probleme (WCAG Level A)
   • Bestimmte Kategorien (Formulare, Buttons, Navigation, etc.)

Phase 2: Elementextraktion & -analyse

4. Alle Elemente extrahieren: data_element_tool mit der Aktion get_all_elements verwenden, die Zielseiten-ID aus Phase 1 übergeben, für detaillierte Analyse – keine Designer-Verbindung erforderlich
   • include_style_properties: true setzen, um Fokus-Stile zu überprüfen
   • include_all_breakpoint_styles: false setzen, um Daten zu minimieren
5. Elementdaten parsen: Interaktive und Inhaltselemente identifizieren:
   • Buttons (Button, LinkBlock mit Button-Rolle)
   • Links (TextLink, Link, LinkBlock)
   • Formulareingaben (Input, Select, Textarea)
   • Überschriften (Heading-Elemente mit Ebenen)
   • Interaktive Divs/Spans (auf onClick oder interaktive Rollen prüfen)
   • Bilder (Image-Elemente) – ÜBERSPRINGEN für dieses Audit
6. Attribute für jedes Element extrahieren:
   • ARIA-Attribute (aria-label, aria-describedby, role, tabIndex)
   • DOM-Attribute (id, domId, href, type, placeholder)
   • Textinhalt
   • Stil-Eigenschaften (outline, border für Fokus-Zustände)
   • Element-Metadaten (canHaveAttributes, Tag-Name)

Phase 3: Barrierefreiheitsprüfungen

Kritische Probleme (Müssen behoben werden – WCAG Level A)

7. Symbole-Buttons ohne Beschriftungen (WCAG 4.1.2)

   • Finden: Button-Elemente ohne Textinhalt
   • Prüfen: Fehlendes aria-label oder aria-labelledby
   • Auswirkung: Screenreader können den Button-Zweck nicht identifizieren
   • Behebung: aria-label-Attribut mit beschreibendem Text hinzufügen

8. Formulareingaben ohne Beschriftungen (WCAG 1.3.1)

   • Finden: Input-, Select-, Textarea-Elemente
   • Prüfen: Fehlende zugeordnete Beschriftung oder aria-label
   • Auswirkung: Benutzer wissen nicht, wofür die Eingabe ist
   • Behebung: aria-label hinzufügen oder mit <label> über id verknüpfen

9. Nicht-semantische Click-Handler (WCAG 2.1.1)

   • Finden: Div- oder Span-Elemente (identifiziert durch Elementtyp)
   • Prüfen: Interaktives Verhalten ohne ordnungsgemäße Rolle/Tastaturunterstützung
   • Auswirkung: Nicht per Tastatur zugänglich, Screenreader übersehen Interaktivität
   • Behebung: role="button", tabIndex="0" hinzufügen, Verwendung von echtem <button> vorschlagen

10. Links ohne Ziel (WCAG 2.1.1)

    • Finden: Link-Elemente ohne href-Attribut
    • Prüfen: Links, die nur onClick ohne href verwenden
    • Auswirkung: Nicht per Tastatur zugänglich, unterbricht Browser-Funktionen
    • Behebung: Ordnungsgemäßes href hinzufügen oder in Button umwandeln

Schwerwiegende Probleme (Sollten behoben werden – WCAG Level AA)

11. Fokus-Rahmen entfernt ohne Ersatz (WCAG 2.4.7)

    • Finden: Elemente mit outline: none-Stil
    • Prüfen: Kein sichtbarer alternativer Fokus-Indikator
    • Auswirkung: Tastaturbenutzer können den Fokus nicht sehen
    • Behebung: Sichtbaren Fokus-Stil hinzufügen (border, box-shadow, Hintergrundänderung)

12. Fehlende Tastatur-Handler (WCAG 2.1.1)

    • Finden: Elemente mit onClick-Handlern
    • Prüfen: Fehlender onKeyDown für Enter/Leertaste
    • Auswirkung: Nicht nur mit Tastatur nutzbar
    • Behebung: Tastatur-Ereignis-Handler hinzufügen

13. Touch-Ziel zu klein (WCAG 2.5.5)

    • Finden: Klickbare Elemente (Buttons, Links)
    • Prüfen: Breite oder Höhe < 44px
    • Auswirkung: Auf mobilen Geräten schwer zu tippen
    • Behebung: Padding oder min-width/min-height auf 44px erhöhen

Moderate Probleme (Behebung in Betracht ziehen)

14. Probleme mit der Überschriftenhierarchie (WCAG 1.3.1)

    • Finden: Überschriftenelemente (h1-h6)
    • Prüfen: Übersprungene Ebenen (h1 → h3, h2 übersprungen)
    • Auswirkung: Verwirrende Dokumentenstruktur
    • Behebung: Ordnungsgemäße sequentielle Überschriftenebenen verwenden

15. Positiver tabIndex (WCAG 2.4.3)

    • Finden: Elemente mit tabIndex > 0
    • Prüfen: Stört die natürliche Tab-Reihenfolge
    • Auswirkung: Verwirrende Tastaturnavigation
    • Behebung: Nur tabIndex="0" oder "-1" verwenden, natürliche DOM-Reihenfolge wirken lassen

16. Rolle ohne erforderliche Attribute (WCAG 4.1.2)

    • Finden: Elemente mit ARIA-Rollen
    • Prüfen: Fehlende erforderliche ARIA-Attribute (z. B. role="button" ohne tabIndex)
    • Auswirkung: Unvollständige Barrierefreiheitssemantik
    • Behebung: Erforderliche Attribute für die Rolle hinzufügen

Phase 4: Problemkategorisierung & Bewertung

17. Alle Ergebnisse kategorisieren:

    • Kritisch: Muss behoben werden (blockiert Zugang)
    • Schwerwiegend: Sollte behoben werden (beeinträchtigt Nutzbarkeit erheblich)
    • Moderat: Behebung in Betracht ziehen (verbessert Benutzererfahrung)

18. Barrierefreiheitsbewertung berechnen (0-100):

    • Start bei 100
    • Kritisches Problem: -10 Punkte pro Stück
    • Schwerwiegendes Problem: -5 Punkte pro Stück
    • Moderates Problem: -2 Punkte pro Stück
    • Mindestpunktzahl: 0

19. Schweregrad-Zusammenfassung erstellen:

    • Gesamtzahl der gefundenen Probleme
    • Aufschlüsselung nach Schweregrad
    • Häufigste Problemtypen
    • Am stärksten betroffene Seiten/Abschnitte

Phase 5: Berichtserstellung

20. Detaillierten Bericht mit spezifischem Format erstellen:

    ═══════════════════════════════════════════════════
    BARRIEREFREIHEITS-AUDIT: [Seitenname]
    ═══════════════════════════════════════════════════
    
    KRITISCH (X Probleme)
    ─────────────────────
    [A11Y] Element: Button "Senden"
      Problem: Button fehlt zugänglicher Name
      Ort: Formularbereich, Element-ID: {component: "abc", element: "xyz"}
      Aktuell: <button><CloseIcon /></button>
      Behebung: aria-label="Schließen" hinzufügen
      WCAG: 4.1.2 Name, Rolle, Wert
    
    [A11Y] Element: Eingabefeld
      Problem: Formulareingabe ohne Beschriftung
      Ort: Kontaktformular, Element-ID: {component: "def", element: "uvw"}
      Aktuell: <input type="email" />
      Behebung: aria-label="E-Mail-Adresse" hinzufügen oder mit <label> verknüpfen
      WCAG: 1.3.1 Informationen und Beziehungen
    
    SCHWERWIEGEND (X Probleme)
    ──────────────────────────
    [A11Y] Element: Link "Mehr erfahren"
      Problem: Fokus-Rahmen ohne sichtbare Alternative entfernt
      Ort: Blog-Bereich
      Aktuell: outline: none
      Behebung: Sichtbaren Fokus-Stil hinzufügen (z. B. border: 2px solid blue)
      WCAG: 2.4.7 Fokus sichtbar
    
    MODERAT (X Probleme)
    ────────────────────
    [A11Y] Element: Überschrift
      Problem: Überschriftenhierarchie übersprungen (h1 → h3)
      Ort: Artikelbereich
      Aktuell: <h3>Unterabschnitt</h3> nach <h1>Titel</h1>
      Behebung: In <h2> ändern oder ein Zwischen-h2 hinzufügen
      WCAG: 1.3.1 Informationen und Beziehungen
    
    ═══════════════════════════════════════════════════
    ZUSAMMENFASSUNG
    ───────────────────────────────────────────────────
    Gesamtprobleme: X
    - Kritisch: X Probleme
    - Schwerwiegend: X Probleme
    - Moderat: X Probleme
    
    Barrierefreiheitsbewertung: XX/100
    
    Häufigste Probleme:
    1. [Problemtyp] - X Vorkommen
    2. [Problemtyp] - X Vorkommen
    3. [Problemtyp] - X Vorkommen
    ═══════════════════════════════════════════════════
    

21. Umsetzbare Erkenntnisse bereitstellen:

    • Priorisierte Korrekturliste (zuerst kritische)
    • Schnelle Erfolge (einfache Korrekturen mit großer Wirkung)
    • Designmuster-Empfehlungen
    • Ressourcen zum Weiterlernen

Phase 6: Korrekturvorschläge & Freigabe (Optional)

22. Automatische Korrektur von Problemen anbieten: Korrekturen erfordern keinen Designer, daher direkte automatische Korrekturen anbieten

23. Vorschau der Korrekturen anzeigen:

    Welche Probleme möchten Sie beheben?
    
    [1] ✓ aria-label zu Senden-Button hinzufügen
        Element: Button im Kontaktformular
        Korrektur: aria-label="Kontaktformular senden" hinzufügen
        Sicher: Ja (nur Attribut hinzufügen)
    
    [2] ✓ aria-label zur E-Mail-Eingabe hinzufügen
        Element: Eingabe im Kontaktformular
        Korrektur: aria-label="E-Mail-Adresse" hinzufügen
        Sicher: Ja
    
    [3] ⚠️ Überschriftenhierarchie korrigieren
        Element: h3 im Artikelbereich
        Korrektur: Überschriftenebene von h3 auf h2 ändern
        Sicher: Kann visuelle Darstellung beeinflussen
    
    Nummern eingeben zum Überspringen (z. B. "3"), "alle" für alle, "keine" zum Abbrechen
    

24. Genehmigte Korrekturen anwenden: data_element_tool mit der Aktion set_attributes verwenden

    • In Batches verarbeiten
    • Fortschritt bei großen Korrektursätzen anzeigen
    • Erfolg/Fehlschlag für jede melden

25. Bericht nach Korrektur erstellen:

    • Behobene Probleme: X
    • Verbleibende Probleme: Y
    • Neue Barrierefreiheitsbewertung: XX/100 (verbessert von YY/100)

Phase 7: Export & Ressourcen (Optional)

26. Exportformate anbieten:

    • Markdown (lesbare Dokumentation)
    • JSON (maschinenlesbar für Nachverfolgung)
    • CSV (Tabellenkalkulation für Team-Review)

27. Ressourcen bereitstellen:

    • WCAG 2.1 Kurzreferenz-Links
    • Best Practices für Webflow-Barrierefreiheit
    • Empfohlene Testwerkzeuge (Browser-Erweiterungen, Screenreader)

Wichtige Überlegungen

Was dieser Skill prüft

✅ Button-Barrierefreiheit (Beschriftungen, Rollen) ✅ Formulareingabe-Beschriftungen und -Verknüpfungen ✅ Link-Semantik und Tastaturzugriff ✅ Fokus-Sichtbarkeit und Tastaturnavigation ✅ Überschriftenhierarchie und -struktur ✅ ARIA-Rollen und -Attribute ✅ Touch-Zielgrößen ✅ Semantik interaktiver Elemente

Was dieser Skill NICHT prüft

❌ Bild-Alt-Texte (stattdessen asset-audit-Skill verwenden) ❌ Farbkontrastverhältnisse (erfordert visuelle Analyse) ❌ Animation/Bewegungseinstellungen ❌ Screenreader-Tests (erfordert manuelle Überprüfung) ❌ Inhaltslesbarkeit (Sprachniveau, Klarheit)

Einschränkungen

• Kann keine rein visuellen Probleme erkennen (Farbkontrast, kleiner Text)
• Kann kein tatsächliches Screenreader-Verhalten testen
• Kann Inhaltsqualität oder -klarheit nicht validieren
• Verlässt sich ausschließlich auf Elementattribute und -struktur

Beispiele

Beispiel 1: Vollständiges Seiten-Audit

Benutzeranfrage:

Führe ein Barrierefreiheits-Audit auf meiner Startseite durch

Schritt 1: Seiten- & Bereichsauswahl

🔍 Barrierefreiheits-Audit: Seitenauswahl

Ich werde Ihnen helfen, Ihre Startseite auf Barrierefreiheitsprobleme zu prüfen.

Zunächst lasse ich mir Ihre Seiteninformationen geben...

Verfügbare Seiten:
1. Unternehmenswebsite
2. Portfolio-Seite

Welche Seite? (1/2)

Benutzerantwort: 1

Schritt 2: Seitenauswahl

Verfügbare Seiten in Unternehmenswebsite:
1. Startseite (/)
2. Über uns (/ueber-uns)
3. Kontakt (/kontakt)
4. Blog (/blog)

Welche Seite möchten Sie auditieren? (1 für Startseite)

Benutzerantwort: 1

Schritt 3: Audit-Umfang

Welche Art von Audit möchten Sie durchführen?

1. Vollständiges Audit (alle WCAG-Prüfungen) - Empfohlen
2. Nur kritische Probleme (Level A-Konformität)
3. Bestimmte Kategorien (Buttons, Formulare, Navigation)

Ihre Auswahl: (1/2/3)

Benutzerantwort: 1

Schritt 4: Audit-Fortschritt

🔄 Führe Barrierefreiheits-Audit durch...

Fortschritt:
✅ Seiteninhalt extrahiert (45 Elemente)
✅ Buttons und interaktive Elemente analysiert
✅ Formulareingaben und Beschriftungen geprüft
✅ Überschriftenhierarchie validiert
✅ Tastaturnavigation geprüft
🔄 Fokus-Zustände analysieren...

Analyse abgeschlossen!

Schritt 5: Bericht

═══════════════════════════════════════════════════
BARRIEREFREIHEITS-AUDIT: Startseite
═══════════════════════════════════════════════════

KRITISCH (3 Probleme)
─────────────────────
[A11Y] Element: Button (Navigationsumschalter)
  Problem: Symbol-Button ohne zugänglichen Namen
  Ort: Kopfzeilen-Navigation
  Element-ID: {component: "nav-01", element: "btn-menu"}
  Aktuell: <button><MenuIcon /></button>
  Behebung: aria-label="Navigationsmenü öffnen" hinzufügen
  WCAG: 4.1.2 Name, Rolle, Wert

[A11Y] Element: Eingabe (E-Mail-Abonnement)
  Problem: Formulareingabe ohne Beschriftung
  Ort: Fußzeile, Newsletter-Anmeldung
  Element-ID: {component: "footer-01", element: "email-input"}
  Aktuell: <input type="email" placeholder="E-Mail eingeben" />
  Behebung: aria-label="E-Mail-Adresse für Newsletter" hinzufügen
  WCAG: 1.3.1 Informationen und Beziehungen

[A11Y] Element: Div (klickbare Karte)
  Problem: Nicht-semantisches interaktives Element
  Ort: Dienstleistungsbereich, Karte 2
  Element-ID: {component: "services-01", element: "card-02"}
  Aktuell: <div onClick={...}>Dienstleistungskarte</div>
  Behebung: In <button> umwandeln oder role="button" + tabIndex="0" hinzufügen
  WCAG: 2.1.1 Tastatur

SCHWERWIEGEND (5 Probleme)
───────────────────────────
[A11Y] Element: Link "Mehr erfahren"
  Problem: Fokus-Rahmen ohne sichtbare Alternative entfernt
  Ort: Hero-Bereich
  Element-ID: {component: "hero-01", element: "cta-link"}
  Aktuell: outline: none
  Behebung: Fokus-Stil hinzufügen - border: 2px solid #0066cc oder box-shadow
  WCAG: 2.4.7 Fokus sichtbar

[A11Y] Element: Button "Abonnieren"
  Problem: Touch-Ziel zu klein (30px × 36px)
  Ort: Fußzeile Newsletter-Formular
  Element-ID: {component: "footer-01", element: "submit-btn"}
  Aktuell: Kleiner Button
  Behebung: Padding erhöhen oder min-height: 44px setzen
  WCAG: 2.5.5 Zielgröße

[fortgesetzt mit 3 weiteren schwerwiegenden Problemen...]

MODERAT (4 Probleme)
─────────────────────
[A11Y] Element: Überschrift "Unsere Dienstleistungen"
  Problem: Überschriftenhierarchie übersprungen (h1 → h3)
  Ort: Dienstleistungsbereich
  Element-ID: {component: "services-01", element: "heading"}
  Aktuell: <h3>Unsere Dienstleistungen</h3> folgt auf <h1>Willkommen</h1>
  Behebung: In <h2> ändern
  WCAG: 1.3.1 Informationen und Beziehungen

[fortgesetzt mit 3 weiteren moderaten Problemen...]

═══════════════════════════════════════════════════
ZUSAMMENFASSUNG
───────────────────────────────────────────────────
Gesamtprobleme: 12
- Kritisch: 3 Probleme
- Schwerwiegend: 5 Probleme
- Moderat: 4 Probleme

Barrierefreiheitsbewertung: 47/100

Häufigste Probleme:
1. Fehlende ARIA-Beschriftungen - 4 Vorkommen
2. Fokus-Stil-Probleme - 3 Vorkommen
3. Überschriftenhierarchie-Probleme - 2 Vorkommen
═══════════════════════════════════════════════════

Schritt 6: Korrekturvorschläge & Freigabe (Optional)

Welche Probleme möchten Sie beheben?

[1] ✓ aria-label zu Button (Navigationsmenü) hinzufügen
    Element: Button in Kopfleiste
    Korrektur: aria-label="Navigationsmenü öffnen" hinzufügen
    Sicher: Ja

[2] ✓ aria-label zur E-Mail-Eingabe hinzufügen
    Element: Eingabe in Fußzeile
    Korrektur: aria-label="E-Mail-Adresse für Newsletter" hinzufügen
    Sicher: Ja

[3] ✓ Rolle und tabIndex zur klickbaren Karte hinzufügen
    Element: Div in Dienstleistungsbereich
    Korrektur: role="button" + tabIndex="0" hinzufügen
    Sicher: Ja

[4] ⚠️ Fokus-Stil zu "Mehr erfahren"-Link hinzufügen
    Element: Link in Hero-Bereich
    Korrektur: Fokus-Stil mit border: 2px solid #0066cc hinzufügen
    Sicher: Kann visuelle Darstellung beeinflussen

[5] ⚠️ Touch-Zielgröße für "Abonnieren"-Button korrigieren
    Element: Button in Fußzeile
    Korrektur: min-height: 44px und Padding hinzufügen
    Sicher: Kann visuelle Darstellung beeinflussen

[6] ⚠️ Überschriftenhierarchie korrigieren
    Element: h3 in Dienstleistungsbereich
    Korrektur: In h2 ändern
    Sicher: Kann visuelle Darstellung beeinflussen

Nummern eingeben zum Überspringen (z. B. "3"), "alle" für alle, "keine" zum Abbrechen

Benutzerantwort: 4,5,6 (Überspringen der Probleme, die visuelle Darstellung beeinflussen könnten)

Schritt 7: Anwendung & Zusammenfassung nach Korrektur

✅ Korrekturen angewendet...

[1] ✓ aria-label zu Button (Navigationsmenü) hinzugefügt - Erfolg
[2] ✓ aria-label zur E-Mail-Eingabe hinzugefügt - Erfolg
[3] ✓ Rolle und tabIndex zur klickbaren Karte hinzugefügt - Erfolg

Bericht nach Korrektur:
- Behobene Probleme: 3
- Verbleibende Probleme: 9
- Neue Barrierefreiheitsbewertung: 77/100 (verbessert von 47/100)

Möchten Sie die verbleibenden Probleme später beheben lassen?

Beispiel 2: Nur kritische Probleme

Benutzeranfrage:

Prüfe meine Kontaktseite auf kritische Barrierefreiheitsprobleme

Schritt 1: Auswahl des kritischen Modus

🔍 Barrierefreiheits-Audit: Auswahl des Umfangs

Sie haben nach einem Audit für kritische Probleme auf Ihrer Kontaktseite gefragt.

Zunächst lasse ich mir Ihre Seiteninformationen geben...

Verfügbare Seiten:
1. Unternehmenswebsite
2. Portfolio-Seite

Welche Seite? (1/2)

Benutzerantwort: 1

Schritt 2: Seitenauswahl

Verfügbare Seiten in Unternehmenswebsite:
1. Startseite (/)
2. Über uns (/ueber-uns)
3. Kontakt (/kontakt)
4. Blog (/blog)

Welche Seite möchten Sie auditieren? (3 für Kontakt)

Benutzerantwort: 3

Schritt 3: Audit-Ausführung

🔄 Führe Audit für kritische Probleme auf Kontaktseite durch...

Phase 1: Elemente extrahieren...
✅ 38 Elemente gefunden
Phase 2: Auf kritische Probleme prüfen...

Audit abgeschlossen!

═══════════════════════════════════════════════════
BARRIEREFREIHEITS-AUDIT: Kontakt (Nur kritische Probleme)
═══════════════════════════════════════════════════

KRITISCH (2 Probleme)
─────────────────────
[A11Y] Element: Button "Senden"
  Problem: Button fehlt zugänglicher Name (nur Symbol)
  Ort: Kontaktformular, Element-ID: {component: "contact-01", element: "submit-btn"}
  Aktuell: <button><SendIcon /></button>
  Behebung: aria-label="Nachricht senden" hinzufügen
  WCAG: 4.1.2 Name, Rolle, Wert

[A11Y] Element: Eingabefeld "Telefon"
  Problem: Formulareingabe ohne Beschriftung
  Ort: Kontaktformular, Element-ID: {component: "contact-01", element: "phone-input"}
  Aktuell: <input type="tel" placeholder="Telefonnummer" />
  Behebung: aria-label="Telefonnummer" hinzufügen
  WCAG: 1.3.1 Informationen und Beziehungen

═══════════════════════════════════════════════════
ZUSAMMENFASSUNG
───────────────────────────────────────────────────
Gesamtprobleme: 2 (nur kritische)
- Kritisch: 2 Probleme
- Schwerwiegend: 0 Probleme (nicht geprüft)
- Moderat: 0 Probleme (nicht geprüft)

Barrierefreiheitsbewertung: 80/100

Häufigste Probleme:
1. Fehlende ARIA-Beschriftungen - 2 Vorkommen
═══════════════════════════════════════════════════

Möchten Sie diese Probleme automatisch beheben lassen? (ja/nein)

Benutzerantwort: ja

✅ Korrekturen angewendet!

[1] ✓ aria-label="Nachricht senden" zu Senden-Button hinzugefügt
[2] ✓ aria-label="Telefonnummer" zu Telefon-Eingabe hinzugefügt

Behobene Probleme: 2
Verbleibende Probleme: 0
Neue Barrierefreiheitsbewertung: 100/100

Barrierefreiheitskonformität der Kontaktseite verbessert!