ADDRESSING ACCESSIBILITY CHALLENGES IN REMEDIATING SHOPIFY WEBSITES

Global Accessibility Awareness Day, India

Global Accessibility Awarness Day

Saturday, 11th of May 2024

By Prem Nawaz Khan / @mpnkhan

WebAim - 2024 report on the accessibility of the top 1 Million home pages

Platform # of home pages Avg. # of errors
Shopify 18,420 60.4
Woocommerce 24,495 74.9
Magento 8,451 86.6

Ref: WebAim Report

Market Share of Top Ecommerce Websites

Among the top 1 million ecommerce sites globally, Shopify has the biggest piece of the pie at 29%, with 23% being regular Shopify stores and 6% being Shopify Plus stores [Style Factory - Shopify Statistics].

This emphasizes Shopify's dominance in larger, more established online stores.

Top 10 Shopify Stores 2024

https://skims.com/

InAccessible Mega menu

https://www.sanrio.com/

Painful Mega menu and Search

https://shop.bodybuilding.com/

  1. In Accessible Promo popup
  2. Painful Mega menu
  3. InAccessible Product filtering and sorting
  4. Inaccessible cart

https://www.mccormick.com/

  1. Not for Keyboard users because of Invisible Focus outline
  2. Promo popup
  3. InAccessible Modal Dialogs

Let us Remediate Focus outline for https://www.mccormick.com/

Remediation - Core Function

Remediation - Core Function

Now Let us Remediate Mega Menu for https://www.neweracap.com/

Before Remediation

Mega Menu Remediation-Insert CSS Styles

Mega Menu Remediation - Convert to Click Menu

Mega Menu Remediation - Click on Space and Enter

After Remediation

Thanks & Summary

  1. Fix issue by issue
  2. Remediate the whole site as an included JS
  3. Still fixing at source is the best

Gist

  1. Focus Outline Remediation
  2. MegaMenu Remediation