The Accessible eStore
On Global Accessibility Awareness Day (May 16, 2019), Publicis Sapient is launching the Accessible eStore, an iterative, interactive prototype of an e-commerce storefront. Read on for more details…
The State of Accessibility in E-Commerce
Last year I published an article on Medium on the State of Accessibility in E-Commerce. It described the results of a series of automated and manual accessibility tests performed on some popular and successful e-commerce retail stores. The results were depressing. Most of the sites had significant barriers to accessibility. Please check out that article then come back and read this one.
I did the same tests again this year, and am glad to report some significant improvements. Keyboard accessibility has improved. There are fewer instances of animations that cannot be paused. More link labels are descriptive. More form error messages are reported by the screen reader, and forms are a bit easier to fill out. I grade the experiences using a letter grading system that is popular in Canada, where percentages are translated into letter grades:
- Less than 50% = F,
- 50%-60% = D,
- 60%-70% = C,
- 70%-80% = B,
- 80%-90% = A, and
- 90%-100% = A+.
Here are last year’s results compared to this year’s results, for 10 popular and successful e-commerce retailers:
Screen reader barriers were not reduced since 2017 tests. In 2017 and 2018, 60% of retailers tested had significant barriers to screen reader users in their site’s design and code. There are still forms where error messages are not announced, and navigation systems that have significant barriers for screen reader users.
While the situation may seem tenable now that most of the experiences have an A or B grade, keep in mind that all of these experiences would likely get an A+ grade for a mouse pointing device. Disabled users, who may navigate with a keyboard, screen reader, or other type of assistive technology, deserve an equivalent experience.
Recap on why website content remains inaccessible
People who design and develop websites usually use a mouse pointing device to navigate, so it is hard for them to create an experience that works well with a keyboard, screen reader, or other assistive device.
I often ask this question: Would you ask someone who had only ever driven a car to design or build the perfect bike? Probably not. But we ask designers and developers to do this all the time.
Accessible design and development are not taught in many schools. There are examples of accessible practices online, but they aren’t maintained perfectly, and it’s hard to tell which methods are the best ones to employ. There has been no trusted resource available with all of the answers.
What we are doing about it
On Global Accessibility Awareness Day this year, Publicis Sapient is launching the Accessible eStore, 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.
We wanted to provide a living example that explores accessible design and code paradigms that was built with accessibility first. In the real world, there are so many requirements and variables in e-commerce design and development that affect design and code. We wanted to create a place that had only one requirement — that the content be accessible.
We dreamed of sharing a functioning product that people could play with to experience how accessibility can manifest itself through hidden way-finding cues, accessible labels, and keyboard techniques.
We hope that you will visit our prototype and try using it with your keyboard and screen reader. We plan to maintain it in the future, and to keep evolving it as we receive feedback from users around the world. Our intent is to provide a resource for making content accessible. Today it includes a product listing page and a product details page. Soon it will also include the cart and checkout experiences. You can access it here:
