Aaron Preece
As in previous years, November is when we celebrate the Holidays here at AccessWorld. As before, we bring you an article on the accessibility of online shopping but with a new focus.
We have been heartened to see that most major online shopping sites (Amazon, Walmart, Target, etc.) maintain solidly accessible websites. For this piece, we wanted to look at sites outside of this specific sphere. Since clothing is a popular choice for gifts this time of year, we wanted to do a survey of a range of clothing sites to determine where accessibility stands overall in this industry. For this article, we reviewed five different clothing sites: Redbubble, L.L.Bean, Under Armour, J.Crew, and North Face. Sites were reviewed on a Windows PC running Windows 10 using the Firefox web browser and the NVDA screen reader.
When we review sites in the AFB Talent Lab, we categorize the issues we find by severity. For this article, we will be focusing on those issues that create major problems for screen reader users of the sites. For example, if a search field isn't labeled but has the word "Search" in text above it, that would be a very minor issue which wouldn't fall into the testing scope of this piece unless other issues are non-existent.
For this piece, we will be specifically looking at distinct functions of each of these sites. We will be reviewing a site's browse feature, search feature, product page, and purchase process.
Redbubble
Redbubble is a website where graphic artists can sell their designs printed on various items. Clothing makes up a good deal of the sites catalog with a massive range of designs available, likely unavailable elsewhere.
Browsing for or searching for products on Redbubble is quite accessible. The search is labeled in text and once a search is performed, products can easily be navigated using NVDA's "Graphic" shortcut. Filters are also easily discovered, they are under their own heading, and fully accessible.
If you choose to browse for products instead of searching, this method is equally as accessible. After choosing a main category, subcategories, such as men's or women's clothing, appear as graphics under their own heading. The products themselves appear as links under a heading further down the page.
Conveniently, product links are singular, in that if you navigate them using NVDA's "Link" shortcut, the "Add to favorites" button, product name, and creator, are not distinct links. Note that you do need to arrow down to the actual product name link to go to the product page as using the link shortcut places you on the "Add to favorites" button. Even though this is a minor access error, it actually makes for a more usable site as it allows faster navigation through products than if these appeared as separate links. It would be possible to keep this functionality while correcting the error by making the "Add to favorites" button an actual button instead of considering it a link in the code. There is a heading labeled "Shop by Theme" which lists theme categories which appear to a screen reader user as if they would take you to a page displaying products related to that theme. In actuality, this is simply links that cycle an image carousel. When including features such as carousels, it is important to make it clear to screen reader users what they are to avoid confusion; this principle goes for any sort of content on a site.
The product page is quite accessible. You can easily adjust product type, such as the color of a T-shirt, as well as the size. The information on the product you are viewing is well detailed, but this only applies to the type of product, Shirt, hoody, backpack, etc., and not the art that will be printed on the product. This means to be sure you are purchasing the product you actually want, you most likely will want to ask a sighted person to look at the product you are considering, use a visual interpreter such as Aira, or run the product image through an AI image recognition service such as Be My Eyes. For sites of this type, it would be helpful if the developers include an alt-text field where artists are encouraged to describe their art for customers who cannot see product images.
The check-out process is fully accessible; all steps of the check-out process appear on one page and populate as you move from one step to another.
Overall, the shopping experience at Redbubble is fully accessible and the site includes common navigation features, graphics and headings, that make exploring the site efficient. The major access issue is the lack of description for the art that will be printed on products, as the art is the reason to purchase from this site.
L.L.Bean
L.L.Bean produces a variety of clothing and are particularly known for winterwear and loungewear. During my testing, I found the site to be completely accessible. Browsing for clothing is straightforward and searching is as well. The page uses plenty of headings where appropriate and products are sorted in a list for easy navigation. The site describes products minimally but adequately, and selecting sizes and colors is accessible. Check-out was completely accessible, with all steps on one page with the next being populated after the previous was completed.
Under Armour
Under Armour is a well respected athleticwear brand. Much like L.L.Bean, the site was completely accessible. Browsing for clothing was simple, as was searching. The page uses solid structure with headings and other navigation elements for aspects such as filters. Products could be navigated by image using the NVDA shortcut for efficient browsing. Product pages are well designed, again, with properly structured and labeled elements. Descriptions of products were detailed in regards to fabric type, features, and material, but basic in regards to design and appearance. Check-out was fully accessible; compared to the two previous sites, each step was on its own page.
J.Crew
J.Crew produces a range of men's and women's clothing with a focus on more formal clothing. The site was fully accessible but slightly cluttered, but not to an extent where it would make for navigation difficulties. Browsing for items as well as searching could be accomplished without issue and the product details pages are accessible. The store does describe products but with L.L.Bean and Under Armour, descriptions could provide more detail to better explain the appearance of clothing to people unable to see the presented images. All of the check-out information was accessible and on a single page, without the need to move to or expand specific steps.
North Face
North Face produces a range of hiking and winter gear. Again, the site was fully accessible. Notably, search results were not proceeded by headings as was true for other stores but could be reached by first finding the search field and navigating by links afterward. North Face was also notable in that descriptions of products were more detailed than was found at other stores, but might be based on the complexity of clothing items. Nevertheless, this was the store where I felt the most confident in understanding the appearance of the clothing. Again, checkout was fully accessible with steps being listed on separate pages.
The Bottom Line
I was pleasantly surprised with the accessibility of the stores surveyed in this article. I expected to encounter a serious issue at some point, but the only issues encountered were incredibly minor and were barely of note. I did discover that the descriptions provided by most clothing stores were not adequate for me to feel confident that I understood the appearance of what I was purchasing. Sites tended to focus on features, such as material and clothing technology with to-the-point descriptions of clothing attributes such as shape and pockets. Redbubble was notable in that the key feature of the site's clothing, the artwork printed on the items, was not described at all, but I assumed this was because the artwork is being provided by third parties. In this case, having a field where artists can describe their art in detail to be used as alt text for images would be helpful. The other stores were slightly better in their descriptions but fell short in regards to color or pattern in particular. Companies have in-house names for colors, e.g., Summit Blue, Mariner blue, Black 457, etc., which provides no details on the exact shade of the color being presented. Shopping would be significantly more accessible if colors were better described, and if more detailed visual descriptions were provided as alt text for images.
Description issues aside, it is heartening to see how far things have come in regards to general accessibility among specialized markets such as clothing. Even with my concerns regarding clothing descriptions, it is quite possible to shop for clothing independently without encountering any access barriers at the sites detailed here. The brands here are among the more well-known and I would expect other clothing brands of the same age and size would have similarly accessible sites.
