Accessibility in Checkout

  • Published on Jul 31, 2025
Prev Next

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

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

Related articles