Accessibility ⚡️ eCommerce
I have experience making large eCommerce sites accessible. I’ve authored style guides and best practices that have helped disparate teams achieve WCAG success criteria.
Accessibility is not so much a destination as it is a journey.
In order for improvements to stand the test of time, there must be a company culture that supports accessibility and be willing to make it a requirement even when faced with competing priorities. For example, imagine explaining to an art director that the brand colors cannot be perceived by the colorblind. Imagine telling an SEO consultant that there are too many characters in an alt attribute. These can be awkward conversations if a11y is not prioritized within the organization.
Ecom sites are particularly challenging because they are always changing. Product information and imagery are managed within a CMS, therefore, there is always a risk of newly-added content being inaccessible. Ideally this situation would be addressed with a cyclical audit. That is a web crawler that captures a11y issues throughout the entire site. Similarly an a11y audit could run as part of automated unit testing upon software build or check in.
Finding a11y issues during development is preferred but keep in mind the developers will require more time to become proficient in this discipline and the project estimates should reflect that.
Another challenge for ecom sites is interaction complexity. Components such as carousels, mini shopping carts, and promotional popup dialogs are transitional and difficult to describe to the visually impaired. The fact that these interactions are actuated with JavaScript makes it impractical to test automatically. I’ve found the best way to find and fix these types of interactions is with a screen reader and then applying state-full ARIA patterns attributes as needed.
The Basics
Here I describe a basic 5 minute audit that you can perform just to get a feeling for how accessible a page is. Common issues should be apparent when answering these questions:
- Can I navigate with the tab key and are the focus styles visible?
- Is there a Skip Link?
- Is there off-screen content that receives the focus?
- Can I add to cart with a screen reader?
- Do landmark elements / roles represent the document’s hierarchy?
There are some pretty good Chrome extensions that will give you an actionable audit without many false-positives:
- Google Lighthouse — I use Lighthouse at least daily to get a feel for not only a11y but performance as well.
- Wave — This is the WebAIM extension. What I like most about this is its ability to show you the exact line that has the issue.
- aXe — Becoming my new fav, this extension exists solely in the developer tools panel. The results are very in-depth. They also offer a command line version that can be hooked into your build script.
Achieving accessibility nirvana is not easy for an eCommerce site. Try to think of it in terms of exposing your business to a new group of shoppers who would have trouble shopping at your competitor’s site.
Thanks for reading!