3 common web accessibility errors on clothing sites [Guest Post]

By Michael Taylor on Feb 10, 2023
Topics: Web Accessibility, Retail

0 Comments


I love to shop. Lately, I've been doing more shopping online. Browsing products, comparing options, and making online purchases are simple tasks for most sighted users. Yet, I find that clothing and apparel retailers, both large and small, will typically make a few of the same accessibility mistakes on their websites. 

This blog post specifically shares my experience while shopping online for clothing as a blind customer who uses a screen reader to navigate the web. I'll end by sharing a few simple actions that online clothing retailers can take to improve website accessibility. 

1) Inaccessible Sizing Charts

One of the most important things an online shopper needs to know before purchasing an article of clothing is the size. Because sizing scales vary dramatically among different brands and styles, many online clothing sites provide size charts that allow shoppers to choose the right size based on a person's height and weight. These size charts seldom work correctly with screen readers.

Sometimes, size charts are an image 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 elements of the chart, but in a random order that makes little sense to a blind user. This issue usually happens because screen readers have trouble 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. In these cases, websites must include an alternative size identification method for screen reader users. An example may be a text field-based form that requires the user to input the person's height and weight in numbers and then click a search button. The form could then return the appropriate size in plain text.

2) No color information. (Yes, blind people care about colors).

The color of a particular article is also significant when purchasing clothing online. Just because someone is visually impaired does not mean that color is irrelevant to that person. Some visually impaired individuals can see some colors while still having 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. The point is that colors sometimes matter to blind people and should not be overlooked during an accessibility campaign. 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. Common design practice puts six colored circles below the shirt's image, displaying the available color options. Once a user clicks on one of these circles, the color of the shirt in the product photo will change according to the selection. 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." For this selection method to work, the color circles must have corresponding text labels baked into the code that announce the relevant color. Even better would be a dedicated text-based button below each circle that identifies each color option. The color-related accessibility issues do not stop here. Even clothing articles in one color often need to include the color name in the item description or product label. The image of the item should never be the only source of color information. 


3) What does that shirt say?

Many articles of clothing, mainly t-shirts, come with theme-based writing on the front or back. Shopping for these sorts of shirts is a very frustrating experience for screen reader users. On many sites I have visited recently, I need help to figure out what the shirts I am considering have written on them. I am a big fan of the New York Baseball Yankees. I was recently browsing a popular sports memorabilia site searching for an Aaron Judge t-shirt. After entering my search criteria, the site brought me to a list of about 30 shirts with the same item label: "Yankees Aaron Judge Men's Cotton T-Shirt." I became thoroughly confused, wondering how the site could sell 30 versions of the same shirt.

I later learned from a sighted friend that each shirt had a different saying placed 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. A text caption is necessary that tells the user what the shirt says and where. 

Five ways to improve accessibility on your online clothing store

So, based on my experiences in recent months, here are five things that I, as a blind screen reader user, wish that more online clothing retailers would do to improve online shopping for their customers with visual disabilities. 

  1. Ensure that sizes are marked and that alternative text-based size identifiers are present, not just visual sizing charts
  2. Do not neglect color when considering accessibility improvements. It may seem like color is meaningless to those who use screen readers, but this is different due to the varying nature of visual impairments and the possible purchase motivators of online shoppers, such as gift shopping.
  3. Ensure that item descriptions are as detailed as possible because clothing is a highly personal product category. Screen reader users will benefit from detailed text descriptions because we cannot gather the stylistic information conveyed in the product pictures.
  4. If clothing has writing or other visual designs, always include a text caption that provides the text and where it appears on the shirt and a description of any other images or graphics on the article of clothing.
  5. To help with accessibility improvements, consider engaging an experienced partner that can aid in all areas of digital accessibility.

As online shopping becomes more and more popular in all areas of retail, internet clothing sites will undoubtedly gain new customers of varying ability levels. Web accessibility and digital inclusion are so important. Though I have encountered significant barriers to a successful online clothing shopping experience, I hope this article raises awareness among website owners and business owners and helps us move toward a more universally inclusive digital future.

Interested in learning more about the experience of shopping online as a blind customer?

Save your seat for a new, live webinar on February 15 at 12 pm ET, "Web Accessibility for ECommerce: A Blind Customer's Perspective. 

Blue Clean Corporate Business Conference & Webinar Instagram PostThis is a guest post from our marketing intern, Michael Taylor. This post reflects his opinions and experiences. Read more about Michael and some of his other posts on his experience online here.

Michael Taylor

Michael Taylor

My name is Michael Taylor and I am a marketing intern at Usablenet. I graduated from Hofstra University with a bachelors of business administration in marketing. I am blind, and use assistive technology each and every day to access the digital world. As a result, I am very passionate about web accessibility and usability. My experiences with the good and bad of accessible technology give me a unique perspective that allows me to make meaningful contributions in the digital accessibility field. During my marketing internship at Usablenet, I hope to raise awareness about digital accessibility by providing accounts of my personal experiences and suggestions and recommendations about what works well and what does not. Though I am only beginning on my professional journey, I aim to pursue a long-term career in the digital accessibility field.

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