Einleitung
Barrierefreiheit ist kein Nice-to-have – sie ist Pflicht (BFSG ab 2025!). AI hilft dabei, bestehende Websites zugänglich zu machen und neue Projekte von Anfang an inklusiv zu entwickeln. Hier sind 10 Prompts für Accessibility.
Dabei ist der folgende Punkt besonders wichtig.
Inhaltsverzeichnis
- Prompt 1: Accessibility Audit
- Prompt 2: Semantisches HTML
- Prompt 3: ARIA Attribute richtig einsetzen
- Prompt 4: Keyboard Navigation
- Prompt 5: Barrierefreie Formulare
- Prompt 6: Farben & Kontrast
- Prompt 7: Screen Reader Optimierung
- Prompt 8: Bilder, Videos & Medien
- Prompt 9: Accessibility Testing
- Prompt 10: Barrierefreie Komponenten
- FAQ
Deshalb ist es wichtig, diesen Abschnitt aufmerksam zu lesen.
Prompt 1: Accessibility Audit
Dennoch solltest du einige Besonderheiten beachten.
Führe einen Accessibility Audit meiner Website durch:
URL/Code: [URL oder HTML-Code einfügen]
Standard: WCAG 2.2 Level AA
Prüfe:
1. **Perceivable**: Textalternativen, Untertitel, Kontrast
2. **Operable**: Tastatur-bedienbar, genug Zeit, keine Flicker
3. **Understandable**: Sprache, vorhersehbar, Fehlerbehandlung
4. **Robust**: Valides HTML, ARIA korrekt, kompatibel
Für jeden gefundenen Fehler:
- WCAG Kriterium (z.B. 1.1.1 Non-text Content)
- Schweregrad (Critical / Major / Minor)
- Element/Zeile im Code
- Problem-Beschreibung
- Fix mit Code-Beispiel
- Betroffene User-Gruppe
Ausgabe als Tabelle, sortiert nach Schweregrad.
Checklist für BFSG-Konformität (ab 28.06.2025).Deshalb empfiehlt es sich, den Prompt schrittweise zu verfeinern.
Dementsprechend solltest du die einzelnen Schritte sorgfältig abarbeiten.
Prompt 2: Semantisches HTML
Folglich profitierst du von einem besseren Verständnis dieser Konzepte.
Verbessere mein HTML mit semantischen Elementen:
Aktueller Code: [HTML einfügen]
Ersetze div-Suppen durch semantisches HTML:
1. <header>, <nav>, <main>, <footer> statt <div>
2. <article>, <section>, <aside> für Content-Struktur
3. <h1>-<h6> in korrekter Hierarchie (keine Level übersprungen!)
4. <button> statt <div onclick>
5. <a> für Navigation, <button> für Aktionen
6. <ul>/<ol> für Listen (nicht <div> mit Bullets)
7. <table> für tabulare Daten (nicht für Layout!)
8. <figure> + <figcaption> für Bilder mit Beschriftung
9. <time datetime="..."> für Zeitangaben
10. <details>/<summary> für Accordions (nativ!)
Zeige Vorher → Nachher mit Erklärung warum das besser ist.Insbesondere die Struktur des Prompts ist dabei entscheidend für gute Ergebnisse.
Grundsätzlich empfiehlt es sich, schrittweise vorzugehen.
Prompt 3: ARIA Attribute richtig einsetzen
Ebenfalls relevant sind die praktischen Anwendungsbeispiele.
Erkläre ARIA Attribute und setze sie korrekt ein:
Komponente: [z.B. "Modal Dialog" / "Dropdown Menu" / "Tab Panel"]
Regel 1: Kein ARIA ist besser als falsches ARIA!
Nutze natives HTML wenn möglich.
Erkläre und zeige Beispiele:
1. **Landmark Roles**: role="navigation", role="main" (oder HTML5)
2. **aria-label**: Für Elemente ohne sichtbaren Text
3. **aria-labelledby**: Referenz auf sichtbares Label
4. **aria-describedby**: Zusätzliche Beschreibung
5. **aria-hidden**: Visuell-dekorative Elemente verbergen
6. **aria-live**: Dynamische Inhalte ankündigen (polite/assertive)
7. **aria-expanded**: Für Accordions, Dropdowns, Menüs
8. **aria-current**: Aktiver Link in Navigation
9. **aria-invalid + aria-errormessage**: Formular-Fehler
10. **role="alert"**: Wichtige Status-Meldungen
Anti-Patterns: Häufige ARIA-Fehler die die Accessibility verschlechtern.Dementsprechend ist eine manuelle Überprüfung empfehlenswert.
Insbesondere für fortgeschrittene Projekte ist das relevant.
Prompt 4: Keyboard Navigation
Dementsprechend solltest du die folgenden Aspekte kennen.
Implementiere vollständige Keyboard Navigation:
Komponente: [z.B. "Gesamte Website" / "Custom Dropdown" / "Modal"]
Implementiere:
1. **Tab-Reihenfolge**: Logisch, von oben nach unten, links nach rechts
2. **Focus Visibility**: Sichtbarer Focus-Ring (:focus-visible)
3. **Skip Link**: "Zum Inhalt springen" als erstes Element
4. **Focus Trap**: In Modals/Dialogen (Focus bleibt drin)
5. **Focus Management**: Nach Aktionen (Route Change, Modal Close)
6. **Arrow Keys**: In Menüs, Tabs, Grids (Roving Tabindex)
7. **Escape**: Schließt Modals, Dropdowns, Overlays
8. **Enter/Space**: Aktiviert Buttons und Links
9. **Shortcuts**: accesskey (sparsam!), Custom Shortcuts
10. **tabindex**: 0 (tabbable), -1 (programmatic focus), nie > 0!
Test-Checkliste: Alle Funktionen nur mit Tastatur bedienen.
CSS für Focus: :focus-visible { outline: 3px solid #4A90D9; }Tatsächlich zeigt die Praxis, dass dieser Ansatz sehr effektiv ist.
Prompt 5: Barrierefreie Formulare
Deshalb lohnt es sich, dieses Thema genauer zu betrachten.
Mache mein Formular barrierefrei:
Aktuelles Formular: [HTML-Code einfügen]
Implementiere:
1. **Labels**: Jedes Input hat ein <label for="...">
2. **Pflichtfelder**: aria-required="true" + visueller Hinweis
3. **Error Handling**: Fehler bei Feld anzeigen + aria-invalid
4. **Error Summary**: Alle Fehler am Anfang des Formulars
5. **Gruppierung**: <fieldset> + <legend> für zusammengehörige Felder
6. **Autocomplete**: autocomplete Attribut für Standardfelder
7. **Input Types**: type="email", type="tel" (mobile Keyboard!)
8. **Help Text**: aria-describedby für Hinweise/Formatvorgaben
9. **Submit Feedback**: Live Region für Erfolg/Fehler-Meldung
10. **Multi-Step Forms**: Fortschrittsanzeige, Navigation zurück
Validierung:
- Inline-Validierung bei blur (nicht bei jedem Tastendruck!)
- Fehlermeldungen: Klar, hilfsbereit, beim Feld angezeigt
- aria-live="polite" für dynamische FehlerVor allem die detaillierten Anweisungen sorgen für präzisere Ergebnisse.
Vor allem in der Praxis hat sich dieser Workflow bewährt.
Prompt 6: Farben & Kontrast
Zusammenfassend lässt sich sagen, dass dies ein zentraler Aspekt ist.
Prüfe und optimiere die Farben meiner Website für Barrierefreiheit:
Farbpalette: [z.B. "#1a1a1a, #666666, #0066cc, #ff6600, #ffffff"]
Prüfe:
1. **Kontrast-Ratio**: WCAG AA (4.5:1 für Text, 3:1 für große Schrift)
2. **Kontrast-Ratio**: WCAG AAA (7:1 für Text, 4.5:1 für große Schrift)
3. **Farbenblindheit**: Rot-Grün, Blau-Gelb Simulation
4. **Nicht nur Farbe**: Information nicht nur über Farbe vermitteln
5. **Focus Indicators**: Kontrastreicher Focus-Ring
6. **Dark Mode**: Kontrast auch im Dark Mode prüfen
7. **Links im Text**: Nicht nur Farbe, auch Unterstreichung
8. **Buttons**: Disabled State trotzdem erkennbar
9. **Charts/Grafiken**: Patterns zusätzlich zu Farben
10. **Custom Properties**: CSS Variable System mit A11y-Checks
Erstelle eine a11y-konforme Farbpalette als Alternative.
Tools: Contrast Checker, Colorblind Filter, APCA Contrast.Somit sparst du Zeit und erhältst qualitativ hochwertigeren Output.
Allerdings gibt es dabei einige Punkte, die du beachten solltest.
Prompt 7: Screen Reader Optimierung
Im Folgenden findest du alle wichtigen Details dazu.
Optimiere meine Website für Screen Reader:
Seite: [URL oder HTML-Code]
Implementiere:
1. **Seitentitel**: Beschreibend, einzigartig pro Seite
2. **Heading-Struktur**: Logische h1-h6 Hierarchie
3. **Landmarks**: nav, main, complementary, contentinfo
4. **Link-Text**: Beschreibend ("Download PDF" statt "Hier klicken")
5. **Bilder**: alt-Text (beschreibend) oder alt="" (dekorativ)
6. **Tabellen**: <th scope="col/row">, <caption>
7. **Listen**: Richtig ausgezeichnet für Navigation durch Items
8. **Live Regions**: Notifications, Loading States
9. **Language**: lang Attribut (Seite + Fremdsprachige Abschnitte)
10. **Hidden Content**: .sr-only Klasse für Screen-Reader-Only Text
Test mit:
- VoiceOver (Mac): CMD+F5
- NVDA (Windows): Kostenlos
- Talkback (Android): In SettingsNatürlich solltest du den generierten Code vor dem Einsatz testen.
Hierbei hilft es, von konkreten Beispielen auszugehen.
Prompt 8: Bilder, Videos & Medien
Allerdings gibt es einige wichtige Unterschiede zu beachten.
Mache alle Medien auf meiner Website barrierefrei:
Medien: [z.B. "Hero Image, Produktbilder, YouTube Videos, Infografiken"]
Implementiere:
1. **Alt-Texte**: Beschreibend, kontextabhängig, max. 125 Zeichen
2. **Dekorative Bilder**: alt="" (leerer Alt-Text, nicht weglassen!)
3. **Komplexe Bilder**: Infografiken mit aria-describedby + Langbeschreibung
4. **SVG**: role="img", aria-label oder <title> Element
5. **Video-Untertitel**: WebVTT Datei (.vtt), Closed Captions
6. **Audio Description**: Beschreibung visueller Inhalte im Video
7. **Transkript**: Vollständiger Text für Audio/Video
8. **Autoplay**: Nie mit Ton! Pause-Button sichtbar
9. **Animationen**: prefers-reduced-motion respektieren
10. **Carousel/Slider**: Pause, Prev/Next Buttons, aria-live
Alt-Text Cheat Sheet:
- Foto: Was ist zu sehen + Kontext
- Icon: Funktion beschreiben ("Suchen", nicht "Lupe")
- Chart: Trend/Kernaussage als Alt-TextWeiterhin ist es sinnvoll, die Ergebnisse regelmäßig zu überprüfen.
Prompt 9: Accessibility Testing
Insbesondere für den Einstieg sind die folgenden Informationen hilfreich.
Erstelle eine Accessibility Testing Strategie:
Projekt: [z.B. "React SPA" / "WordPress Website" / "E-Commerce"]
Implementiere:
1. **Automatisiert**: axe-core, Lighthouse, pa11y
2. **CI/CD Integration**: axe in Jest/Playwright Tests
3. **Browser Extension**: axe DevTools, WAVE
4. **Manuell Keyboard**: Tab durch gesamte Seite
5. **Screen Reader Test**: VoiceOver/NVDA Skript
6. **Zoom Test**: 200% Zoom, alles noch bedienbar?
7. **Color Test**: Farbenblindheit Simulator
8. **Mobile Test**: Touch Target Sizes (min. 44x44px)
9. **User Testing**: Mit echten Nutzern mit Behinderung
10. **Regression Test**: A11y Checks bei jedem PR
Testing-Matrix:
| Test-Typ | Tool | Wann | Abdeckung |
Automatisiert findet ~30% der Probleme, manuelle Tests sind essentiell!Ebenfalls sinnvoll ist es, verschiedene Varianten auszuprobieren.
Zusätzlich gibt es einige bewährte Tipps für den Alltag.
Prompt 10: Barrierefreie Komponenten
Außerdem gibt es hilfreiche Tools, die dich dabei unterstützen.
Erstelle barrierefreie UI-Komponenten:
Komponente: [z.B. "Modal / Dropdown / Tabs / Accordion / Toast"]
Framework: [React / Vue / Web Components / Vanilla]
Implementiere nach WAI-ARIA Authoring Practices:
1. **Dialog/Modal**: role="dialog", aria-modal, Focus Trap
2. **Dropdown Menu**: role="menu", Arrow Key Navigation
3. **Tabs**: role="tablist/tab/tabpanel", Arrow Keys
4. **Accordion**: aria-expanded, aria-controls, Enter/Space
5. **Toast/Notification**: role="alert" oder aria-live
6. **Tooltip**: role="tooltip", aria-describedby
7. **Combobox**: role="combobox", Autocomplete Pattern
8. **Date Picker**: Grid Navigation, Keyboard Support
9. **Carousel**: aria-roledescription, Pause/Controls
10. **Breadcrumb**: nav aria-label="Breadcrumb"
Oder nutze Headless UI Libraries:
- React: Radix UI, React Aria, Headless UI
- Vue: Headless UI Vue
- HTML: Details/Summary, Dialog Element (nativ!)Darüber hinaus lässt sich das Beispiel leicht erweitern.
Somit ergibt sich ein klarer Vorteil gegenüber manuellen Methoden.
FAQ
Muss meine Website barrierefrei sein?
Grundsätzlich gibt es dabei einige Punkte zu beachten.
Ab 28.06.2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). E-Commerce und digitale Dienstleistungen müssen WCAG 2.1 AA erfüllen. Auch ohne gesetzliche Pflicht: 15% der Weltbevölkerung haben eine Behinderung – Barrierefreiheit ist ein Business Case.
Welches WCAG Level soll ich anstreben?
Dabei spielen mehrere Faktoren eine wichtige Rolle.
AA ist der Standard und gesetzlich gefordert. AAA ist für die meisten Websites unrealistisch als Gesamtziel, aber einzelne AAA-Kriterien (wie besserer Kontrast) sind sinnvoll. Starte mit A, arbeite dich zu AA hoch.
Kann AI Accessibility-Probleme finden?
Im Grunde vereinfacht dieser Ansatz den gesamten Workflow erheblich.
AI kann HTML analysieren und circa 50-70% der Accessibility-Probleme identifizieren: fehlende Alt-Texte, Kontrast-Issues, falsche ARIA-Nutzung. Aber: Screen Reader-Erfahrung und Keyboard-Tests muss ein Mensch machen.
Ebenfalls empfehlenswert ist eine regelmäßige Überprüfung der Ergebnisse.
Verwandte Artikel:
Im Grunde sparst du dadurch langfristig viel Zeit.
Zuletzt aktualisiert: März 2026