Accessibility UX Design Case Study: ModCloth
About
ModCloth is an American online retailer store inspiring women on vintage and indie clothing. There are unique dresses for each holiday. ModCloth’s mission is to empower and uplift women through their brand values.
Problem
There were complaints on how the ModCloth online shopping experience was not accessible for people with disabilities population. There were specific areas of the website that were difficult to navigate through. The goal was to analyze the crucial areas of the website that were not accessible.
Approach
I conducted a comprehensive evaluation conducted on the ModCloth website to pinpoint the specific accessibility violations occurring. The areas of the website tested were the homepage, search, and product page. The methods used in accessibility evaluation were:
- Conducting code inspection with SortSite tool on the ModCloth website to identify where the accessibility violations occur within HTML, CSS, and Javascript.
- Created experience walkthroughs to identify the specific interaction issues occurring within the website while utilizing assistive technologies
I created experience walkthrough tests that focused more on the keyboard navigation and screen reader interactions within the website.
Results
There were quite a few critical areas that were not compliant with web accessibility standards.
Homepage
The code inspection and experience walkthrough on the homepage presented a series of violations within the screen reader and keyboard navigation. The icons that were next to sign in on the homepage in number 1 were not announced from the screen readers within all browsers. There were no proper alt text names involved within the images and buttons which, should have been accessible for screen readers. As for the experience walkthrough, there was a navigation issue on the header menu in number 2. It entailed a lack of capability to skip content before going to the main body of the homepage. In other words, when using keyboard navigation, the user would always have to go through the category menu before going towards the main content that could increase user frustration.
Search Results
There were not many accessibility violations in search results other than what the homepage and product page had. According to the code inspection, there were issues around the color contrast for the search results in number 1. When users magnify the screen, they would want a darker color contrast for seeing the search results.
Product Page
I witnessed quite a few critical issues occurring within the product page. In code inspection, the product images in number 1 were not announced by screen readers due to no alt text. As for experience walkthroughs, there should be a logical tab order for keyboard navigation. It should not bypass the size selection in number 2. This is a crucial area for users to make a decision on the available size before adding the item to their shopping cart. The product detail section needs a color contrast for users to be able to see it better in number 3.
The main recommendations to improve ModCloth online shopping experience for accessibility were:
· Reviewing the tab order for the homepage and product page
· Provide a color contrast
· Determine proper alt-text names for the images
Lessons Learned
The new areas I explored within the ModCloth case study were going through automatic and manual code inspection. It required me to learn the basics of HTML, CSS, and a little JavaScript. I learned how SortSite (automated code inspection tool) presented the accessibility errors within the ModCloth website.
