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