Erklärung zur Barrierefreiheit
1. Stand der Vereinbarkeit
myAbiFlow (myabiflow.de) ist teilweise konform mit den Anforderungen der Web Content Accessibility Guidelines (WCAG) 2.1, Konformitätsstufe AA.
Die im Folgenden aufgeführten Einschränkungen werden schrittweise behoben. Am 17. März 2026 wurden umfangreiche Verbesserungen vorgenommen (Focus-Management, Formular-Labels, Skip-Links, Farbkontrast). Ein abschließendes Konformitätsaudit steht noch aus.
2. Geltungsbereich
Diese Erklärung gilt für folgende Bereiche des Angebots:
- Hauptanwendung: myabiflow.de (alle Fachtrainer-Seiten)
- FOS-Bereich: myabiflow.de/fos/
- Kolloquiumstrainer: myabiflow.de/abitur-kolloquium-trainer/dist/
- Lehrer-Bereich: myabiflow.de/lehrer.html, myabiflow.de/dashboard.html
3. WCAG-Kriterien im Detail
Prinzip 1 – Wahrnehmbar
| Kriterium | Status | Anmerkung |
|---|---|---|
| 1.1.1 Nicht-Text-Inhalt (A) | Teilweise | Alle <img>-Alt-Texte vorhanden. Dekorative Emojis mit aria-hidden. Fortschritts-Charts erhalten role="img" + aria-label; Aufgaben-Charts in Fachseiten noch ohne semantische Beschriftung. |
| 1.2.1 Nur-Audio / Nur-Video (A) | Teilweise | listening.html: Audio-Transkript über <details>/<summary> zugänglich. KI-generierte Hörtexte ohne vorberechnetes Transkript vor dem ersten Abspielen. |
| 1.2.2 Untertitel (aufgezeichnet) (A) | Nicht anwendbar | Keine aufgezeichneten Videos mit Sprache auf der Plattform. Splash-Video ist rein dekorativ und stumm. |
| 1.3.1 Info und Beziehungen (A) | Teilweise | Seit 17.03.2026: Alle Login- und Filter-Inputs mit <label>. Dynamisch generierte Prüfungsdatum-Inputs erhalten label-IDs. Legende-Elemente in Tabellen vorhanden. |
| 1.3.5 Eingabezweck erkennen (AA) | Teilweise | autocomplete-Attribute auf Login-Formularen gesetzt. Schüler-Passwort-Feld bleibt bewusst ohne Autocomplete (Schulkontext). |
| 1.4.1 Verwendung von Farbe (A) | Konform | Farbe wird nie als einzige Unterscheidungsinfo verwendet. Alle Status-Informationen sind text- und icon-gestützt. |
| 1.4.3 Kontrast (Minimum) (AA) | Konform | axe-Scan (17.03.2026) zeigt 0 Kontrast-Violations. --ink-muted (#475569 auf #fff) = 8,5:1. Alle Akzentfarben ≥ 4,5:1 geprüft und ggf. korrigiert. |
| 1.4.4 Textgröße ändern (AA) | Konform | rem-basiertes Layout, html { font-size: 112.5% }. Zoom bis 200 % ohne Inhaltsverlust getestet. |
| 1.4.10 Umbruch (AA) | Konform | Responsive Flexbox/Grid-Layouts. Kein horizontales Scrollen bei 320 px Viewport-Breite erforderlich. |
| 1.4.11 Nicht-Text-Kontrast (AA) | Konform | Alle UI-Komponenten-Ränder (Eingabefelder, Buttons) ≥ 3:1 gegen Hintergrund. |
| 1.4.12 Textabstand (AA) | Konform | Kein CSS, das Textabstand-Überschreibungen blockiert. Getestet mit Text Spacing Bookmarklet. |
Prinzip 2 – Bedienbar
| Kriterium | Status | Anmerkung |
|---|---|---|
| 2.1.1 Tastatur (A) | Konform | Alle interaktiven Elemente per Tab erreichbar. Kein Hover-only-Verhalten. Modals mit Escape schließbar. |
| 2.1.2 Keine Tastaturfalle (A) | Konform | Alle Dialoge (PDF-Export, Verbesserungsvorschläge, Profil, Tutorial) haben Focus-Trap + Escape-Handler. Verlassen immer möglich. |
| 2.4.1 Blöcke umgehen (A) | Konform | Skip-Link „Zum Hauptinhalt springen" auf allen Seiten. Ziel: #main-content. |
| 2.4.2 Seite mit Titel (A) | Konform | Jede Seite hat einen eindeutigen <title> im Format „Fach · myAbiFlow". |
| 2.4.3 Fokus-Reihenfolge (A) | Konform | Logische Tab-Reihenfolge im DOM. Modals setzen Fokus automatisch auf ersten fokussierbaren Button; Fokus kehrt nach Schließen zurück. |
| 2.4.7 Sichtbarer Fokus (AA) | Konform | Globaler Focus-Ring (2 px solid, accent-Farbe) auf allen interaktiven Elementen. :hover-Styles auch für :focus-visible gesetzt. |
| 2.4.11 Fokus nicht verdeckt (AA, WCAG 2.2) | Konform | Kein sticky-Element, das fokussierte Elemente vollständig verdeckt. |
| 2.5.3 Beschriftung im Namen (A) | Konform | Alle aria-label-Texte enthalten den sichtbaren Button-Text oder sind konsistent damit. |
| 2.5.5 Zielgröße (AAA / WCAG 2.2 AA) | Teilweise | Alle Haupt-Interaktionen ≥ 44 × 44 px. Einige Inline-Buttons in Feedback-Detailansichten: ~36 px (WCAG 2.2 AA empfiehlt 24 px Minimum – erfüllt; 44 px Ziel nicht überall erreicht). |
| 2.3.3 Animation bei Interaktion (AAA) | Konform | @media (prefers-reduced-motion: reduce) deaktiviert alle CSS-Animationen und Übergänge global. |
Prinzip 3 – Verständlich
| Kriterium | Status | Anmerkung |
|---|---|---|
| 3.1.1 Sprache der Seite (A) | Konform | Alle Seiten: <html lang="de">. Englisch-Übungen deklarieren Texte nicht per lang-Attribut (bekannte Einschränkung). |
| 3.3.1 Fehlererkennung (A) | Konform | Fehler-Container mit role="alert" aria-live="polite" auf allen Login-Seiten. Fehlerbeschreibungen in Klartext. |
| 3.3.2 Beschriftungen oder Anweisungen (A) | Konform | Alle Formularfelder haben sichtbare Labels oder sr-only-Labels. Pflichtfelder sind kenntlich gemacht. |
Prinzip 4 – Robust
| Kriterium | Status | Anmerkung |
|---|---|---|
| 4.1.2 Name, Rolle, Wert (A) | Teilweise | Alle Buttons und Links mit aria-label oder sichtbarem Text. ARIA-Radiogroups und Tabs korrekt. Canvas-Elemente mit role="img". Komplexe dynamische Inhalte (KI-Antworten) werden per aria-live-Region angekündigt. |
| 4.1.3 Statusmeldungen (AA) | Konform | Toast-Nachrichten: role="status" aria-live="polite". Fehlermeldungen: role="alert" aria-live="polite". KI-Loading-States: role="status". |
4. Bekannte Einschränkungen
Einschränkung 1: Englische Texte ohne lang-Attribut
Betroffen: Alle englischen Aufgabentexte (mediation.html, writing.html, listening.html, francais-mediation.html u. a.)
WCAG: 3.1.2 Sprache von Teilen (AA)
Auswirkung: Screenreader lesen englische Passagen mit deutscher Aussprache vor.
Geplante Behebung: Q2 2026 – automatische lang-Attribut-Setzung über Template-System.
Workaround: Nutzer können in ihrem Screenreader die Sprache manuell umschalten.
Einschränkung 2: KI-generierte Hörtexte ohne sofortiges Transkript
Betroffen: listening.html (Listening-Comprehension-Trainer)
WCAG: 1.2.1 Nur-Audio (A)
Auswirkung: Gehörlose Nutzer können den Hörtext nicht ohne Transkript verstehen. Das Transkript wird erst nach erstem Abspielen im Abschnitt „Hörtext-Transkript" angezeigt.
Geplante Behebung: Q2 2026 – Transkript wird parallel zur Audiogenerierung angezeigt.
Workaround: Nach dem Laden der Aufgabe ist das Transkript über die <details>-Schaltfläche „Hörtext-Transkript anzeigen" zugänglich.
Einschränkung 3: Aufgaben-Charts (Material-Diagramme) ohne semantische Datenbeschriftung
Betroffen: Fachseiten mit statistischen Aufgaben (Biologie, Geographie, Geschichte u. a.)
WCAG: 1.1.1 Nicht-Text-Inhalt (A)
Auswirkung: Dynamisch generierte Aufgaben-Charts werden von Screenreadern als generisches Bild angesagt, ohne Datenwerte.
Geplante Behebung: Q2 2026 – Chart.js aria-label-Generierung aus Datenpunkten.
Workaround: Die Aufgabenstellung enthält stets eine Textzusammenfassung der Daten neben dem Diagramm.
Einschränkung 4: Touch-Targets in Inline-Feedback-Buttons
Betroffen: Kolloquiumstrainer – Bewertungs-Buttons im Feedback-Bereich
WCAG: 2.5.5 Zielgröße (WCAG 2.2 AA-Empfehlung: 44 × 44 px)
Auswirkung: Einige Buttons messen ca. 36 × 36 px und sind auf Tablets schwerer präzise zu treffen.
Geplante Behebung: Q2 2026 – Padding-Anpassung im Tailwind-Layout.
Hinweis: WCAG 2.2 fordert als Minimum 24 × 24 px (erfüllt). 44 px ist eine Empfehlung (AAA-Level bei WCAG 2.2).
5. Alternativen & Umgehungslösungen
Falls bestimmte Inhalte aufgrund der oben genannten Einschränkungen nicht zugänglich sind, bieten wir auf Anfrage folgende Alternativen an:
- Bereitstellung von Aufgabentexten als barrierefreies PDF auf Anfrage
- Texttranskripte für Listening-Aufgaben auf Anfrage per E-Mail
- Individuelle Unterstützung bei der Nutzung einzelner Funktionen
- Anpassung von Klassen-Einstellungen durch Lehrkräfte über das Dashboard
Kontaktieren Sie uns dafür unter der unten angegebenen Adresse.
6. Feedback & Kontakt
Wenn Sie Mängel in Bezug auf die barrierefreie Gestaltung von myAbiFlow bemerken, können Sie uns dies mitteilen. Wir bemühen uns, auf Rückmeldungen innerhalb von 7 Werktagen zu reagieren und festgestellte Mängel innerhalb angemessener Frist zu beheben.
myAbiFlow UG (haftungsbeschränkt)
Verantwortlich für Barrierefreiheit: Daniel Zahnweh
Karolingerstraße 12B, 82205 Gilching
E-Mail: barrierefreiheit@myabiflow.de (alternativ: info@myabiflow.de)
Telefon: 015679 785995 (Mo–Fr 9–17 Uhr)
Bitte schildern Sie in Ihrer Nachricht möglichst genau, welche Funktion oder welcher Inhalt nicht zugänglich ist, und welches Hilfsmittel Sie verwenden (z. B. VoiceOver unter iOS, NVDA unter Windows).
7. Schlichtungsverfahren
Wenn Sie auf Ihre Anfrage innerhalb von 6 Wochen keine zufriedenstellende Antwort erhalten haben, können Sie die Schlichtungsstelle für barrierefreie Informationstechnik einschalten:
Schlichtungsstelle nach § 16 BFSG
Bundesfachstelle Barrierefreiheit beim ITZBund
Internet: www.bundesfachstelle-barrierefreiheit.de/schlichtung
E-Mail: schlichtungsstelle@bfit-bund.de
Das Schlichtungsverfahren ist für Sie kostenlos. Es besteht keine Pflicht zur Teilnahme am Verfahren.
8. Prüfmethodik & Zeitplan
Zuletzt durchgeführte Prüfung
- Datum: 17. März 2026
- Methode: Kombination aus automatisierter Prüfung (axe-core 4.11.1) und manueller Sichtprüfung
- Werkzeuge: axe DevTools (Browser-Extension), VoiceOver (macOS/iOS), Tastaturnavigation, Chrome Lighthouse
- Geprüfte Seiten: ethik.html, ethik-abitur.html, biologie-abitur.html sowie Stichproben aus allen Seitenkategorien
- Ergebnis: 0 automatisch erkannte axe-Violations auf geprüften Seiten
Nächste planmäßige Prüfung
September 2026 oder nach wesentlichen Änderungen der Anwendung.
Erstellungsdatum dieser Erklärung
17. März 2026