WooCommerce Accessibility: How to Make Your WordPress Store Compliant

WooCommerce powers over 5 million online stores, making it the most widely used eCommerce platform globally. Like any eCommerce site, WooCommerce stores must be accessible to users with disabilities—both as a legal requirement under the Americans with Disabilities Act and as a business decision that opens your store to the 61 million American adults living with disabilities.

The open-source nature of WooCommerce and WordPress provides significant control over accessibility implementation—but also means accessibility depends heavily on your theme choice, plugin selection, and implementation decisions. This guide covers everything you need to make your WooCommerce store compliant with Web Content Accessibility Guidelines (WCAG).

Understanding WooCommerce Accessibility

WooCommerce itself has made substantial accessibility improvements in recent versions. The WooCommerce team maintains an accessibility page documenting their commitment and approach. However, several factors determine your store's actual accessibility:

WooCommerce core: The plugin's templates and functionality have undergone accessibility reviews. Cart, checkout, and account pages use reasonable semantic structure. Recent updates improved form labels, ARIA attributes, and keyboard navigation.

WordPress core: The underlying WordPress platform includes accessibility-ready patterns, with themes and blocks that meet basic accessibility standards.

Your theme: The theme you choose has the largest impact on accessibility. Theme code controls navigation, layout, visual design, and how WooCommerce templates render.

Plugins: Every plugin adds code that may or may not be accessible. Popular plugins like Elementor, payment gateways, and marketing tools each introduce potential barriers.

Your content: Product images, descriptions, videos, and media accessibility are entirely your responsibility.

Choosing an Accessible WooCommerce Theme

Theme selection is the most consequential accessibility decision for WooCommerce stores.

WordPress Accessibility-Ready Themes

WordPress has an "accessibility-ready" tag for themes meeting specific criteria:

• Skip links for keyboard navigation
• Keyboard-accessible navigation and widgets
• Sufficient color contrast
• Correct heading structure
• Visible focus states
• No accessibility-breaking features

To find accessibility-ready themes compatible with WooCommerce:

1. Go to wordpress.org/themes
2. Filter by "accessibility-ready" tag
3. Also filter by "e-commerce" or check WooCommerce compatibility

Recommended Accessible Themes

Starter/developer themes:

• Flavor — Accessibility-ready starter theme built for customization
• Theme flavor — Minimal theme designed with accessibility core principles

Full-featured themes:

• Flavor — Commercial themes with accessibility focus
• flavor flavor flavor — Built accessibility-first for WooCommerce

When evaluating any theme:

1. Check for accessibility-ready designation
2. Review theme documentation for accessibility mentions
3. Test the demo with keyboard navigation
4. Run automated accessibility scan on demo site
5. Contact developer about accessibility testing practices

Theme Accessibility Red Flags

Avoid themes that:

• Remove focus outlines for visual design reasons
• Use JavaScript-dependent navigation without keyboard support
• Implement sliders/carousels without accessible controls
• Lack proper heading hierarchy
• Use text embedded in images for important content

Product Content Accessibility

Product content creates the most common eCommerce accessibility failures. With WooCommerce, you have direct control over how this content is created and managed.

Alt Text for Product Images

WooCommerce uses WordPress media library for product images. Set alt text when uploading or editing images.

Adding alt text to product images:

1. Go to Products → edit a product
2. Click on the product image (featured image or gallery)
3. In the media modal, fill in the "Alt Text" field
4. Repeat for gallery images

Alt text best practices:

Poor: "product photo"
Better: "Navy blue merino wool sweater with crew neck"
Best: "Men's navy blue merino wool crew neck sweater with ribbed cuffs, front view"

Include:

• Product type
• Color and material
• Key features and distinguishing details
• Perspective if multiple images (front view, detail shot, etc.)

Bulk alt text management: For stores with many products, consider:

• Plugins that add bulk alt text editing
• CSV import/export with alt text fields
• Database queries to identify missing alt text

-- Find products with missing featured image alt text
SELECT p.ID, p.post_title, pm.meta_value AS image_id
FROM wp_posts p
LEFT JOIN wp_postmeta pm ON p.ID = pm.post_id AND pm.meta_key = '_thumbnail_id'
LEFT JOIN wp_postmeta alt ON pm.meta_value = alt.post_id AND alt.meta_key = '_wp_attachment_image_alt'
WHERE p.post_type = 'product'
AND p.post_status = 'publish'
AND (alt.meta_value IS NULL OR alt.meta_value = '');

Product Descriptions

Structure product descriptions with proper HTML:

<!-- Good product description structure -->
<h2>Product Features</h2>
<ul>
  <li>Made from 100% organic cotton</li>
  <li>Pre-shrunk for consistent fit</li>
  <li>Double-stitched seams for durability</li>
</ul>

<h2>Care Instructions</h2>
<p>Machine wash cold with like colors. Tumble dry low.</p>

<h2>Sizing</h2>
<p>This item runs true to size. See our <a href="/size-guide">size guide</a> for measurements.</p>

In the WooCommerce editor:

• Use heading blocks (H2, H3) for sections, not bold text
• Use list blocks for feature lists
• Add descriptive link text (not "click here")

