WordPress and WooCommerce accessibility: themes, plugins and checkout

What "accessibility-ready" means

In the WordPress theme directory, an accessibility-ready theme has passed a manual accessibility review by a member of the Accessibility Team against the theme accessibility guidelines. The theme team states that the tag does not mean the theme meets WCAG AA, because WCAG measures content and cannot be applied to a theme alone. Themes can be re-reviewed and lose the tag.

Treat the tag as a better starting point. Then test your actual pages with your actual content, plugins and page builder.

Where problems usually come from

• Page builders and block patterns: headings chosen for size, not order; empty links around images; buttons that are not real buttons.
• Plugins: sliders, popups, cookie banners, form builders and mega menus often add keyboard traps and unlabeled controls.
• Media: images with missing or filename alt text, video without captions, scanned PDFs.
• Custom CSS: removing the focus outline or lowering contrast (focus guide).

WooCommerce specifics

WooCommerce says its cart, product and checkout blocks are built with accessibility in mind, and its release notes describe work on markup, form error handling and keyboard navigation across cart, galleries and checkout. It also notes that older shortcode-based and deprecated blocks may have more limited accessibility support, and encourages merchants to move to the newer blocks. See accessibility features in WooCommerce. Payment gateways and add-on plugins can still introduce barriers: WooPayments' own conformance report, for example, lists gaps in buy-now-pay-later flows.

The moving parts of a WordPress site

A WordPress site is built from a theme, plugins and content, and sometimes a page builder on top. Each part can help or harm accessibility, and each is maintained by different people. This is why two WordPress sites can differ greatly in how usable they are.

What the accessibility-ready tag does and does not mean

The WordPress theme directory has a tag for themes that have passed a review of accessibility requirements. It is a helpful signal that the theme developer has followed good practices for things like keyboard navigation, skip links, forms and contrast. It does not cover your content or your plugins, and it does not mean your final site meets a standard. Test your own site.

Fixes that make the most difference

1. Keep the focus outline. Many themes remove it. Restore a clear one. See keyboard focus.
2. Choose a theme that supports a skip link and landmarks. Visitors should be able to jump to the main content.
3. Write alternative text as you upload images. The media library has a field for it.
4. Use heading blocks for headings. Do not use bold text as a heading.
5. Choose form plugins that label fields properly, and test them.
6. Check contrast in the theme customizer for text, buttons and links.
7. Test any slider, tab or accordion plugin with a keyboard, or replace it with simple content.

WooCommerce: product, cart and checkout

WooCommerce adds product pages, a cart, a checkout and an account area. Most of what applies to any store applies here, with a few particular points. Variation dropdowns and swatches need labels and keyboard operation. Cart updates and coupon messages should be announced, not only displayed. The checkout form is made of many fields that need clear labels, errors and autocomplete attributes. Many shops add payment plugins and shipping calculators that bring their own markup, so test the full purchase from product to confirmation. For a general approach, see the ecommerce accessibility checklist.

Updates, staging and regression checks

Updates can change how a page behaves. If possible, test updates on a staging copy first, then repeat the keyboard test on your key templates and run a scan before publishing. Keep a note of the date and results. This gives you a record that is useful if a customer or a regulator asks what you have done.

Accessibility plugins

Some WordPress plugins offer scanning inside the dashboard, and others add a toolbar for visitors. A scanner plugin can help you find problems, but it cannot judge meaning, and a toolbar does not change your pages. Use these as aids and not as substitutes. See overlays explained.

Choosing plugins with accessibility in mind

Every plugin that adds something visitors see or use is a potential source of problems. Choosing carefully at the start saves time later.

1. Look at the plugin's page for any mention of accessibility, and read reviews and support threads for complaints.
2. Test the demo or a staging copy with the keyboard.
3. Check that forms, filters and popups have labels and visible focus.
4. Prefer plugins that use standard HTML elements over custom widgets.
5. Check the plugin is updated regularly and that the developer answers questions.
6. Limit the number of plugins. Each one adds more to test.

Block editor habits

