One of the most popular sectors of online retail is clothing. I have shopped for clothes on websites for many years. In the past, I discussed common accessibility challenges that screen reader users face when shopping from online clothing retailers. Today, I will revisit this subject area and discuss mobile device accessibility.
With mobile commerce accounting for nearly 73% of total e-commerce sales in recent years, the accessibility and usability of mobile clothing websites and apps are more critical than ever. As always, screen readers will be my main area of focus, specifically touch-based versions designed for portable devices.
Size Selection Accessibility Issues on Mobile Clothing Websites
I explored and used several mobile clothing websites to prepare for this blog. One everyday interaction that continuously gave me accessibility trouble was selecting a piece of clothing's size. Most sites use a row of checkable buttons to accomplish this task. While moving through and hearing the size options was relatively easy on most clothing sites I used, screen reader behavior after selecting a size needed to be corrected.
Once I chose a size, the screen reader gave no feedback indicating the selected size. If I moved through the size options again, my screen reader would not announce any sizes as "Selected," even though I had picked and activated the "Extra Large" option. Both manual swipe and direct touch navigation yielded the same negative outcome.
As a result of this issue, there was no accessible way to confirm which size I had picked before placing my order. Some sites confirm this information in the cart. However, for those sites that do not, it was a complete shot in the dark as to which size I would receive once my order arrived. This issue is not just a minor inconvenience. It's a significant problem that affects a large portion of the population. Considering that 15% of the world's population lives with some form of disability, and many rely on screen readers, this issue is significant.
Before I continue, if you want to hear more about my experiences with E-commerce accessibility, I encourage you to download my e-book, Accessibility Insights: A Screen Reader User’s Guide.
Changing an item's quantity is often necessary when shopping on mobile online clothing retailers. This seemingly simple task proved challenging on many of the sites I visited. The main problem was an inability to interact with the quantity picker using my mobile screen reader.
Usually, a site will have the quantity selector near the "Add To Cart" button on the product details screen. In most cases, I had no trouble locating this button using direct screen touches or manual one-finger swipes. However, I often could not interact with the quantity selector to make changes.
My screen reader would announce the item as an interactive element such as a "Pop-Up Button," "Text Field," or "Combo Box." However, activating the item using a single-finger double-tap often does little. No virtual keyboard appears, no menu opens, and no pop-up box requires attention. There is no way to change the item's quantity when this issue occurs.
I have experienced this issue on other sites in the past. Still, it is particularly prevalent in online clothing retailers when I use a mobile screen reader. With 61% of consumers more likely to abandon a purchase due to accessibility issues, these problems can directly impact sales.
For a deeper understanding of how to make e-commerce sites more accessible according to members of the disability community like me, check out this free e-book: Digital Commerce Without Barriers: Perspectives from the Disability Community - Download now.
Another important aspect of online clothing shopping is color selection. While it may surprise, color can matter to blind shoppers in cases such as personal preference and gift purchases. Many online clothing listings allow the user to select a color by tapping visually colored circles that correspond with each option.
This being said, I repeatedly encountered the same accessibility issue when altering a product's color on a few of the sites I tested. If I changed the color selection by activating one of the labeled color options and then moving focus back to the product's title, the screen reader announced the item's name with the original color. In addition, the alternative text image description reflected the original color selected by default when the item details page loaded.
An example is activating a product listing on a search results screen, and the site brings me to the product details page. The screen reader announces the item's title as "Men's V-Neck T-Shirt, Black." The text description for the product photo is "A Person Wearing A Black T-Shirt." I changed the product's color to red and refocused my screen reader on the item's title again. The screen reader announces the item as "Men's V-Neck T-Shirt, Black." The image tag remains as "A Person Wearing A Black T-Shirt." A sighted person confirmed that the color in the image and the title are visually changing to match my adjustments. However, the screen reader's speech did not reflect these changes.
→ Free UX Whitepaper Download: WCAG Principles for Mobile
This issue makes it very difficult to confirm product customizations or to change a selection once made. Furthermore, once I added the product to the cart, my mobile screen reader still gave an incorrect color. Considering that approximately 285 million people worldwide have visual impairments, improving this aspect of accessibility could significantly enhance the shopping experience.
For further information on improving color contrast and other visual accessibility features in mobile apps, check out this blog written by a fellow contributor with a visual disability, Mobile App Accessibility Tips | Read now).
The accessibility issues plaguing online clothing retailers differ from system to system. This discussion helped show some of these variations from the mobile device side. However, as mobile accessibility improves on clothing websites, touch-based screen readers will become more inclusive, benefiting millions who rely on these tools to shop online. There's much potential for improvement, and it's a journey we're all on together.
For actionable insights about my experience, check out this blog, which recaps a UsableNet webinar on applying WCAG to mobile.
Experience firsthand how blind users navigate the web! Sign up now for our upcoming webinar, "How a Blind Person Uses a Website," where you’ll witness a live demo and gain exclusive insights from experts. Don’t miss this unique opportunity to deepen your understanding of accessibility!