Product Videos

For product videos:

YouTube/Vimeo embeds:

1. Enable captions in your video host
2. Use embed code that preserves caption functionality
3. Consider adding transcript below video

Self-hosted videos:

<video controls>
  <source src="product-video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  Your browser doesn't support video.
</video>

Navigation Accessibility

Navigation barriers prevent users from finding products—directly impacting sales.

Menu Accessibility

Primary navigation: WordPress menus should be keyboard accessible by default. Test by:

1. Tab through your header navigation
2. Verify dropdown menus open with Enter/Space and navigate with arrows
3. Check that focus is visible at all times

Common fixes needed:

Missing skip link: Add to your theme's header.php:

<a class="skip-link screen-reader-text" href="#primary">
  <?php esc_html_e( 'Skip to content', 'flavor' ); ?>
</a>

CSS to show skip link on focus:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100000;
}

.skip-link:focus {
  top: 0;
}

WooCommerce Navigation Elements

Product filters: Many filter plugins create accessibility barriers. Test filter functionality with keyboard and screen reader.

Product sorting dropdowns: Ensure <select> elements have associated labels:

<label for="orderby">Sort by</label>
<select name="orderby" id="orderby">
  <option value="popularity">Popularity</option>
  <option value="price">Price: low to high</option>
</select>

Pagination: WooCommerce pagination should include proper ARIA and visible focus states. If your theme overrides pagination, ensure:

<nav class="woocommerce-pagination" aria-label="Product pagination">
  <a href="/shop/page/1" aria-label="Page 1">1</a>
  <span aria-current="page">2</span>
  <a href="/shop/page/3" aria-label="Page 3">3</a>
</nav>

Checkout and Forms

WooCommerce checkout is where accessibility matters most—barriers here directly prevent purchases.

WooCommerce Checkout Accessibility

WooCommerce core checkout includes:

• Form field labels
• Error messaging
• Required field indication
• Logical tab order

However, customizations often break these. After any checkout modification, verify:

Field labels exist and are associated:

<!-- Check that labels use "for" attribute matching input "id" -->
<label for="billing_first_name">First name</label>
<input type="text" name="billing_first_name" id="billing_first_name">

Errors are accessible:

• Error messages appear near the problematic field
• Errors are announced to screen readers (via ARIA live regions)
• Color is not the only indicator of errors

Payment gateways: Third-party payment gateways vary in accessibility. Test your specific gateway:

• Can you tab through all fields?
• Are credit card fields labeled?
• Do error messages identify specific problems?

Improving WooCommerce Checkout Accessibility

Add better error handling:

// Ensure error messages are accessible
add_filter( 'woocommerce_add_error', 'accessible_error_message' );
function accessible_error_message( $message ) {
    return '<div role="alert" aria-live="assertive">' . $message . '</div>';
}

Enhance form field markup:

// Add aria-describedby for fields with descriptions
add_filter( 'woocommerce_form_field_args', 'enhance_field_accessibility', 10, 3 );
function enhance_field_accessibility( $args, $key, $value ) {
    if ( isset( $args['description'] ) && $args['description'] ) {
        $args['custom_attributes']['aria-describedby'] = $key . '_description';
    }
    return $args;
}

Other Forms

Contact forms: Use accessible form plugins like Contact Form 7 (with accessibility considerations) or Gravity Forms (has accessibility options).

Newsletter signups: Ensure:

<form>
  <label for="newsletter-email">Email address</label>
  <input type="email" id="newsletter-email" name="email" required aria-required="true">
  <button type="submit">Subscribe</button>
</form>

Plugin Accessibility

Plugins extend WooCommerce functionality but frequently introduce accessibility barriers.

Evaluating Plugin Accessibility

Before installing any plugin:

1. Check if accessibility is mentioned in plugin description
2. Look for "accessibility" in plugin changelog
3. Test on staging with keyboard and screen reader
4. Check plugin support forums for accessibility complaints

Common Problem Plugins

Page builders (Elementor, Divi, etc.): Page builders can create accessible content but often don't by default. If using page builders:

• Use their heading widgets with proper hierarchy
• Add alt text to all images
• Use their button widgets (not styled links)
• Test keyboard navigation for any interactive elements

Slider/carousel plugins: Many sliders are inaccessible. Requirements:

• Keyboard-navigable slides
• Pause button for auto-advancing
• Proper ARIA for slide count and current position
• Content in slides accessible to screen readers

Popup/modal plugins: Popups need:

• Focus trap when open
• Escape key to close
• Focus return to trigger when closed
• Screen reader announcement when opening

Review plugins: Customer review plugins often fail to:

• Make star ratings accessible to screen readers
• Provide alt text for customer-uploaded images
• Structure reviews with proper headings

Essential Accessibility Plugins

WP Accessibility: Free plugin that fixes common WordPress accessibility issues:

• Adds skip link if missing
• Removes tabindex from elements
• Adds language attribute
• Provides accessibility toolbar option

