It is that time of year again when everyone is shopping for that perfect Thanksgiving turkey, ingredients for that warm and delicious pumpkin pie, or all of the fixings for a scrumptious batch of fun holiday cookies. Online grocery shopping is one area of business that will undoubtedly experience increased usage this Thanksgiving and holiday season.
So many websites allow users to shop for their favorite groceries from the comfort of their laptop or smartphone and have them delivered directly to their door or assembled for one-stop pickup at the store.
After exploring some of these platforms, I discovered several common accessibility flaws that make the experience less than desirable for blind shoppers like myself. I will discuss some of my findings in this post. As always, I will strictly be speaking about screen reader accessibility.
One of the most important parts of grocery shopping is the ability to examine nutrition labels to compare health facts such as calorie count and serving size. I, unfortunately, experienced tremendous difficulty in this area. While some online grocery product listings include nutrition facts as part of the item’s text description, most do not. Instead, shoppers must rely on images of the physical grocery item in order to obtain information like the ingredient list and nutrition data. The issue is that these product images rarely have alternative text descriptions. As a result, I am unable to hear any of the important health details of most of the items I view.
This puts blind shoppers at a significant disadvantage because nutrition facts and ingredient lists often lead shoppers to choose one product over other similar items. The best practice is to include the nutrition facts in the product’s text description. If the data is only available through a picture of the physical item, an appropriate alternative text caption is necessary to convey the information to screen reader users.
Almost every digital product listing allows the user to select the desired quantity of an item before adding it to the cart. This functionality is particularly useful when grocery shopping online because it is incredibly common to need multiples of the same item. This being said, I found that the quantity selection feature did not work properly with my screen reader on most of the grocery shopping sites I explored.
My screen reader would usually announce the quantity selector as an editable text field. In theory, activating the text field should allow the shopper to enter their desired quantity using keyboard input. Unfortunately, I found that this method did not work correctly with a screen reader. For whatever reason, activating the text field did absolutely nothing. Nothing changed on the screen and the focus cursor did not move. Furthermore, trying to enter a number using the keyboard did not change the quantity listed in the text field. It was almost like the site was ignoring the screen reader’s attempts to edit the quantity field.
On the few occasions where I was able to actually change the quantity, I encountered another bizarre issue. Let’s say that the default quantity is 1 and I want to change it to 3. If I type 3, the original 1 will remain, giving me a final quantity of 13. Nothing will happen if I use the backspace or delete keys to try to clear the 1 before entering the 3. These quantity selection accessibility issues render the feature virtually useless for screen reader dependents.
One of the most compelling features of many online grocery shopping websites is the choice to have the items delivered directly to the user’s door. This procedure requires the individual to select a delivery day and time slot window. Unfortunately, I had significant difficulty with this process.
The biggest challenge was choosing a delivery window. In general, the site will display a list of two-hour time slots. The ones that are not available appear visually dimmed or grayed out, signifying to the user that the slot is already fully booked. The problem is that the screen reader cannot differentiate between open and unavailable time windows.
As a result, I must use trial and error if I want to schedule a delivery. I must select a time slot and activate the continue button. If nothing happens, it means that I have chosen an unavailable window. It took me 33 minutes to select a delivery day and time on one site in particular, as I had to move past four unavailable days before I found an open time slot. A task that should take three minutes took me more than ten times as long.
Another strange thing is that most of the sites that I looked at seemed to use a very similarly designed delivery booking interface. These shortcomings in the delivery scheduling process make the task clunky, inefficient, and thoroughly inaccessible.
While online grocery shopping is a powerful feature of modern e-commerce, several significant accessibility defects make the process challenging for screen reader users like myself. However, through awareness and accessibility work, I have confidence that this will change for the better in the future.
Hopefully, next Thanksgiving and holiday season will bring with it improved accessibility on grocery websites and across the board.