Checkoutable: Accessible Cart & Checkout for WooCommerce

Description

Checkoutable fixes accessibility errors in the WooCommerce cart and checkout – both the classic pages (shortcodes [woocommerce_cart] and [woocommerce_checkout]) and the cart and checkout blocks. It changes the actual markup and behavior of the pages, so screen reader and keyboard users can complete an order.

It is made for shops in the EU that have to meet the European Accessibility Act (in Germany: BFSG), which refers to WCAG 2.1 AA and EN 301 549.

No overlay. Checkoutable adds no toolbar, no accessibility button and no font size switcher. Visitors do not have to do anything – the fixes work in the background.

Nothing breaks. Every fix can be switched off individually under WooCommerce → Accessibility. Fixes that change the look of your shop are off by default.

Lightweight. One small script (about 6–7 KB gzipped) and stylesheet, loaded only on the cart and checkout pages, and only the part for the kind of page (classic or blocks). The scripts do not require jQuery for their own logic; on classic pages they only listen to WooCommerce’s existing events, on block pages they use WooCommerce’s data stores.

What WooCommerce already does well

WooCommerce 9 and later already handles many things correctly, for example the error summary after a failed checkout with links to the fields, aria-invalid on fields with errors and complete autocomplete attributes. Checkoutable does not duplicate these features. It only fixes what is still missing. The fixes are based on automated tests (axe-core) and a review of the markup with Storefront and Twenty Twenty-Five, with and without Germanized. Each fix says on the settings page whether it applies to the classic pages, the blocks or both.

Fixes

On by default:

• Announce the total after updates (classic, blocks) – after the cart, the shipping method, a coupon or the checkout has been updated, screen readers announce the new total, e.g. “Shipping method: Pickup. Total: €34.00”. WCAG 4.1.3 Status Messages.
• Keep focus after updates (classic, blocks) – if an update removes or hides the focused element (e.g. after applying a coupon), keyboard focus goes back to the same control or a sensible replacement instead of the top of the page. WCAG 2.4.3 Focus Order, 2.1.1 Keyboard.
• Error messages when leaving a field (classic, blocks) – classic checkout fields that are left empty or filled in incorrectly get a text message, linked to the field for screen readers; WooCommerce otherwise shows only a red border. In the checkout block, the existing error messages are linked to their fields (the block only uses aria-errormessage, which many screen readers ignore). WCAG 3.3.1 Error Identification, 3.3.3 Error Suggestion, 1.4.1 Use of Color.
• Names for country and state fields (classic) – the searchable selects (selectWoo) no longer contain an unnamed text box, e.g. in the optional state field. WCAG 4.1.2 Name, Role, Value.
• Quantity fields named per product (classic) – WooCommerce names every quantity field “Product quantity”. Screen readers now hear “Quantity of [product]”. Plus/minus buttons added by themes get names, too. WCAG 2.4.6 Headings and Labels, 4.1.2 Name, Role, Value.
• Space key for link buttons (classic) – the coupon toggle “Click here to enter your code” and other links that act as buttons react to the Space key. WCAG 2.1.1 Keyboard, 4.1.2 Name, Role, Value.
• Shipping and payment methods as groups (classic) – both lists become named radio groups. WCAG 1.3.1 Info and Relationships.
• Mark required checkboxes (classic) – required checkboxes such as terms and conditions or the legal checkboxes of Germanized are announced as required. WCAG 3.3.2 Labels or Instructions, 4.1.2 Name, Role, Value.
• Valid autocomplete values (blocks) – the checkout block marks the email field with an invalid autocomplete value; the invalid part is removed so browsers and assistive technology recognize the field. WCAG 1.3.5 Identify Input Purpose.
• No false “no payment methods” announcement (blocks) – while the checkout block loads, screen readers hear “There are no payment methods available” for a moment, although payment methods are shown right after (a timing error in WooCommerce). Checkoutable holds back exactly this announcement and makes it only if there really is no payment method. WCAG 4.1.3 Status Messages.

Off by default, because they change the look of your shop:

• Explain the asterisk (classic) – shows “Fields marked with * are required.” above the billing details. WCAG 3.3.2 Labels or Instructions.
• Visible focus outline (classic) – a 3 px focus outline in a color of your choice. The settings page warns if the color has less than 3:1 contrast against white. WCAG 2.4.7 Focus Visible, 1.4.11 Non-text Contrast.
• Contrast of notices and order summary (classic, blocks) – darker colors for WooCommerce notices, the order summary and struck-through prices, at least 4.5:1. Designed for light themes such as Storefront. WCAG 1.4.3 Contrast (Minimum).

Compatibility

• Classic cart and checkout (shortcodes) and the cart and checkout blocks. Some fixes only exist for one of them, because the problem only exists there; the settings page shows where each fix applies.
• Tested with Storefront and Twenty Twenty-Five, with and without Germanized for WooCommerce.
• Compatible with High-Performance Order Storage (HPOS).

Privacy

Checkoutable does not track anything, does not send data to external services and does not set cookies. The only data it stores are its settings.