Ä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:
Hinzufügen von verstecktem Text innerhalb des Links/Buttons (nur für Screenreader sichtbar), oder
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.