Barrierefreiheit im Self Service

  • Veröffentlicht am Jul 31, 2025
Prev Next

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

Allgemeine Änderungen

  1. 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.

  2. 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.

  3. 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.

  4. Übersprungene Überschriftenebenen: Die Struktur der Überschriften wurde angepasst, sodass keine Ebenen übersprungen werden (z. B. keine Verwendung von <h5> direkt nach <h2>).

  5. Fehlende Formularbeschriftungen: Alle Formularelemente wurden mit passenden Labels versehen, um die Bedienbarkeit zu verbessern.

  6. Fehlende Fieldsets: Gruppen von Checkboxen oder Radiobuttons wurden in entsprechende <fieldset>-Elemente eingeschlossen, um die Barrierefreiheit zu erhöhen.

  7. Verwaiste Formularbeschriftungen: Alle Labels wurden korrekt mit den zugehörigen Formularelementen verknüpft.

  8. Verdächtiger Linktext: Links, bei denen nicht klar ist, wohin sie führen, wurden mit zusätzlichem erklärendem Text (für Screenreader) versehen.

  9. 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.

Verwandte Artikel