A11yBridge Live-Demo
Öffne das A11yBridge-Badge (unten rechts) und nutze die Funktionen direkt an den Elementen dieser Seite.
Klicke auf Bilder/Videos → „Alt-Text vorschlagen/Verbessern“, „Beschreiben“, „Transkript/Untertitel“.
Geführte Testaufgaben
- Markiere den Absatz
#legal-1und wähle in A11yBridge: Text vereinfachen. - Markiere denselben Absatz und wähle: Vorlesen (TTS).
- Markiere den englischen Absatz
#eng-1→ Vereinfachen oder Übersetzen → Deutsch. - Klicke das Bild ohne Alt
#img-noalt-1→ Alt-Text vorschlagen. - Klicke das Produktbild
#img-pooralt-1→ Alt-Text verbessern / Beschreiben. - Klicke die Infografik
#img-infog-1→ Beschreiben oder OCR. - Starte das Video
#video-1→ im Plugin Transkript/Untertitel/Beschreiben. - Aktiviere Fokus-Modus und scrolle: Ablenkungen sollten verschwinden.
- Aktiviere Bewegungen reduzieren: Animationen sollen stoppen (siehe
#anim-zone-1). - Aktiviere Hoher Kontrast und prüfe
#contrast-grid-1. - Öffne Seiten-Scanner → „Analysieren“ → Befunde & Quick-Fix prüfen.
- Sage: „Aktiviere Stimme“ und dann z. B. „Lies den markierten Text“.
Tipp: Aktionen unterstützen Auswahl-Kontext (markierter Text) oder Fokus-Kontext (zuletzt angeklicktes Element).
Texte – Vereinfachen, Vorlesen, Übersetzen
Juristischer Absatz #legal-1
Der Auftragnehmer verpflichtet sich, sämtliche im Zuge der Leistungserbringung erlangten Kenntnisse, Unterlagen
und Daten streng vertraulich zu behandeln und diese ohne vorherige schriftliche Zustimmung des Auftraggebers
weder ganz noch teilweise Dritten zugänglich zu machen, es sei denn, eine gesetzliche Offenbarungspflicht
besteht, wobei der Auftragnehmer den Auftraggeber hierüber unverzüglich zu informieren hat.
Aufgabe: Text markieren → im A11yBridge-Panel „Text vereinfachen“ oder „Vorlesen (TTS)“.
Technischer Absatz (EN) #eng-1
Notwithstanding anything to the contrary, the Service Provider shall ensure reasonable efforts to maintain
continuity of the Services during scheduled maintenance windows and unforeseen outages, subject to force majeure.
Aufgabe: Markieren → „Vereinfachen“ oder „Übersetzen → Deutsch“ & optional TTS.
Komplexer Absatz (DE) für Vereinfachung
Die systemische Emergenz adaptiver Informationsstrukturen kann in heterogenen, verteilten Netzwerken zu
kognitiver Überlastung führen, sofern semantische Wegweiser fehlen und die Signal-zu-Rausch-Relation durch
konkurrierende Stimuli weiter sinkt; Abhilfe schaffen klare Hierarchien, visuelle Anker und reduktive
Zusammenfassungen auf Abruf.
Aufgabe: Markieren → „Vereinfachen“ / „Vorlesen (TTS)“.
Bilder – Alt-Text, Beschreibung, OCR
Video & Audio – Transkript, Untertitel, Beschreibung
Video ohne Untertitel #video-1
Aufgabe: Video fokussieren → im Plugin „Transkript/Untertitel/Beschreiben“.
Audio mit Transkript
Transkript (Beispiel)
In diesem Audio demonstrieren wir, wie ein Transkript Barrieren reduziert.
Formulare – Labels, Fehler, Live-Feedback
Aufgabe: „Seiten-Scanner“ oder Formular-Audit im Plugin testen; absichtlich Fehler im linken Formular provozieren.
Tabellen – Caption, Header, Scope
Fehlerhafte Tabelle
| Q1 | 1200 | € |
| Q2 | 900 | € |
| Q3 | 1400 | € |
Keine Caption/Headers – Scanner sollte dies melden.
Korrekte Tabelle
| Quartal | Umsatz | Währung |
|---|---|---|
| Q1 | 1 200 | € |
| Q2 | 900 | € |
| Q3 | 1 400 | € |
Fokus-Modus, Bewegungen reduzieren, Kontrast
Fokus-Modus
Aufgabe: A11yBridge → „Fokus-Modus“ aktivieren. Ablenkende Elemente außerhalb des Hauptinhalts werden gedimmt/ausgeblendet.
Bewegungen reduzieren #anim-zone-1
Laufende CSS-Animation (wobble)
Aufgabe: „Bewegungen reduzieren“ aktivieren → Animation sollte stoppen.
Kontrast-Kacheln #contrast-grid-1
Aufgabe: „Kontrast prüfen/erhöhen“ im Plugin testen.
Internationalisierung & RTL
Accessibility enhances usability for everyone, not only for people with disabilities.
La accesibilidad mejora la experiencia para todos los usuarios.
دسترسیپذیری برای همه کاربران مفید است.
Aufgabe: Sprache erkennen lassen, bei Bedarf übersetzen oder vorlesen.
Dynamische Inhalte & Live-Regionen
Benachrichtigung (polite)
Aufgabe: Screenreader-Ansage prüfen.
Fehlermeldung (assertive)
Aufgabe: Screenreader-Priorität prüfen.
Tastatur-Navigation & Modale
Modal (fehlerhaft)
Fokusfalle unvollständig; fehlende ARIA-Attribute.
Modal (korrekt)
Interner Link (Tab-Reihenfolge testen)
Seiten-Scanner
Aufgabe: Öffne im A11yBridge-Panel den Scanner und klicke „Analysieren“. Es gibt absichtlich eingebaute Probleme:
fehlende Alt-Texte, niedriger Kontrast, fehlerhafte Überschriftenhierarchie, Formular-Mängel.