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

2. Fehlende Formularbeschriftung

• Alle Bedienelemente mit entsprechenden Beschriftungen versehen

3. Fehlende Fieldsets

• Checkboxen und Radiobuttons korrekt gruppiert

4. Falsche Formularbeschriftung

• Labels korrekt zugewiesen

5. Flash-Nachricht

• Überschrift von <h3> zu <h2> geändert

• Kontrast der „Prüfung abgeschlossen“-Überschrift verbessert

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

2. Auswahl der Zahlungsmethoden

• <span> zu <h2> geändert

• Kontrast verbessert

3. Seitenleiste

• Kontrast auf Preisfarben

• Leere Tabellenüberschriften ergänzt

• Linkfarbe angepasst

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

5. Gutscheineinlösung

• Kontrastprobleme bei Label und Text

• Lesereihenfolge für Screenreader korrigiert

• Überschrift von <h3> auf <h2> korrigiert

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

2. Übersprungene Überschriftenebenen

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

3. Fehlende Formularbeschriftungen

• Alle Formularsteuerelemente haben jetzt entsprechende Labels.

4. Fehlende Fieldsets

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

5. Verwaiste Formularbeschriftungen

• Alle Labels wurden korrekt den jeweiligen Steuerelementen zugewiesen.

6. Flash-Nachricht

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

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

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

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

4. Produkt bereits gekauft

• Fehler beim Überschriftenkontrast behoben