---
title: "Barrierefreiheit im Checkout"
slug: "accessibility-1"
description: "Barrierefreiheit im Frisbii Media Checkout verbessert: Kontrast, Labels, Fieldsets, Überschriften und Screenreader-Unterstützung optimiert."
updated: 2025-07-31T07:32:23Z
published: 2025-07-31T07:32:23Z
canonical: "help.frisbii.com/accessibility-1"
---

> ## 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 Checkout

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

## Alter Checkout

### Allgemeine Änderungen

1. #### Kontrast-Probleme

- Geänderte Farbe für Anmerkungen in Formularen: #94949c → #67676a
- Geänderte Link- und Schaltflächenfarbe: #148dde → #0376c3

1. #### Fehlende Formularbeschriftung

- Alle Bedienelemente mit entsprechenden Beschriftungen versehen

1. #### Fehlende Fieldsets

- Checkboxen und Radiobuttons korrekt gruppiert

1. #### Falsche Formularbeschriftung

- Labels korrekt zugewiesen

1. #### Flash-Nachricht

- Überschrift von <h3> zu <h2> geändert
- Kontrast der „Prüfung abgeschlossen“-Überschrift verbessert

1. #### Seitebereiche

- Header-Bereich korrigiert

### App-weite Korrekturen

- Kontrastprobleme bei Anmerkungen und Links behoben
- Kontrastproblem mit der Bestätigungsschaltfläche behoben

### Seitenspezifische Korrekturen

1. #### Zahlungsmethoden-Formulare

- Kontrast bei Beschriftungen und Eingabefeldern verbessert
- Fehlende Labels ergänzt
- Falsch verknüpfte/doppelte Labels korrigiert
- <fieldsets> für Checkboxen hinzugefügt
- Zusätzliche Screenreader-Hinweise eingefügt

1. #### Auswahl der Zahlungsmethoden

- <span> zu <h2> geändert
- Kontrast verbessert

1. #### Seitenleiste

- Kontrast auf Preisfarben
- Leere Tabellenüberschriften ergänzt
- Linkfarbe angepasst

1. #### Altersüberprüfung

- Tabindex-Reihenfolge korrigiert
- Eingabefeld richtig beschriftet
- Titel-Attribute für Hilfetexte hinzugefügt
- <fieldset> um Radiobuttons ergänzt
- Überschriften und Struktur verbessert

1. #### Gutscheineinlösung

- Kontrastprobleme bei Label und Text
- Lesereihenfolge für Screenreader korrigiert
- Überschrift von <h3> auf <h2> korrigiert

1. #### Produkt bereits gekauft

- Kontrast der Fehlermeldungsüberschrift angepasst

---

## Neuer Checkout

### Allgemeine Änderungen

1. #### Kontrast-Probleme

- Die hellgraue Farbe für Anmerkungen in Formularen wurde von #94949c zu #67676a geändert, um den Kontrast zu verbessern.
- Link- und Button-Farbe wurde von #148dde zu #0376c3 geändert.

1. #### Übersprungene Überschriftenebenen

- Die Überschriftenstruktur wurde angepasst, um das Überspringen von Ebenen zu vermeiden (z. B. <h5> direkt nach <h2>)

1. #### Fehlende Formularbeschriftungen

- Alle Formularsteuerelemente haben jetzt entsprechende Labels.

1. #### Fehlende Fieldsets

- Zusammengehörige Checkboxen und Radiobuttons wurden in <fieldset>-Elemente gruppiert.

1. #### Verwaiste Formularbeschriftungen

- Alle Labels wurden korrekt den jeweiligen Steuerelementen zugewiesen.

1. #### Flash-Nachricht

- Überschrift von <h3> auf <h2> geändert und Kontrast der "Prüfung abgeschlossen"-Überschrift verbessert.

1. #### Seitenbereiche

- Header-Bereich korrigiert, role="main" zum Hauptcontainer hinzugefügt

### App-weite Korrekturen

- Kontrastprobleme in Annotationen und Links behoben
- Kontrastproblem beim Bestätigungs-Button behoben

### Seitenspezifische Korrekturen

1. #### Bestellseite

- Allgemeine Korrekturen:
  - Fehler bei der aria-role-Zuweisung behoben
- Zahlungsmethoden-Formulare
  - Kreditkarte
    - Kontrastproblem bei der Beschriftung und dem Text des Eingabefelds behoben
  - iDEAL
    - Kontrastproblem bei der Beschriftung und dem Text des Eingabefelds behoben
    - Fehlendes Label ergänzt
  - Rechnung
    - Kontrastproblem bei der Beschriftung und dem Text des Eingabefelds behoben
    - Doppelte Labels und Eingabefelder wurden behoben, indem ein Präfix hinzugefügt wurde – je nachdem, ob es sich um ein privates (B2C) oder geschäftliches (B2B) Feld handelt
    - Falsch verknüpfte Labels wurden korrigiert
    - Die Checkboxen wurden in ein korrektes fieldset-Element eingefasst
    - Für das Straßennummern-Feld wurde eine zusätzliche Erklärung für Screenreader ergänzt
  - PayPal
    - Kontrastproblem bei der Beschriftung und dem Text des Eingabefelds behoben
  - SEPA
    - Kontrastproblem bei der Beschriftung und dem Text des Eingabefelds behoben
  - Amazon Pay
    - Kontrastproblem bei der Beschriftung und dem Text des Eingabefelds behoben
- Auswahl der Zahlungsmethode
  - Überschrift geändert von <span> zu <h2>
  - Kontrast verbessert
  - Der Link „ändern“ wurde mit einem title-Attribut ergänzt, um zusätzliche Informationen für Screenreader bereitzustellen
- Rechnungsadressauswahl
  - Überschrift geändert von <span> zu <h2>
  - Kontrast verbessert
  - Der Link „ändern“ wurde mit einem title-Attribut für Screenreader ergänzt
- Seitenleiste
  - Kontrastproblem bei der Preisfarbdarstellung behoben
  - Warnung zur Tabellenstruktur behoben, indem eine leere Tabellenüberschrift ergänzt wurde
  - Linkfarbe korrigiert

1. #### Altersprüfung

- Tabindex so gesetzt, dass die Tabulatorreihenfolge korrekt ist
- Beschriftung für das Zahlen-Eingabefeld korrigiert – Hilfetext als Title-Attribut für Screenreader ergänzt
- Überschriftenebene korrigiert
- Unnötige <p>-Elemente rund um die Beschreibung entfernt
- fieldset-Element um die Radiobuttons hinzugefügt
- Überschriftenebene für Stripe Identity Check korrigiert

1. #### Gutscheineinlösung

- Kontrastproblem bei der Beschriftung und dem Text des Eingabefelds behoben
- Problem mit der Vorlesereihenfolge des Links „weiter einkaufen“ für Screenreader behoben
- Fehlerhafte Überschrift von <h3> auf <h2> korrigiert und Kontrast verbessert

1. #### Produkt bereits gekauft

- Fehler beim Überschriftenkontrast behoben