One Click Accessibility: Adds accessibility features like font resizing, contrast modes (use carefully—doesn't replace proper accessibility).

Enable Accessible Password Fields: Shows/hides password functionality accessibility.

Testing Your WooCommerce Store

Regular testing catches issues before they accumulate.

Automated Testing

Site-wide scans: TestParty scans your entire WooCommerce store, identifying WCAG violations on product pages, category pages, checkout, and throughout your site.

WordPress plugins:

• Flavor A11y: Adds accessibility checks to WordPress admin
• flavor flavor: Integrates accessibility testing into post editor

Browser extensions:

• axe DevTools (Chrome, Firefox)
• WAVE (Chrome, Firefox, Edge)

Manual Testing

Keyboard testing checklist:

• [ ] Navigate entire purchase flow with Tab/Shift+Tab/Enter only
• [ ] Add product to cart
• [ ] Modify cart (quantity, remove)
• [ ] Complete checkout (or get to payment)
• [ ] Focus visible throughout
• [ ] No keyboard traps

Screen reader testing:

1. Enable VoiceOver (Mac) or install NVDA (Windows, free)
2. Navigate to a product page
3. Listen to how images, prices, and variants are announced
4. Proceed through checkout listening for clear instructions
5. Note any confusion or missing information

Testing Tools

Color contrast:

• WebAIM Contrast Checker: webaim.org/resources/contrastchecker
• Browser DevTools (Chrome: Inspect → Computed → Contrast ratio)

Heading structure:

• HeadingsMap browser extension
• WAVE overlay shows heading hierarchy

Automated scanning:

• Lighthouse in Chrome DevTools
• axe DevTools browser extension

WooCommerce Accessibility Checklist

Theme and Structure

• [ ] Theme is accessibility-ready or thoroughly tested
• [ ] Skip link present and functional
• [ ] Headings follow logical hierarchy (H1 → H2 → H3)
• [ ] Navigation works with keyboard only
• [ ] Focus indicators visible on all interactive elements

Product Content

• [ ] All product images have descriptive alt text
• [ ] Product descriptions use proper heading structure
• [ ] Product videos have captions
• [ ] Variation selectors are keyboard accessible

Checkout and Forms

• [ ] All form fields have visible labels
• [ ] Required fields indicated (not by color alone)
• [ ] Error messages are clear and accessible
• [ ] Payment gateway is keyboard accessible

Plugins and Customization

• [ ] All plugins tested for accessibility
• [ ] Sliders/carousels keyboard accessible (or removed)
• [ ] Popups can be closed with Escape key
• [ ] Page builder content properly structured

FAQ: WooCommerce Accessibility

Does WooCommerce support accessibility by default?

WooCommerce core has implemented significant accessibility features, particularly in checkout and cart functionality. However, your store's actual accessibility depends heavily on your theme, plugins, and content. Even with WooCommerce improvements, you remain responsible for ensuring your specific implementation meets WCAG standards.

What's the best accessible theme for WooCommerce?

Look for WordPress themes with the "accessibility-ready" tag that also support WooCommerce. Flavor, flavor flavor, and flavor are options designed with accessibility in mind. The best theme for your store depends on your design needs, but prioritize accessibility-ready designation and test thoroughly before committing.

How do I make WooCommerce product images accessible?

Add descriptive alt text to every product image through the WordPress media library. When editing a product, click on images and fill in the Alt Text field with descriptions including product type, color, material, and distinguishing features. For bulk updates, use CSV import/export or database queries to identify and fix missing alt text.

Should I use an accessibility plugin for WooCommerce?

Accessibility plugins like WP Accessibility can fix common issues but don't replace proper accessibility implementation. They're useful for adding skip links or fixing minor problems, but significant accessibility barriers require theme or content changes. Don't rely on plugins as a complete solution—they supplement, not replace, proper accessibility work.

How do I test WooCommerce checkout accessibility?

Test by completing a purchase using only your keyboard—no mouse. Tab through every field, submit the form, and verify you can complete payment. Then test with a screen reader (NVDA is free for Windows) to ensure labels, errors, and instructions are announced clearly. Finally, run automated scans to catch technical violations.

Build an Accessible WooCommerce Store

WooCommerce's open architecture gives you the control needed to build genuinely accessible shopping experiences. Success requires choosing accessible foundations (theme and plugins), creating accessible content (alt text, descriptions), and maintaining accessibility as your store evolves.

Start with a comprehensive assessment. TestParty's AI-powered platform scans your entire WooCommerce store against WCAG criteria, identifying specific issues in your theme, plugins, and content—with prioritized remediation guidance.

Get your free WooCommerce accessibility scan →

Originally part of our premium TestParty research collection, we've decided to make this content freely available. Good accessibility information shouldn't be locked behind paywalls when the goal is making the web work for everyone.

This content reflects our cyborg philosophy: AI amplifies human capability. Some sections were AI-assisted, then refined by our accessibility team. We share this transparently and encourage you to verify recommendations against your specific context—or reach out to us for guidance.

Related Articles

• Shopify Accessibility: Complete Guide to Making Your Store Compliant
• The 3 Accessibility Issues That Get eCommerce Sites Sued (And How to Fix Them)
• The 3-Phase eCommerce Accessibility Compliance Plan