The WordPress block editor makes it easier to produce well-structured content, if it is used well. Use heading blocks in order, list blocks for lists and table blocks with header cells for tables. Add alternative text in the image block's sidebar. Use the button block with text that says what happens next. When you embed a video, add captions in the video's own settings or provide a transcript. The editor's list view shows the structure of the page, which helps you review headings quickly.

Page builders

Page builders give design freedom, and some produce more complicated markup than the block editor. Test your pages built this way with a keyboard and a screen reader. Watch for tab and accordion elements that do not announce their state, sliders without pause controls, and headings added only for style. If a builder element causes problems, replace it with a simpler one. Because builders have their own update cycles, retest after updates.

Forms and payment fields

Form plugins vary in quality. Look for visible labels, clear instructions, error messages near the field, and keyboard-friendly date pickers and dropdowns. CAPTCHA tools can block people who cannot see or solve a puzzle, so choose options that offer alternatives, or consider a different anti-spam method. Payment fields supplied by a provider are often embedded; test them with a keyboard and a screen reader, and contact the provider about any problem.

A seasonal routine for WordPress owners

Common questions from WordPress site owners

• My theme is tagged accessibility-ready. Why do scans still find issues? The tag covers the theme code. Content, plugins and your customizations add their own issues.
• Is it safe to remove the CSS that hides the focus outline? Yes, and it is the right thing to do. Replace it with a clear outline instead of nothing.
• Can I use a free plugin to scan my pages? Yes, as a helper. It cannot judge meaning. Combine it with manual tests.
• What about multilingual sites? Set the language of each page correctly and translate alternative text, labels and error messages.
• Do I need to fix old posts? Prioritize the pages visitors use most: home page, key landing pages, contact and shop. Fix old posts as you update them, or in bulk where you can.

A cleanup plan for an existing WordPress site

The effort figures are rough guides for a small site and will vary. The point is the order: find, fix the shared parts first, then the content, then confirm.

A worked example: a small WooCommerce shop

A seller of plants runs WooCommerce with a popular multipurpose theme, a page builder, a reviews plugin and a pop-up plugin for discounts. A scan shows missing labels on the checkout postcode field, images without descriptions, low-contrast sale badges and several links with no names. A keyboard test reveals that the pop-up cannot be closed and that the product tabs do not respond to arrow keys.

The owner works with a developer. They restore the focus outline in the theme's custom CSS, change the sale badge color, add alt text to product images in batches, replace the pop-up plugin with a simple banner and swap the product tabs for plain sections under headings. The checkout field labels are fixed by a small template override. A retest shows the main journey now works with a keyboard and a screen reader. The cost is a few days of developer time and a lower number of plugins to maintain, which helps with speed and security as well.

When to replace instead of repair

Some themes and plugins are built in ways that make accessibility fixes difficult. If you find that every fix needs heavy custom code, or that the vendor ignores reports, it may be cheaper in the long run to switch to a better-built theme or plugin. Compare the cost of repeated repairs against the cost of a replacement, and test any replacement before you commit.

Multisite, agencies and shared hosting

If you manage several WordPress sites, keep a shared checklist and a shared set of tested components, such as a child theme with a good focus style, a form plugin you have tested and a standard statement page. This lets you apply fixes across sites quickly. If you are an agency, record which theme and plugin versions you have tested, so you can say what a client's site was built on if questions arise.

Keep the basics in front of you: a theme with a visible focus style, headings and landmarks, alternative text on images, labeled forms and fewer plugins. If you get those right and test after each update, a WordPress site can be as accessible as any other.

A checklist

1. Choose a theme with the accessibility-ready tag when you can, and keep it updated.
2. Scan the home page, a post, a product page, the cart and checkout (free scan).
3. Complete a purchase using only the keyboard. Note anywhere focus is lost or hidden.
4. Use real heading levels, descriptive link text and alt text in the block editor (alt text, links).
5. Test each plugin that adds visible interface: forms, popups, sliders, consent banners. Remove or replace those that break keyboard use.
6. Switch classic shortcode checkout to the blocks-based cart and checkout if your setup allows it, then retest.
7. Add an accessibility statement and rescan after every plugin or theme update.

A widget or plugin that adds a toolbar does not replace these fixes. Read accessibility overlays explained before adding one. Agencies maintaining many WordPress sites can see how Agency Pass handles client checks.