Holiday Decor Shopping with a Screen Reader on a Touch-Screen Device

The holiday season is upon us and is my favorite time of year. It might surprise some readers to learn that I love decorating for Christmas. One of my traditions is building a new custom decoration every year to add to my collection. This time, I decided I wanted to make a unique wreath adorned with C9 bulbs, those large old-fashioned colored holiday lights that will undoubtedly bring feelings of nostalgia to those who remember them from their childhood. 

I found a website that sells both the bulbs I need and the unique light stringers that hold them on the wreath. In this post, I will narrate my online shopping experience. I will share both good and bad accessibility points along the way. 

As always, I will speak exclusively about my experience as a blind person who relies on a screen reader. In this experience, I was using an iPad. Ipads and other Apple products come preinstalled with voiceover, Apple's proprietary screen reader. Voiceover is a touch-base screen reader that uses swipes for navigation and double tabs for activation.

Widget Woes

Upon launching the site from which I chose to shop, I immediately became aware of an annoying inclusion that would haunt my browsing experience. The site used an accessibility widget. A pop-up greeted me, announcing that I could explore my accessibility options by clicking the button in the bottom right corner of the screen. I could close the pop-up by locating the "Dismiss" button by touch. Thinking I would be well on my way, I began exploring the site's homepage.

I quickly became aware of an incredibly frustrating problem. Every 45 seconds, my screen reader would announce, "Click Here To Explore Your Accessibility Options." The screen reader's focus cursor would randomly jump to that accessibility widget menu button in the bottom right corner of the page. At this point, I had to refocus the screen reader on the main page and get as much done as possible before the focus randomly jumped again.

This issue was a major frustration and annoyance during this shopping experience. I've written about how widgets provide a difficult experience for me in my blog, Why Widgets Are Not Best For Digital Accessibility, read it here. 

Breezy Browsing

The homepage was straightforward. Touch navigation worked well, and the overall accessibility seemed to be okay. I moved through a list of product categories until I found the one I wanted. The first thing I needed to purchase was a set of ceramic-colored C9 bulbs. After activating the category labeled "C9 Replacement Bulbs," the site took me to a page with various product listings organized in a neat and accessible grid. A one-finger swipe gesture moved me through the options with ease.

One odd thing is that the website had labeled each image with the exact text that appeared in the item's title. Though this method worked fine for this type of item, I would not recommend this strategy in most cases.

I settled on a 24-pack of bulbs that contained an assortment of red, white, and green. If you're interested I share more about my interest in lightbulbs and my collection in a previous blog, "Ecommerce Web Accessibility Experiences," click here to read.

Activating the product listing brought me to the item details page. I quickly found the add to cart button with my screen reader's touch rotor and activated the option. I then returned to the main homepage of the site to purchase a light stringer. I arrived at the product details page and quickly moved through the various stages. I added my second selection to the cart.

At this point, I was ready to complete my purchase. I set my screen reader to navigate by button only and quickly found the "Cart" option with no problem. Fortunately, all buttons on the site were clearly labeled.

 
A Cart Calamity

When I entered the cart, I was shocked to find it empty. I could not understand what had happened. I was sure I had added two items to the cart, but they were not there. I repeated my shopping procedures and added both items to the cart again, but they did not show up.

I then tried an old trick that I have used for years with touch-based screen readers. I located the "Add To Cart" button on the product listing page by direct touch. Careful not to move my finger, I deactivated the screen reader and touched the part of the screen directly below my raised finger. I have the idea here to find the exact spot on the screen that houses the button so I can press the button without the help of the screen reader. This method is surprisingly effective as long as I do not move my finger and the page does not scroll once the screen reader turns off.

With this trick, I could add the item to the cart. I repeated this procedure for the second item.

As an assistive technology user, users like me should never need to turn off the assistive technology we rely on to use your website. This is a significant and unacceptable defect. By baking accessibility into your process, you can avoid these issues in the first place. 

Check Out and Final Thoughts 

With this problem out of the way, I completed my purchase successfully, with no real struggles. The accessibility of the checkout process was surprisingly good. Now, all I have to do is wait for my items to arrive to build my custom holiday wreath.

This example illustrates a point I have made many times in the past. Even if a digital product has pretty good accessibility, it only takes one significant defect to break the core functionality of the experience.

If you're just learning about digital accessibility for the first time, an experienced partner can help. UsableNet has helped companies with accessibility for more than 20 years. If you are researching how to find a strong accessibility partner, a great resource is this blog, Web Accessibility Agency Questions to Ask- click here to read.

If you are interested in reading how to make your website more accessible based on feedback from me and other members of the disability community, check out UsableNet's latest eBook, Digital Commerce Without Barriers: Perspectives from the Disability Community- download here.

Editor's Note: This is a post from our guest contributor intern, Michael Taylor. This post reflects his opinions and experiences. Read more about Michael in his introductory post here.