---
title: "Barrierefreiheit im Self Service"
slug: "accessibility"
description: "Frisbii Media Self Service: Verbesserte Barrierefreiheit durch Kontraste, klare Überschriften, Labels, Fieldsets und Screenreader-Unterstützung."
updated: 2025-07-31T07:28:44Z
published: 2025-07-31T07:28:44Z
canonical: "help.frisbii.com/accessibility"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.frisbii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Barrierefreiheit im Self Service

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