Title: Checkoutable: Accessible Cart & Checkout for WooCommerce Author: Thorsten Kötzsch Published: October 5, 2026 Last modified: October 5, 2026 --- Search plugins ![](https://ps.w.org/checkoutable/assets/banner-772x250.png?rev=3729493) ![](https://ps.w.org/checkoutable/assets/icon-256x256.png?rev=3729493) # Checkoutable: Accessible Cart & Checkout for WooCommerce By [Thorsten Kötzsch](https://profiles.wordpress.org/inqiro/) [Download](https://downloads.wordpress.org/plugin/checkoutable.1.2.0.zip) * [Details](https://wordpress.org/plugins/checkoutable/#description) * [Reviews](https://wordpress.org/plugins/checkoutable/#reviews) * [Installation](https://wordpress.org/plugins/checkoutable/#installation) * [Development](https://wordpress.org/plugins/checkoutable/#developers) [Support](https://wordpress.org/support/plugin/checkoutable/) ## 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. ## Screenshots [⌊Settings page under WooCommerce → Accessibility: every fix can be switched on and off, with its WCAG success criteria.⌉⌊Settings page under WooCommerce → Accessibility: every fix can be switched on and off, with its WCAG success criteria.⌉[ Settings page under WooCommerce Accessibility: every fix can be switched on and off, with its WCAG success criteria. [⌊Illustration of what a screen reader announces after changing the shipping method in the checkout. The live region itself is invisible; the dark box only shows its text for this screenshot.⌉⌊Illustration of what a screen reader announces after changing the shipping method in the checkout. The live region itself is invisible; the dark box only shows its text for this screenshot.⌉[ Illustration of what a screen reader announces after changing the shipping method in the checkout. The live region itself is invisible; the dark box only shows its text for this screenshot. ## Installation 1. Install and activate WooCommerce. 2. Install Checkoutable via _Plugins Add New_ or upload the ZIP file, then activate it. 3. Open _WooCommerce Accessibility_ to review the fixes. The recommended fixes are already active. ## FAQ ### Is this an overlay? No. Overlays put a toolbar or a script on top of your site and try to repair it while visitors use it. Checkoutable fixes the markup and behavior of the WooCommerce cart and checkout directly. There is no toolbar, no button and nothing visitors have to switch on. ### Does this make my shop compliant with the BFSG / European Accessibility Act? It fixes errors in the cart and checkout, but it does not replace an audit of your whole shop. Your theme, your product pages, your content and other plugins have to be accessible, too. Use Checkoutable as one part of making your shop accessible, and have the shop tested. ### Does it work with the cart and checkout blocks? Yes, since version 1.1. The blocks already handle several things well (e.g. named quantity fields and grouped payment options), so fewer fixes are needed there. Checkoutable fixes what is still missing: error messages linked to their fields, the total announcement, focus after coupon updates, the email field’s autocomplete value and a false “no payment methods” announcement. The settings page shows for each fix whether it applies to the classic pages, the blocks or both. ### Will it change the look of my shop? Not with the default settings. The fixes that are on by default only change markup and behavior that you do not see, with one exception: on the classic checkout, error messages appear as text below fields, in the same style WooCommerce uses after submitting. Three fixes change colors or add visible text; they are off by default and marked on the settings page. ### Can I switch off single fixes? Yes. Every fix has its own switch under _WooCommerce Accessibility_. ### Does it work with Germanized? Yes. Checkoutable is tested with Germanized for WooCommerce, including its legal checkboxes in the checkout. ### Which languages are included? The plugin is written in English. Translations are provided through translate.wordpress. org; German (informal de_DE and formal de_DE_formal) is being submitted there. ### Does it slow down my shop? No noticeable effect. Checkoutable loads one script of about 6–7 KB (gzipped) and a small stylesheet, and only on the cart and checkout pages. It makes no extra requests to your server. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Checkoutable: Accessible Cart & Checkout for WooCommerce” is open source software. The following people have contributed to this plugin. Contributors * [ Thorsten Kötzsch ](https://profiles.wordpress.org/inqiro/) [Translate “Checkoutable: Accessible Cart & Checkout for WooCommerce” into your language.](https://translate.wordpress.org/projects/wp-plugins/checkoutable) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/checkoutable/), check out the [SVN repository](https://plugins.svn.wordpress.org/checkoutable/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/checkoutable/) by [RSS](https://plugins.trac.wordpress.org/log/checkoutable/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.2.0 * New for developers: the function checkoutable_fixes() and the filter of the same name list all fixes with their WCAG criteria and whether they are enabled. * New for developers: the front-end script reports what the fixes did on a page( Checkoutable.status() and the event checkoutable:status). No change in behavior. * The settings page links to the optional PDF report add-on (Checkoutable Pro). #### 1.1.0 * New: support for the cart and checkout blocks. * Blocks: error messages are linked to their fields via aria-describedby (WCAG 3.3.1). * Blocks: the total is announced after cart, coupon and shipping updates (WCAG 4.1.3). * Blocks: keyboard focus is kept after applying or removing a coupon (WCAG 2.4.3). * Blocks: new fix “Valid autocomplete values” for the email field (WCAG 1.3.5). * Blocks: new fix “No false ‘no payment methods’ announcement” (WCAG 4.1.3). * Blocks: the optional contrast fix also covers the checkout block’s order summary and struck-through prices. * The settings page shows where each fix applies (classic / blocks). #### 1.0.0 * First release: eleven fixes for the classic WooCommerce cart and checkout, settings page, German translations (informal and formal). ## Meta * Version **1.2.0** * Last updated **9 hours ago** * Active installations **Fewer than 10** * WordPress version ** 6.5 or higher ** * Tested up to **7.1.2** * PHP version ** 7.4 or higher ** * Tags * [a11y](https://wordpress.org/plugins/tags/a11y/)[accessibility](https://wordpress.org/plugins/tags/accessibility/) [checkout](https://wordpress.org/plugins/tags/checkout/)[wcag](https://wordpress.org/plugins/tags/wcag/) [woocommerce](https://wordpress.org/plugins/tags/woocommerce/) * [Advanced View](https://wordpress.org/plugins/checkoutable/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/checkoutable/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/checkoutable/reviews/) ## Contributors * [ Thorsten Kötzsch ](https://profiles.wordpress.org/inqiro/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/checkoutable/)