You might assume ecommerce platforms such as Shopify provide accessible websites. But that’s only partly correct.
Many moving parts impact web accessibility. Examples are the core platform, themes, add-ons, plugins, custom code, and even content creators and editors. A website meets accessibility compliance guidelines by addressing all of those parts.
Accessibility Components
Core platform. The default accessibility of most ecommerce platforms is fairly good. No platform is without some accessibility weaknesses, but most are working to mitigate them.
Sometimes mitigation involves offering alternatives. For instance, some Shopify checkout pages have accessibility barriers, but merchants can simply choose an alternative version.
Themes. Ecommerce merchants often deploy a theme for styling (colors, fonts) and functionalities beyond the core. That process can introduce accessibility hurdles and thus requires diligence on how the themes are set up, developed, or changed.
Common hurdles involve not meeting minimum guidelines for color contrast, font sizes, and distance between clickable components (especially on mobile). Some themes add forms — newsletter sign-up, contact us — with missing labels.
Add-ons and plugins. Almost every ecommerce site includes customizations to the core platform through add-ons, plugins, or custom code. Those, too, can cause accessibility obstacles.
Automated checkers such as Web Accessibility Evaluation Tools can help, but they’re not failsafe, especially for customizations. For instance, an add-on or plugin for currency conversions may lack sufficient color contrast that’s detected only by manually clicking and viewing. Keyboard navigation is another common barrier requiring human tests.
Creators and editors. The most common website accessibility barriers are improper image alt text and HTML headings from creators and editors.
Alt text can be missing entirely, redundant, or simply unhelpful. Alt text for product images requires special attention, including descriptions of visible features not part of the on-page text.
HTML headings need proper nesting. A page has one and only one H1. An H3 appears under an H2 or another H3. An H4 is only below an H3 or another H4. And so on. A heading’s font size doesn’t matter, but the order is essential for communicating the structure to visually impaired users and to Google.
(Yes, accessibility components — image alt texts and HTML headings — can improve search engine rankings!)
Training the content team on proper image alt text, HTML headings, and more is a good start toward better accessibility.
Who’s Responsible?
Site owners are ultimately responsible for accessibility, not the core platform, customizations, developers, or employees. Hence ensure all parties know you require work to meet WCAG 2.2 AA guidelines. Get that in writing. Then test it.
It’s always more cost-effective to work on accessibility proactively and continually, not forced by a lawsuit into instant sitewide remediation. But the bigger issue is revenue. A site with barriers for shoppers with disabilities is losing sales.
