In today’s digital age, having an accessible website is crucial, yet it often takes a backseat to flashy visuals. With 8 million Canadians and 1.3 billion people globally living with disabilities, it's vital that e-commerce sites are accessible to everyone, regardless of their physical, cognitive, or sensory abilities. Prioritizing accessibility ensures inclusivity and broadens the reach, making the platform welcoming to all users.
Why Accessibility Matters
Key Statistics
- Shopping Frequency: People with disabilities shop online almost twice as much as the general population. While 22% of general consumers shop online at least once a week, 50% of people with disabilities shop weekly, and 6% shop daily.
- User Preferences: People with disabilities prioritize accessibility, variety, and price when choosing e-commerce platforms.
Addressing Different Types of Shoppers
Users with Visual Impairments
- Challenges:
- Reliance on color to convey important information.
- Non-descriptive images without proper captions.
- Complex forms that are hard to navigate.
- Lack of visible focus indicators.
- Inconsistent tab order.
- Poor visual design with low contrast and small fonts.
Users with Hearing Impairments
- Challenges:
- Videos relying solely on audio.
- Sound-based alerts and notifications.
- Traditional phone-based customer support.
Users with Cognitive Impairments
- Challenges:
- Complex, multi-step checkout processes.
- Sensory overload from excessive visual and auditory input.
- Generic, non-descriptive links.
- Complicated site navigation structures.
Users with Motor Impairments
- Challenges:
- Small or closely placed clickable elements.
- Difficulty completing forms due to precise movement challenges.
- Issues with small checkboxes, captchas, and lengthy forms.
Example: Walmart Checkout Process
Walmart provides a practical example of how to structure an accessible checkout process:
- Account Method Component:
- Sign in
- Continue as guest
- Delivery Method Component:
- Deliver to your address
- Pick up: by yourself or by someone else
- Shipping Component:
- Shipping address
- Payment Component:
- Enter card
- Financial options
- Review Component:
- Review and confirm your order
First Impressions:
- You can check out as a guest, providing more options.
- The user experience is smooth, and the user journey is well optimized and efficient.
- The navigation is simple, and the form grouping is effective.
- The information is straightforward, easy to read, and understand.
- The content is effective and helps prevent cognitive overload.
- The tab order can be illogical due to technological and coding choices.
Pros:
- Clear structure with good UX writing, beneficial for users with cognitive issues.
- Well-defined visual hierarchy. As you can see, I added the blur filter on, it still looks defined between sections and within each one.
- Good color contrast.
- They optimize the use of ARIA well.
- The form elements are well designed, give the balance to all users.
Cons:
- Use of drawers to sign in, which can cause issues with ad blockers and trap assistive technology users.
- Recommendations can cause cognitive load and affect screen reader functionality.
- Repeated elements or forms that should be autofilled to assist users with disabilities.
Practical Steps to Improve Accessibility
- Break Down Processes: Simplify multi-step processes, ensuring each step is easy to understand.
- Clear Content: Use simple, easy-to-understand language and avoid complex terms.
- Minimal Navigation: Keep navigation minimal and remove unnecessary elements.
- Logical Grouping: Group relevant information together to prevent cognitive overload.
- Maintain High Contrast: Ensure high contrast between text and background for better readability.
- Logical Tab Order: Ensure tab order follows a logical flow to aid keyboard navigation.
Conclusion
Making e-commerce platforms accessible is not just about compliance but about creating an inclusive environment where everyone can shop with ease. By understanding the unique challenges faced by different types of users and implementing practical solutions, businesses can enhance the shopping experience for all customers, driving both inclusivity and profitability.
In the next blog post, we will demonstrate a good UI/UX flow for the checkout process that is more accessible to people with disabilities.
Reference
- Employment and Social Development Canada. “Consulting Canadians on Accessibility.” Canada.ca. https://www.canada.ca/en/employment-social-development/programs/accessible-canada-regulations-guidance/consultation/key-concepts.html#h2.7
- Love, June Karlove. “Accessibility of E-commerce: Inclusive Shopping Experience.” June Karlove Insights. https://www.junekarlove.com/insights/accessibility-of-ecommerce-inclusive-shopping-experience
- “Accessibility Benchmark Launch.” Baymard Institute. https://baymard.com/blog/accessibility-benchmark-launch