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

Legacy Checkout

General Changes

Contrast Issues

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

Missing Form Labeling

Provided all control elements with corresponding labels

Missing Fieldsets

Grouped checkboxes and radio buttons correctly

Wrong Form Labeling

Assigned lables correctly

Flash-Message

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

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

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

Selection of Payment Methods

Changed <span> to <h2>
Improved contrast

Sidebar

Contrast on price colors
Added empty table headings
Adjusted link color

Age Verification

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

Voucher Redemption

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

Product already bought

Adjusted contrast of the error message heading

New Checkout

General Changes

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

Skipped Heading Levels

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

Missing Form Labels

Ensured all form controls have corresponding labels

Missing Fieldsets

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

Orphaned Form Labels

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

Flash message

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

Page regions

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

App-Wide Fixes

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

Page-Specific Fixes

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

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

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

Product already bought

Fixed error heading contrast

Releases KW26-2025

C.250625-MINOR

🔧Improved