ModCloth Case Study

Executive Summary

Results Summary

I selected the ModCloth website to conduct a comprehensive accessibility assessment. The primary focus is to identify any items that are not in compliance with the web accessibility standards.

Homepage

Automatic and Manual Code Results:

• Screen readers were not able to capture specific rows of clothing

• Category menu does not provide up and down navigation

• Alt text name is missing for few images

• Email form needs proper Alt text names

Experience Walkthroughs:

• Homepage is missing proper keyboard navigation and alt-text for images necessary for the screen readers

Search Results

Automatic and Manual Code Results:

• Color contrast on the search results. There is not supposed to be a link on search results because it violates accessibility guidelines for color blindness

Experience Walkthrough:

• light grey text color for search results on top of white background

Product Page

Automatic and Manual Code Results

• No alt text around the product images

• Font size needs to increase a little more for the magnifier

Experience Walkthrough

• Keyboard navigation does not go through the sizes selection

• Does not go through the Save Wishlist

• Color contrast needs to occur with the zoom magnifier for it to be legible

Summary Recommendations

• Provide adaptable formats for assistive technologies

• Bypass the extra content needed to navigate with a keyboard such as the category menu

• Review the tab order of the homepage and product page

• Determine proper alt-text names for each product image and cover image

• Provide clear color contrast for content on background frames

Accessibility Evaluation Process

Google Lighthouse

• Showcase the accessibility status on ModCloth

• Identify the specific types of overall violations that need to be fixed

Sort Site

• Processed the ModCloth website through SortSite for automated code inspection

• Analyzed the violations that do not conform to the Accessibility Guidelines in the 508 standards

Manual Code Inspection

• Conducted manual code inspection through inspect element codes within Google and Safari browsers for ModCloth

• This was to pinpoint any specific barriers to screen readers and keyboard navigation

Experience Walkthrough

• Created experience walk-throughs to discover the specific pain points those users with disabilities face through the online shopping journey

• Determine which areas of the website are not accessible with the assistive technologies

Pages in ModCloth Website Analysis

• Homepage

• Search

• Product Detail Page

Analysis

Google LightHouse

ModCloth currently stands in 66% of Accessibility. The crucial areas of the ModCloth website that need improvement are:

• Names and Labels

• Color Contrast

• ARIA

• Navigation

Sort Site and Manual Code Inspection

Homepage

• Provide images with an alt attribute to help screen readers voice the name of the image

• Users want to remove distractions while reading with assistive technologies that have no option to turn off style sheets

• Images need specific alt-text for screen readers but instead it reads the whole URL

• The email does not provide clear instructions on how to fill up the form which is due to the field set elements are not labeled properly

• Keyboard navigation is not showcasing the focus indicators that inform the users on where they are on the homepage

Search Results

• Removing the underline links that make it difficult for color-blind users to see the search results

Product Page

• Alt-text must be provided with the images for the screen reader

• Keyboard navigation skips crucial content such as the size options due to field set elements not being labeled properly

Experience Walkthroughs

Homepage

• 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

• There was a navigation issue on the header menu in number 2

• Users do not have the capability to skip content before going to the main body of the homepage

• When using keyboard navigation, the user must have to go through the category menu before getting to the main content that can increase user frustration

Search Results

• There were color contrast issues around 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

• Product images in number 1 were not announced by screen readers due to no alt text

• There should be a logical tab order for keyboard navigation. It should not bypass the size selection in number 2

• Size is required for making the product selection and is necessary before adding the item to the shopping cart

• The product detail section needs a color contrast for users to be able to see it better in number 3

Key Learnings

• Gained experience using sort site for doing automatic code inspection

• Used my HTML, CSS, and some JavaScript skills to perform a manual code inspection

• The experience walkthroughs provided a clear picture of the obstacles people with disabilities population face while doing online shopping