One area of retail in which online sales are becoming increasingly prevalent is clothing and apparel. The first time I wrote about online clothing shopping sites, I discussed common accessibility challenges. Today, I delve into the strides made in digital inclusivity within the online clothing retail industry, focusing on my experience as a blind person who relies on a screen reader.
I will reexamine clothing websites, highlighting encouraging design improvements that support digital accessibility. From enhanced sizing charts to text labels for color pickers, let's look at how clothing websites make online clothing shopping accessible.
Editor's Note: This blog originally appeared as 3 Common web accessibility errors on clothing sites in February 2023. It was updated in February 2024 to reflect the positive changes toward accessibility made by online clothing retailers and observed in 2024.
TL;DR
- Accessibility on E-commerce sites is improving: Since I wrote my original blog, online clothing retailers have made overdue changes to enhance accessibility to all customers.
- Improved Sizing Chart Accessibility: Text-based sizing charts make it easier for users to find their recommended sizes.
- Text Labels for Color Pickers: Including text labels for color options enables visually impaired users to easily identify and select desired colors.
- Inclusion of Written Text in Item Descriptions: Clothing descriptions are most valuable when they include written text found on clothing items, bridging the gap between sighted and visually impaired users.
- Towards Full Accessibility and Inclusivity: With continued improvements, online clothing retailers are on a path toward greater inclusivity for shoppers of all abilities.
By highlighting these positive developments and sharing insights, I hope to inspire further progress towards a more accessible and inclusive online shopping experience for everyone.
The Accessibility Problem: Inaccessible Sizing Charts
One of the most important things an online shopper needs to know before purchasing an article of clothing is the size.
A feature that is becoming standard on almost all clothing sites is the ability to reference a sizing chart that recommends a size and fit based on a user's height and weight. While a handy feature, these size charts seldom work correctly with screen readers.
Sometimes, size charts are images or inaccessible PDFs, neither of which can be detected or read by a screen reader. In other cases, I can hear some or all of the chart's elements, but in a random order that makes little sense to a blind user. This issue usually happens because screen readers need help interpreting the column-based format of most clothing size charts.
I recently attempted to purchase a shirt for a family member using a size chart. Because my screen reader needed help to read the partially image-based chart correctly, I bought the wrong size shirt due to receiving inaccurate information.
Even if I can get my screen reader to recognize the chart, it often only returns a string of random numbers and size values that need more context. Furthermore, the tables rarely contain row and column labels, which makes it impossible to move through the chart logically.
The Accessibility Fix: Text-Based Sizing Charts
Luckily, online clothing site designers have begun changing this process, which has made the experience far more accessible. On many modern online clothing retailers, activating the size reference option brings up two text fields, one for height entry and the other for weight entry. After filling in the requested data, a simple "Enter" key press will return the user's recommended size in plain text.
This process is easy, intuitive, and highly accessible. Design changes represent definite progress regarding digital accessibility in the online clothing industry.
The Accessibility Problem: No color information
Contrary to common belief, color can be an essential clothing characteristic for blind shoppers. Some visually impaired individuals can see some colors while still being sight-poor enough to require a screen reader. In other cases, a blind shopper may be looking to purchase a gift for someone who is sighted and likes or desires a specific color. Don't assume colors don't matter.
Unfortunately, I have had many color-related accessibility issues when shopping for clothing online. Sometimes, a shirt, for example, will come in five or six colors. One design practice that has always been troubling for screen reader users is the inclusion of visual color swatches for clothing articles that come in multiple color variants.
These color pickers can either be shown as colored circles below the item image or as a collage displaying all of the color choices in a visually pleasing array. Once a user clicks on one of these circles, the color of the shirt in the product photo will change according to the selection.
The biggest issue with this structure is that these color pickers rarely include text labels. These color selection circles seldom work correctly with screen readers. Either the screen reader cannot detect them or speaks them aloud as simply the word "image."
The color-related accessibility issues do not stop here. Even clothing articles in one color often must include the color name in the item description or product label. The image of the item should be one of many sources of color information.
The Accessibility Fix: Text Labels For Color Pickers
I have recently noticed that the color pickers on many clothing sites have corresponding text labels baked into the code that announce the relevant color. The best thing about these labels is that they account for items containing multiple colors.
My screen reader announces the following text as I explore the four color options for a pair of sandal slides at a popular online clothing retailer.
"Black/White/University Red,"
"Ocean Blue/Stone Gray,"
"Lemonade,"
"Blue Green/Electric Orange."
These labels are excellent, clearly denoting the different colors in each option and providing some additional descriptive detail for someone who may not be able to see color. This is a positive way to handle the accessibility of the color pickers on online clothing retailers.
The Accessibility Problem: Getting an Accurate Description
Many articles of clothing, mainly graphic T-shirts, include written sayings or other text, such as a sports player's name. Browsing this type of clothing has always been difficult for screen reader users because there has traditionally been no way to determine what words are on each article, and the words appear only in the item image.
I've shared that I am a big New York Yankees baseball team fan. When I browsed a popular sports memorabilia site searching for an Aaron Judge t-shirt, the site brought me to a list of about 30 shirts with the same item label:
"Yankees Aaron Judge Men's Cotton T-Shirt."
How could the site sell 30 versions of the same shirt?
I later learned from a sighted friend that each shirt had a different saying in other spots, depending on the shirt in question. This saying was not present in either the product label or item description. The only way a user could find it was through the product photo, which is not an option for screen reader users.
The Accessibility Fix: Enhance your descriptions with more detail
I recently made an encouraging discovery.
An online clothing site began including any writing in an article about clothing in the text-based product description. Furthermore, a brief text description is offered if the item contains images or graphics.
Here is an example of an item description from the site for a New York Yankees Aaron Judge graphic T-shirt:
This comfortable cotton T-shirt shows Yankee Captain Aaron Judge in his in-game batting stance. White block lettering reads The Judge Has Ruled above the graphic. Double stitching and seam reinforcement ensure this shirt will last for years. At the same time, the breathable cotton will guarantee a relaxed and cozy fit."
Suppose a screen reader user encounters this description. In that case, it will provide the necessary information to bridge the gap between a sighted user and a blind user's experience. While this is currently only done on one site, it is an incredibly positive step in the right direction. Hopefully, other online clothing retailers will follow this model.
Progress over Perfection- Accessibility for a Wider Customer Base
Accessibility professionals have a saying, "Progress over Perfection." By making these accessibility fixes on websites, brands with online clothing sites are making progress. Their products are available to a larger, diverse audience, including people with disabilities.
Accessibility takes time, but small changes can make a significant impact. From implementing text-based sizing charts to including text labels for color pickers, these advancements enhance the usability of websites for people with visual impairments and improve the shopping experience for others. If changes like these continue, the online clothing industry will be well on its way toward total accessibility and inclusivity.
To learn practical insights on how to make your website design more accessible, register to watch the webinar, Accessible Design for E-commerce, with Luca Boškin, Senior UI/UX Designer at UsableNet. Register to watch Accessible Design for E-commerce.
Luca has worked with our retail partners for the past ten years. If you are a retailer interested in learning what it's like to partner with UsableNet, please contact us for a free consultation. Contact us.
This is a guest post from our marketing intern, Michael Taylor. This post reflects his opinions and experiences. Read more about Michael and some other posts on his experience online here.
