Building a More Accessible Checkout Experience with CheckoutWC

Accessibility isn’t a feature – it’s a responsibility. At CheckoutWC, we’ve been investing in making the checkout experience more inclusive, usable, and robust for everyone.

Today, we’re excited to share a set of accessibility improvements designed to bring us closer to that goal.

---

Building a More Accessible Checkout

In an upcoming release, we’re updating the HTML output of CheckoutWC to improve:

• Screen reader support
• Keyboard navigation
• Semantic correctness

These changes aim to ensure that all users – regardless of how they interact with the web – can complete checkout flows smoothly and confidently.

To help you prepare, we’re offering an early opt-in so you can test these improvements with your current theme and customizations before they become the default.

---

What’s Changing

Here’s a summary of the key markup and semantic improvements included in the opt-in update:

More Semantic Elements

We’ve replaced non-semantic or less appropriate elements with more meaningful ones:

• The side cart button is now a <button> instead of an <a> element
• Inner side cart elements have been updated for correctness (e.g., cart quantity now uses <span> instead of <div>)
• “Remove item” actions in the side cart and checkout summary now use <button> elements instead of links
• “Continue” actions are now <button> elements rather than <a> elements

These updates ensure better compatibility with assistive technologies and improve keyboard interaction patterns.

Improved Heading Structure

Clear and consistent headings are critical for navigation:

• Section headings such as Information, Shipping Address, and Payment are now <h2> instead of <h3>

This creates a more logical document outline, especially for screen reader users.

---

Important Note on Compatibility

While these updates improve accessibility, there is a small risk for stores that rely on custom CSS or JavaScript targeting specific element types.

For example, if your customizations target the side cart button as an <a> element instead of using a class or ID selector, you may see unexpected behavior.

That’s why we’re introducing these changes as opt-in for now.

---

How to Enable the Improvements

You can enable the new accessibility enhancements using the following filter hook from v11.0.7:

add_filter( ‘cfw_enable_accessibility_improvements’, ‘__return_true’ );

We strongly recommend testing this in your staging environment to ensure compatibility with your existing setup – as they will become the default in a future major release.

---

Already Available Improvements

Some accessibility enhancements have already been safely rolled out since version 11.0.6. These updates do not affect markup structure and are fully backward-compatible:

Improved Step Announcements

• Each checkout step (Customer Information, Shipping, Payment, Order Review) now includes a focusable heading
• Headings include an id and tabindex=”-1″
• When navigating between steps, focus automatically moves to the new step heading after scrolling

This ensures screen readers clearly announce the current step.

Better Screen Reader Feedback

• Step transitions are now properly announced when navigating through checkout
• Validation errors on form fields are correctly communicated to assistive technologies

Clearer ARIA Labels

• Links and actions now use more descriptive labels
  • For example: “Change” → “Change contact information”

These improvements provide better context and clarity for users relying on assistive tools.

---

Looking Ahead

Accessibility is an ongoing effort, not a one-time update. These changes represent another step forward in making CheckoutWC more inclusive and user-friendly for everyone.

We encourage you to opt in early, test thoroughly, and share your feedback.

If you have any questions or run into issues while testing, our team is here to help.

---

Special Thanks

We’d also like to extend a sincere thank you to Phe Ledwell at WinuSoft for helping us identify and prioritize several important accessibility improvements.

Phe’s feedback played a key role in shaping these updates, and we’re incredibly grateful for the collaboration throughout the process.

“We reached out to CheckoutWC after an accessibility scan highlighted several issues that needed addressing. Their team were incredibly helpful throughout – quick to respond, open to feedback, and proactive in providing both guidance and patches where needed. They not only pointed us in the right direction with custom fixes, but also released updates that allowed us to implement accessibility improvements more reliably. It made a potentially stressful process much smoother, and we really appreciate everything they’ve done to help us pass the accessibility scan.”

Phe Ledwell – Web Developer – WinuSoft

Previous Article

How to Add a Delivery/Pickup Date and Time Picker to WooCommerce Checkout