Creating Inclusive Experience with WooCommerce
Fahad Lambate – Associate Accessibility Director (CPWA)
Athira Mohanan – Associate Accessibility QA Specialist (WAS)
A11y in Brief
Allowing
People
to use any
thing, product or service in the way
that they want, using the way they want,
using the tool they want
Accessibility + E-commerce = Success
Increased Reach
Customer Satisfaction
Legal Compliance (ADA, Sec 508, EN 301 549, EAA …)
Improves Brand Loyalty
What is WooCommerce
Open-source WordPress Plugin for eCommerce
Accessibility & WooCommerce
Default WooCommerce Accessibility
Screen Reader Compatibility
Semantic HTML Markup
Keyboard Navigation
Customizable Elements
ARIA (Accessible Rich Internet Applications) Support
Limitations
Inconsistent Keyboard Navigation
Form Validation Errors
Lack of Skip Links
Custom Plugins and Themes
Alt Text on Product Images not enforced
Manual Changes on new update
Choosing accessible WooCommerce-compatible themes
WordPress Accessibility-Ready Feature
WooCommerce-Specific Themes
Popular Accessible WooCommerce Themes
E-Commerce – WooCommerce Core Developers
Storefront
Blog, News, E-commerce Store, Portfolio, Business site, and much more
GeneratePress
Neve
Zakra
Blocksy
Blog, News or Personal Podcast/Portfolio
Period
Simone
Apex
Founder
Principles of Designing Inclusive WooCommerce Stores
Color
Accessible Color Scheme
Not conveying information with only color
Alt Text & Product Descriptions
Based on Image Type
Alt text impacts both accessibility and SEO
Adding textual description for image
Structure
Headings
Lists
Tables
Landmarks
Layout and Design
Consistent Navigation
Responsive
Resize & Reflow
Orientation
Logical Reading Order
Custom Elements
Name
Role
Value
Accessible Name
Interactive Elements (e.g., Buttons, Links and so on)
Describing Purpose
Not Identical
Not Ambiguous
Keyboard Navigation
Reachable
Operable
Visual Focus Indicator
Logical Focus Order
Focus Management
Accessible Forms
Visually Labelled Controls
Grouped Controls
Programmatic & Descriptive Errors
Required Instructions
Visual Cues
Progress Information (Multi Step Form)
Focus Management
Allow session time extension
Dynamic Updates
Live Regions
Focus Management
Avoid Context Change – On input or focus
Instructions
Multimedia
Captions
Transcripts
Audio Descriptions
Avoid Flashing Content
Testing and Improving WooCommerce Accessibility
Manual & Automated
Design Reviews
User Testing
Audits
Accessibility tools (Extensions or Bookmarklets)
Tips
Review Demo Sites
Stay Updated
Flexible Customization Options
Compatible with Page Builders (e.g., Elementor or Gutenberg)
Prioritize Accessibility Early
Questions & answers
Contact Us
Reach out to us at
Fahad Lambate