<img loading="lazy" alt="Post List Summary Featured Image" src="https://3280432.fs1.hubspotusercontent-na1.net/hubfs/3280432/Imported_Blog_Media/e-commerce-online-shopping-digital-marketing-and-sales-business-technology-concept-137074336.jpg">

Navigating Accessibility: A Black Friday Shopping Experience on Mobile

By Michael Taylor on Nov 20, 2024
Topics: Retail, User Experience, Mobile, Ecommerce

0 Comments

A favorite local retailer of mine was running some early Black Friday sales at the beginning of November. Needing to replace some holiday decorations that broke last year, I decided to jump on the deals and place a store pick-up order. Because of its ease of use and portability, I turned to my tablet to complete this shopping task.

In the remainder of this blog, I will narrate my way through the shopping session, pointing out both good and bad accessibility. The goal is to help illustrate how some of the theoretical mobile accessibility points I have discussed in other posts show up in real-world scenarios. This discussion will focus exclusively on touch-based screen readers.

Successful Searching

Since I sought specific holiday decor items, I did a direct search once the site’s homepage loaded. Using direct touch navigation, I easily found the search entry field at the top of the page. Inputting my search criteria using the on-screen keyboard proved to be easy, as did browsing the search suggestions that populated under the text entry field as I typed.

The search results page itself seemed accessible. I could hear each item’s name, price, and stock status, as well as a separately designated “Add To Cart” quick action button that appeared below each product listing. Both manual one-finger swipe navigation and direct screen touches yielded similarly positive results.

The specific holiday decoration I sought was not particularly common, so I needed to scroll through several search results pages. However, I was confident that this retailer carried it because it had for the past five years or so. I eventually found it on the fifth page of search results and activated the item’s title to proceed to the product details page.

Fulfillment Options Troubles

At first, the item details page seemed accessible. I was able to browse the product details and customer reviews to confirm that it was indeed the item I wanted. At this point, I was ready to add the item to the shopping cart.

Moving down the page using manual swipe navigation, I encountered text directly above the “Add To Cart” button that denoted the available fulfillment options. Shoppers can choose shipping, in-store pick-up, or ship-to-store pick-up. The estimated fulfillment time and cost were also listed for each choice.

As I swiped through, I would hear each part of a fulfillment option separately. For example:
“Home Shipping,” Swipe, “3 to 7 Business Days,” Swipe, “Price Calculated In Checkout.”

This initially seemed fine, as I assumed the text was split across multiple lines. However, I soon realized this interface had a major issue.

I assumed the site listed fulfillment options for informational purposes only and that I could select a method during checkout. Running with this assumption, I activated the “Add To Cart” button. To my surprise, a pop-up informed me: “An Available Fulfillment Method Must Be Chosen To Add Items To The Cart.”

Returning to the fulfillment options, I realized the screen reader recognized them as plain text and were not actionable or selectable. Activating the text did nothing.

Almost by accident, I touched the screen near the “Add To Cart” button and heard:
“In-Store Pick-Up, Ready Within Three Hours, Free, Check-Box Unchecked.”

This was how to select a fulfillment option. However, when I attempted to swipe to the following checkbox, it didn’t work. To select the desired option, I had to perform a series of random direct touches above the “Add To Cart” button. This process took about fifteen tries, as the touch target was extremely small.

This is a significant accessibility defect. All navigation modes—manual swipe, direct touch, and keyboard navigation—must allow users to access critical features like fulfillment selections. Once I successfully chose my method, I could add the item to the cart. With this knowledge, I located the other item I needed and added it to the cart.

Completing the Checkout

The checkout process was a mixed experience. The cart was easy to navigate, and the in-cart quantity adjuster was fully accessible. This was refreshing, as quantity pickers are often plagued with accessibility issues.

However, the store pick-up confirmation step was problematic. The interface to change the pick-up location was completely inaccessible. Activating the “Change Pick-Up Store” button opened a pop-up where all screen reader-detectable items were unlabeled and announced as “Link.” Fortunately, the store I wanted was selected by default based on the device’s location services, allowing me to proceed.

The final step, payment card entry, worked perfectly with no accessibility issues.

Key Takeaways

  • Accessible search functionality makes a huge difference. Finding items quickly with clear navigation and well-labeled buttons is critical for a smooth shopping experience.
  • Inaccessible fulfillment options create roadblocks. Ensure all selection methods are functional and accessible through multiple navigation modes, not just direct touch.
  • Checkout processes must be fully accessible. Unlabeled buttons and links in key areas, such as store selection, can frustrate users and prevent purchases.
  • Accessibility flaws impact more than usability. They can alienate customers and limit your store’s reach to those using assistive technologies.

Conclusion: Lessons in Mobile Accessibility

While I ultimately completed my shopping task, the experience was far from ideal. This journey highlights how good and bad accessibility design can significantly impact mobile screen reader users.

Black Friday shopping is just one example of how mobile devices steadily replace desktops. To maximize customer reach and satisfaction, your mobile site and app must meet the same accessibility standards as your desktop platform. Investing in accessible design ensures that all customers, including those using assistive technologies, can shop with ease and confidence.

If you are working on digital accessibility, UsableNet offers several approaches to help based on your experience, resources, timeline, and specific goals. Take our remediation quiz to learn which approach might be best for your needs. New call-to-action

Editor's Note: Our frequent contributor, Michael Taylor, wrote this post. This post reflects his opinions and experiences. Read more about Michael and some other posts on his experience online here.

Michael Taylor

Michael Taylor

I am a regular contributor to the UsableNet blog on digital accessibility. I develop, write, and edit content for the company blog related to my experiences with digital accessibility. I explore various areas of the digital world and combine my unique perspective as a screen reader user with my fun and creative writing style to deliver an informative and engaging final product. My goal is to advance the company's marketing initiatives while also raising awareness about digital accessibility and how it affects the lives of real-world assistive technology users. My work covers everything from common accessibility challenges to robust and accessible design to tutorial-like content for specific web elements.

Need to improve digital usability, accessibility or performance? We can help.
Partner with us. Get in touch.