Web Accessibility case study: Magento 2 Alpaca Theme

This case study describes how we invited a user who is blind into our office to use and test our open source Magento 2 theme.

Clara Shen
Jun 11, 2019 · 7 min read

Accessibility user testing at SNOW.DOG Poznań HQ

Image for post
Accessibility user testing at SNOW.DOG Poznań HQ

Every website should be accessible, meaning available and functional for all users, no matter how they reach the web. At Snowdog, we do our best to make each project accessible by default, especially those that are open source. To ensure the quality of our a11y work, we invited a user who is blind to test some sites. Our open source project Alpaca provides the core code base to some of our clients’ Magento stores, so it was a priority for us to test this. You can explore the Alpaca theme on our stage at this link.

Image for post
Alpaca Magento 2 Theme

Project aims and what we learned

We do our best to develop great websites and apps that are accessible from the beginning, and by designing and developing inclusively. However, it’s quite tricky to test websites from a user point of view, let alone from a user with permanent or temporary disabilities.

Even if I tested our solution with a screen reader, it’s not the same, because people with disabilities used assistive technologies (AT) in daily life to operate the whole system, not only a web content, they know a lot of tricks, shortcuts and features that are hard to adopt by a tester in short time and use them efficiently. Nothing can replace a live testing session with a user.

Ania Karoń (workshop coordinator)

That’s why we invited Przemek, who very kindly agreed to come into our office for a session of testing some of our internal and live projects. With him, we were able to test our websites to see how our implementations were doing in terms of a11y, and educate our team about it. It showed us some of our successes but importantly highlighted for us the problem areas we need to improve on. Przemek gave us a new perspective and we’re sure in the future this will help us empathize even more with our clients and users.

Overall, it was a very useful session, and we can recommend organizing such workshops no matter how big or small your agency is.

The tester

Przemek is 29 years old, congenitally blind, and does not use a computer during his day job. He uses the web regularly on Windows with NVDA and a smartphone running Android and TalkBack, mainly for reading articles (news, blogs), and social media (Facebook on mobile view only). He also buys things like music, books, tickets for sporting events, but not clothes, and uses his phone for navigation, maps and transport schedules. In his free time he likes to play both in browser and native app games — his favourite game is Football Manager ⚽️.

This information gave us a bit of background and general idea of Przemek’s technology usage and skill level, and what his priorities and needs would be when using the web and finding relevant content.

What and how did we test?

Alpaca is an open source Magento 2 theme built by Snowdog’s front-end team, and follows design systems principles. It is built on top of its own open source components library and menu module which was designed and developed in house. The Magento version being tested was 2.3. We use Alpaca components for many projects, and for us it’s important to keep testing and reviewing the theme so that it constantly improves.

Before Przemek arrived, we prepared some test scenarios, data and tasks, such as:

  • Placing an order as a guest
  • Creating a customer account and logging out
  • Logging in to an existing account
  • Placing an order as a logged in user

When it came to our actual testing session, we adopted a more informal and flexible approach. Przemek was talkative and interactive, so led the exploration as we watched, gave him tasks and asked him questions. It was a great way to gain insights and he communicated his thoughts and actions with us very efficiently.

We recorded each testing session on multiple cameras, and Anna, the workshop coordinator, was there at all times to guide the session. PMs, designers, UX, and developers came into various sessions to ask questions and observe. It was a great session and we were really grateful that Przemek was extremely accommodating and talkative throughout the entire day.

You can have a listen to a small part of our workshop, and observe how fast a screenreader talks!

An excerpt of our testing workshop with a screenreader (in Polish)
Image for post
Alpaca — What’s New Category Page

Usability issues identified

We went through a lot of elements and features of the Alpaca store and learned many things along the way. Here are some of the usability issues we identified during our testing session

  • After the full page loaded, the cursor jumps to the top of the page which is connected with Magento 2 content dynamically loaded with Ajax
  • Notification banner is not read out when it appeared on the page
  • On the category and product page we found some issues with graphic presentation of product option, size and colors (called swatches in Magento 2). Despite a11y support, those options are hard to find, because the container is not fully accessible. Moreover, those options are built based on input which was seen and operated differently with a screen reader, which caused a problem with Add to cart form validation. Fortunately, an experienced screen reader user is able to handle buying action with desirable and required options chosen.
Image for post
Alpaca — Product Grid Container
  • Unsuccessful add-to-cart events are not seen; empty required fields are not announced until the user deliberately go back through the form elements
  • Product page organization provides product description after a call-to-action (buy). Maybe a short description added before Add to cart form could increase conversion.
  • We found some unlabelled icon buttons on Product page and some tooltips on checkout that aren’t fully accessible.
  • On the registration page, the date-picker component isn’t available for AT and doesn’t gain the focus, so there is no option to choose the birth date. There is also no information about the date format.
  • The validation method for Recaptcha is unclear, and does not always appear.

Usability successes

There was some positive feedback about our theme, which confirmed for us that although we weren’t at 100% accessibility, our efforts so far had made some impact and improvement upon the classic commerce site.

  • The mini-cart was well described and labeled — it gave instant information about the number of products in the cart through the screen reader
  • All header content was accessible
  • In general, most content on the category page was accessible (filters, toolbar, product grid, add to cart)
  • Product page and checkouts were both generally accessible
  • Compared to another well known and large commerce site in Poland, Przemek found Alpaca easier to navigate and use

What did we discover?

  • The absolute speed of screen readers! We could barely understand and keep up with how quick the screen reader was speaking, even after Przemek slowed down the speed for us.
  • Screen reader users navigate through pages using semantic elements like headings, links, buttons, lists, tables, etc. They usually don’t skip links or the standard menu navigation.
  • With an accessible mini-cart, a user employing a screen-reader doesn’t see the difference between a mini cart vs a shopping cart page. This could be an issue because there are additional options on the full cart page (gift cards, discount code fields, extensions). Maybe some additional description is needed in the mini cart to link to the full page.
  • Blind users generally do not buy clothes or shoes on the web
  • Like any user with vision, Przemek scanned pages quite quickly by skipping over large amounts of web content that are enclosed in a <span> tag. He could miss out on essential information if it’s not organized meaningfully, like us. This highlights how a11y is for all users.

Try it yourself

You can try using a screen reader yourself with this site and see what it might be like using the page as a user with vision impairments.

  • If you’re using a Macbook: VoiceOver
  • If you’re using a Windows laptop: NVDA
  • If you’re on a Linux system: BRLTTY or ORCA
  • If you want to use a mobile device, check TalkBack for Android or VoiceOver for iPhone

We hope you’ve been inspired by this post to try a11y on your own website or at your own company, and don’t be afraid to fail and get things wrong during the process!

Image for post

Snowdog is a team of creative and curious people.

Website | Twitter | Facebook

Snowdog Labs

Forefront technologies and research in the landscape of…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store