---
title: "Accessibility in Checkout"
slug: "accessibility-1"
updated: 2025-08-22T08:46:36Z
published: 2025-08-22T08:46:36Z
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.

# Accessibility in Checkout

Changes we made to ensure accessibility in our Frisbii Media Checkout.

## Legacy Checkout

### General Changes

1. #### Contrast Issues

- Changed color for annotations in forms: #94949c → #67676a
- Changed link and button color: #148dde → #0376c3

1. #### Missing Form Labeling

- Provided all control elements with corresponding labels

1. #### Missing Fieldsets

- Grouped checkboxes and radio buttons correctly

1. #### Wrong Form Labeling

- Assigned lables correctly

1. #### Flash-Message

- Changed header from <h3> to <h2>
- Improved contrast of the “Test completed” headline

1. #### Page Areas

- corrected header area

### App-Wide Corrections

- Fixed contrast problems with annotations and links
- Fixed contrast problem with the confirmation button

### Page-Specific Corrections

1. #### Payment Methods Forms

- Improved contrast for labels and input fields
- Added missing labels
- Incorrectly linked/duplicate labels corrected
- Added <fieldsets> for checkboxes
- Added additional screen reader notes

1. #### Selection of Payment Methods

- Changed <span> to <h2>
- Improved contrast

1. #### Sidebar

- Contrast on price colors
- Added empty table headings
- Adjusted link color

1. #### Age Verification

- Corrected tabindex order
- Labeled Input field correctly
- Added title attributes for help texts
- <fieldset> supplemented with radio buttons
- Improved headers and structure

1. #### Voucher Redemption

- Contrast problems with label and text
- Corrected reading order for screen readers
- Corrected header from <h3> to <h2>

1. #### Product already bought

- Adjusted contrast of the error message heading

---

## New Checkout

### General Changes

1. #### Contrast Issues

- Changed the light grey color used as annotation on forms from #94949c to #67676a to improve contrast.
- Switched link and button color from #148dde to #0376c3

1. #### Skipped Heading Levels

- Adjusted heading structure to avoid skipping levels (e.g., using <h5> directly after <h2>)

1. #### Missing Form Labels

- Ensured all form controls have corresponding labels

1. #### Missing Fieldsets

- Grouped related checkboxes and radio buttons within appropriate <fieldset> elements

1. #### Orphaned Form Labels

- Ensured all form labels are correctly associated with their respective form controls

1. #### Flash message

- Updated <h3> to <h2> and fixed contrast for “check completed” heading

1. #### Page regions

- Fixed page region for header and added role main to main container

1. #### Deactivated buttons

- Deactivated buttons are visible and readable by screenreaders, tabulators and keyboard navigation.

### App-Wide Fixes

- Fixed contrast issues in annotation and links
- Fixed contrast issue on the submit button

### Page-Specific Fixes

1. #### Order Page

- General fixed:
  - Aria role fix
- Payment Methods forms
  - Credit card
    - Fixed contrast issue on the input label and text
  - iDEAL
    - Fixed contrast issue on the input label and text
    - Added label
  - Invoice
    - Fixed contrast issue on the input label and text
    - Fixed duplicated labels and inputs by adding prefix if the field is private (B2C) or company (B2B)
    - Fixed miss-connected labels
    - Fixed fieldset for checkboxes
    - Fixed street number for reader adding explanation
  - PayPal
    - Fixed contrast issue on the input label and text
  - SEPA
    - Fixed contrast issue on the input label and text
  - Amazon Pay
    - Fixed contrast issue on the input label and text
- Payment methods selection
  - Heading changed from <span> to <h2>
  - Fixed contrast
  - “change” link - added title for screen reader for additional information
- Invoice address selection
  - Heading changed from <span> to <h2>
  - Fixed contrast
  - “change” link - added title for screen reader for additional information
- Sidebar
  - Fixed contrast issue on the price color text
  - Fixed layout table alert by adding empty table header
  - Fixed link color

1. #### Age Rule Page

- Set “tabindex” to have correct tab order
- Fixed label for number input - added help text as title for a screen reader
- Fixed heading level
- Removed unnecessary <p> elements around description
- Added fieldset around radio buttons
- Fixed heading lever for Stripe Identity check

1. #### Redeem Voucher Page

- Fixed contrast issue on the input label and text
- Fixed screen reader reading on “continue shopping” link
- Heading changed from <h3> to <h2> and contrast

1. #### Product already bought

- Fixed error heading contrast