Änderungen, die wir vorgenommen haben, um die Barrierefreiheit in unserem Frisbii Media Self Service zu gewährleisten.

Allgemeine Änderungen

Kontrastprobleme: Die Hauptfarbe (verwendet in der Hauptnavigation und an vielen anderen Stellen in der App) wurde von #18a0fb auf #00558b geändert, um den Kontrast zu verbessern.
Leere Links/Buttons: Wenn ein Link oder Button keinen Text enthält, ist dessen Funktion für Benutzer unklar. Dies kann zu Verwirrung bei Tastatur- und Bildschirmlesern führen. Behebung durch:
1. Hinzufügen von verstecktem Text innerhalb des Links/Buttons (nur für Screenreader sichtbar), oder
2. Verwendung des aria-label-Attributs.
Fehlende erste Überschriftenebene: Seiten ohne eine sichtbare <h1>-Überschrift erhalten nun ein nur für Screenreader sichtbares <h1>. Eine sichtbare Einzelüberschrift auf Seiten mit Kachelstruktur wäre im Layout nicht sinnvoll.
Übersprungene Überschriftenebenen: Die Struktur der Überschriften wurde angepasst, sodass keine Ebenen übersprungen werden (z. B. keine Verwendung von <h5> direkt nach <h2>).
Fehlende Formularbeschriftungen: Alle Formularelemente wurden mit passenden Labels versehen, um die Bedienbarkeit zu verbessern.
Fehlende Fieldsets: Gruppen von Checkboxen oder Radiobuttons wurden in entsprechende <fieldset>-Elemente eingeschlossen, um die Barrierefreiheit zu erhöhen.
Verwaiste Formularbeschriftungen: Alle Labels wurden korrekt mit den zugehörigen Formularelementen verknüpft.
Verdächtiger Linktext: Links, bei denen nicht klar ist, wohin sie führen, wurden mit zusätzlichem erklärendem Text (für Screenreader) versehen.
Redundante Verbindung: Wenn zwei benachbarte Links auf dieselbe Zielseite führen, wurde einer entfernt oder zusammengelegt.

App-weite Korrekturen

Kontrastprobleme in der Hauptnavigation behoben.
aria-label-Attribute zu den „Zurück“- und „Weiter“-Paginierungslinks hinzugefügt (zuvor war dort kein Text vorhanden). Der „Weiter“-Link wird als angezeigt, wenn die letzte Seitenzahl bereits angezeigt wird.
Kontrastproblem beim „Zurück“-Button behoben.
Im mobilen Menü wurde der Button zum Ein-/Ausklappen (ohne sichtbaren Text) mit einem versteckten <span> für Screenreader ausgestattet.

Seitenspezifische Korrekturen

1. Übersichtsseite

aria-label für Rechnungs-Download-Links ergänzt.
Kachel-Überschriften von <h2> auf <h1> geändert.
„Mehr“-Link aus dem Bereich „Benutzerverwaltung“ entfernt, wenn „Benutzer verwalten“-Link sichtbar ist
Versteckter <span> mit erläuterndem Linkziel-Text für Screenreader zu allen „Mehr“-Links hinzugefügt

2. Persönliche Daten

Nur für Screenreader sichtbare globale <h1>-Überschrift hinzugefügt.
Kontrast des Buttons „Zwei-Faktor-Authentifizierung“ verbessert.
aria-label zum „Ändern“-Link hinzugefügt.

3. Adressen

Leerer Link zur Adresserstellung behoben.
Unsichtbare globale <h1>-Überschrift ergänzt.
Überschrift im Modul „Zukünftige Adressänderungen löschen“ von <h5> auf <h1> geändert.

4. Adresse erstellen/bearbeiten

Radiobuttons zur Adresstyp-Auswahl und Checkboxen zu Abonnements wurden in <fieldset>-Elemente eingefasst.

5. Zahlungsdaten

Fehlende <h1> Überschrift ergänzt.
Abschnittsüberschriften zu einzelnen Zahlungsmethoden von <h4> auf <h1> geändert.

6. Kreditkarte hinzufügen

Fehlende <h1> Überschrift ergänzt.
Fehlendes Label für das versteckte Feld „payoneCheck“ ergänzt.
Verwaistes Label „Kartennummer“ wurde in ein span geändert, da das Ziel-Element innerhalb eines iframes liegt.

7. Zahlungsmethode zum Abonnement hinzufügen

Vorhandenes <h2> wurde zum <h1> für den Haupttitel geändert.

8. Abonnements

Unsichtbare globale <h1>-Überschrift hinzugefügt.
Abschnittsüberschriften „Abonnements“ und „Einkäufe“ von <h2> auf <h1> geändert.
Falsch eingesetztes aria-labelledby in mobiler Ansicht der Einkäufe entfernt.
aria-label zum Titel des Kaufcode-Dialogfensters hinzugefügt.
Verdächtiger Linktext im Addon-Detail-Link durch versteckten erläuternden Text ergänzt.
Layout-Tabelle durch CSS-basiertes Tabellen-Layout ersetzt.

9. Abo pausieren/kündigen/Lieferpause (und Rückgängig-Seiten)

Haupttitel von <h2> auf <h1> geändert.

10. Bankkonto hinzufügen/ändern

Titel von <h2> auf <h1> geändert.

11. PayPal-Konto hinzufügen/ändern

Titel von <h2> auf <h1> geändert.

12. Benutzerverwaltung

Unsichtbare globale <h1> Überschrift ergänzt.
aria-label zu CSV-Download-Links in der Paginierung hinzugefügt.

13. Benutzerverwaltung - Benutzer verwalten

Vorhandene <h2> auf <h1> geändert.
Dialogfenster-Überschriften von <h5> auf <h1> geändert.
aria-label-Attribute zu Benutzer-Aktions-Buttons (einladen, löschen, alle einladen) ergänzt.
aria-label-Attribute zu Suchfeld und Eingabefeldern im „Benutzer einladen“-Dialogfenster ergänzt.

14. Wallets-Seite

Unsichtbare <h1>-Überschrift ergänzt.
Verdächtiger Linktext durch versteckten erläuternden Text ergänzt.

15. E-Mail ändern/Bestätigungscode/Persönliche Daten ändern/Passwort ändern

Überschriften <h2> zu <h1> geändert.

16. Kündigungsprävention

Alle <h2>-Überschriften zu <h1>, <h3> zu <h2> geändert.

17. Abo-Kündigung

Transparenz beim Platzhalterwert der Kündigungsdatums-Auswahl entfernt.

18. Passwort ändern

role="button" und aria-label zum Sichtbarkeits-Symbol (Auge) hinzugefügt.

	Einzelprodukt
	Abonnement
	verbrauchsbasiertes Abonnement
	verbrauchsbasiertes Einzelprodukt
	Zeitpass
	Zeitbasiert
	Ausgabenbasiert
	Geschenkgutschein
	Multi-User
	Produkt(e)
	Stufen
	Bundle(s)
	Lieferliste
	Tag
	Cross-Client
	Missbrauchsschutzregel
	Cross-Selling
	Up-/Down-Selling
	Altersbedingte Regel

Icons in der Angebotsliste