Our Story
The Accessible eStore is an iterative, interactive prototype of an e‑commerce storefront. It explores concepts in designing and developing for the web considering accessibility first. Web accessibility is more of a journey than a destination. In that spirit, this experience will evolve based on our continued learning and user feedback.
The web needs more examples of accessible and usable design and development. We tried to make our store's typical e‑commerce components keyboard and screen-reader accessible. We hope our work starts a conversation. We want it to lead to action that accelerates the creation of accessible and usable web experiences around the world. We want to enable everyone to fully participate in online activities and engage with their communities.
Creating our store was a tremendous undertaking. We began by providing screen reader training to our creative and technical teams. This is critical. You wouldn't ask someone who had never ridden a bike to design or build a bike. But every day designers and developers are asked to stretch in exactly this way. The vast majority of designers and developers are sighted mouse-pointer users. And yet they are tasked with creating experiences that will work with a keyboard and assistive technology. We wanted to teach people to ride bicycles before we asked them to design or build them.
We collaborated with and gained insights from our non-sighted colleagues. They helped us understand their major pain points in websites that are designed for people who can use a mouse.
We then unrolled a curriculum that we call the “Accessibility Deep Dive” sessions. Each session focused on accessibility best practices for a common e‑commerce website component. For example, the global navigation menu, the product listing grid, filters, and sorting mechanisms. We considered how each of these should work for people using assistive devices.
After everyone had enough context, we began creating the store one component at a time, via a series of hackathons. In each hackathon, we paired 2 user experience designers with 2 front end developers. Each team designed and built their assigned component or set of components within 4 hours. Post-hackathon, a front-end developer compiled the components into a page, and we engaged a visual designer to help us with polish.
Truly inclusive experiences require both thoughtful design and execution. We need to grow these skills in our creative and technical teams to finally arrive at a web that is truly accessible. The demand for this skillset is growing, but web accessibility compliance strategies are not taught in most schools.
We wanted to help enable the next generation of designers and developers to create accessible experiences. Creating the store helped our internal teams. We hope that by posting our work in progress online that we have created a resource for the world to use in order to explore this important topic.
Our Team
Development
- Alison Walden, Senior Director of Technology
- Alan Evanson
- Alison Hall
- Brian Elton
- David Jackson
- Diego Escobar
- Dustin Sampson
- Gregory Smith
- Joel Brown
- Jonathan Rodness
- Kristen Nakamura
- Lisa Kuliczkowski
- Michael Simla
- Mike Quattrin
- Natasha Johnston
- Noel Tibbles
- Pauline Ramos
- Puneet Seghal
- Rene Noel
- Suvi Vignarajah
- Tolu Adegbite
- Wesley Cocks
- Yi Wang
- Zoltan Hawryluk
User Experience
- Karen Hawkins, User Experience Lead
- Alexandra Bernards
- Catherine Maritan
- Chris Norman
- Cole Wheeler
- Dewey Nguyen
- Eric Tse
- Jonas Laufenberg
- Jordan Morrison
- Kim Wright
- Nelson Truong
- Sasa Djukic
- Sylvia Wong
- Zhongfei Qian
Visual Design
- Iris Wu
- Melanie Wong
- Paulo Garcia
- Polly D'Arcy
Project Management
- Rosey Li
- Laura Beckford
The Unfulfilled Promise of the Internet
Introduction
From the late 1990s onward, the internet gradually became part of our lives, until in 2018, about 4 billion people used “the Web”. With more and more people using the internet, physical modes of content were steadily replaced by electronic modes of content. A big part of the shift was that commerce at physical locations has been replaced or augmented by e‑commerce storefronts. This shift had the potential to remove many of the barriers to communication that existed for people with disabilities in the physical world, but only if websites were designed and developed accessibly.
Over the last 25 years, there have been many technological advancements in the internet space. Human ingenuity created search engines like Google, a variety of payment systems like Paypal, Apple Pay, and bitcoin, and e‑commerce giants who have created a market where e‑commerce comprised more than 10% of US sales in 2017.
Yet our studies show that there are still no e‑commerce sites that are completely accessible and usable.
Identifying the problem
For the past several years, we have audited a selection of e‑commerce retailers for accessibility. We used automated tools and manual keyboard and screen reader tests to assess compliance.
Our results indicate that 60% of these experiences include significant accessibility barriers. These barriers would likely prevent users of assistive technologies from making a purchase online. Common issues include:
- navigation menus that are difficult to use,
- inaccessible forms,
- interactivity that is unavailable to keyboard users,
- inaccessible modal window content,
- unclear link labels, or
- coding errors that result in an excessive amounts of extra tab stops.
User flows employing search were more accessible than those employing browse techniques. For example, a mouse user could browse for curtains and then filter by color and length. However, an assistive technology user is more likely to achieve success by searching for all of the criteria (e.g. “yellow sheer curtains”). This does not present an equivalent experience.
Results have been improving year over year. But this exercise shows that accessible experiences are still trailing far behind traditional experiences, even when it comes to the world’s most high performing e‑commerce websites.
Review detailed results for this year on Medium. Link opens in a new window.Most people today can hardly conceive of life without the Internet, or without e‑commerce. But a majority of online retail stores are effectively CLOSED for this population of 770 million people in the world. This is a huge market that businesses should want to tap into, and it’s the right thing to do. We have the tools. The knowledge is out there.
What our demo is, and what it is not
- It is intended to be fully keyboard navigable and screen reader-friendly in its current state. Navigate with your tab key to discover hidden wayfinding cues, and note how we tried to provide screen reader users with the appropriate amount of context and information as they navigated through the site. Let us know if you experience any issues or have suggestions.
- It is not fully designed. Think of it as an interactive desktop wireframe right now. We are working out all of the interactions first, then applying an eye-catching design later.
- It is not fully functional at the moment. For example, right now you can’t add an item to your cart. We plan to make that work shortly. This is as far as we got for Global Accessibility Awareness Day.
- It is not representative of today’s best coding standards – yet. This code came out of multiple hackathon sessions. The point of the demo today is to showcase how an accessible e‑commerce website should feel and behave. We will clean up the code later.
- It is not perfect. We didn’t want to waste time trying to make it perfect before getting it out there. The danger would be that it would never be perfect enough. Edward de Bono said it best: “An idea that is developed and put into action is more important than an idea that exists only as an idea.”
To start using the prototype, navigate to the "Women" section using the global navigation menu, or follow this link to the Women's section.