What makes a checkout inaccessible?
An online store can look polished and still be unusable for someone navigating only with a keyboard or relying on a screen reader. Most of the time, the problem is not on the product page, it is in the checkout, exactly where conversion happens.
A recent study done by the Contensquare Foundation found that 94% of the largest ecommerce sites in Europe still have inaccessible checkout flows.
Every inaccessible field, unclear label, or unannounced error message can quietly turn an interested customer into an abandoned cart.
The 3 most common ecommerce accessibility failures
- Form fields without visible labels. Name, address, and card fields often rely on placeholder text alone. That is not enough, because placeholder text disappears as users type, and WCAG 3.3.2 explicitly requires labels or instructions for inputs.
- Buttons built as generic clickable elements. “Add to cart” or “Complete order” controls are sometimes styled as divs instead of native interactive elements, which can make them unreachable by keyboard users.
- Error messages that are not tied to the relevant field. When validation errors are not programmatically associated with the field in question, screen reader users may not understand what went wrong. WCAG 3.3.1 covers this directly.
How to fix checkout accessibility without redesigning everything
Correctly labeling form fields, using native elements like <label> , <button> , and <a> instead of styled divs, and connecting error messages clearly to each field can remove most of these blockers without changing your design.
The good news is that WordPress already places strong emphasis on accessibility. WordPress.org states clearly that the project aims for WCAG 2.2 AA where possible, and that new or updated code is expected to follow WordPress accessibility standards. That does not mean every WordPress site is automatically accessible, though. Your theme, forms, and custom blocks are still your responsibility.
That is why it is worth checking forms, keyboard navigation, and field labels in particular. WordPress recommends properly built forms with valid HTML, visible labels, and clear instructions, while W3C guidance explicitly says placeholder text is not a replacement for a real label. If you have lead, contact, or checkout forms on a WordPress site, that is often where the first blockers appear.
Shopify is also moving in the same direction and states that it continuously tests its services against WCAG 2.2 Level AA. That is useful context, but it still does not mean your specific theme, apps, or custom checkout experience are automatically compliant.
Why WordPress and Shopify stores still need manual checks
Platform accessibility is a helpful foundation, but it is not the same as end-to-end compliance. A WordPress theme can introduce poor contrast, broken focus states, or inaccessible form markup. A Shopify store can still inherit accessibility issues from apps, custom sections, or third-party scripts.
That is why platform-level accessibility should be treated as a starting point, not a finish line. The real test is whether a user can complete the journey from product view to checkout without friction.
How to check your checkout in 10 minutes
You do not need a full manual audit to get started. A quick review of the live checkout can reveal the biggest blockers fast:
- Run the Accessibility Checker on the live checkout page, not just the homepage.
- Try completing the entire checkout flow using only the Tab key, with no mouse.
- Submit the form empty and check whether errors appear clearly next to the right field.
- Check whether every input has a visible label, not just a placeholder.
- Verify that the focus state is always visible as you move through the flow.
If you want to reduce common usability blockers without waiting for a full development cycle, the Accessibility Widget can help at the interface level. For teams that want to make sure a future theme or plugin update does not reopen the same issues, our Accessibility Monitor helps track accessibility over time.
FAQ
How do I make my online store accessible?
Start by scanning the critical pages, product, cart, and checkout, against WCAG 2.2, then fix labels, contrast, keyboard navigation, and error handling.
Does checkout need to be accessible?
Yes. Under the European Accessibility Act, ecommerce services must meet accessibility requirements based on EN 301 549 and WCAG, and checkout is a core part of that service flow.
Is Shopify accessible by default?
Not fully. Shopify gives you a solid base, but apps, themes, and custom checkout modifications still need review.
Is WordPress accessible by default?
No. WordPress provides a strong accessibility foundation, but your theme, forms, and custom blocks can still introduce barriers.
What is the fastest way to check accessibility?
Run an automated scan on the live checkout, then test the flow manually with only the keyboard and by submitting an empty form.
Scan your store for free → scan.wawsome.com
Sources:
- Contentsquare Foundation, Can everyone complete a checkout?
- W3C, Understanding SC 3.3.1: Error Identification
- W3C, Understanding SC 3.3.2: Labels or Instructions
- Shopify, Accessibility Statement
- WordPress, developer documentation