Select Page

ModCloth Accessibility Evaluation

Identify ways to improve the ModCloth website so it is usable by any user, regardless of ability.

Research  |  Accessibility Evaluation  |

THE CHALLENGE

ModCloth is an American online retailer headquartered in Los Angeles, CA,  specializing in vintage-inspired women’s clothing. In this project for school we had to execute and accessibility evaluation and create a plan for the organization.

  • Goals of doing an accessibility evaluation
    • Meet the Web Content Accessibility Guidelines (WCAG) and ensure our website is perceivable, operable, understandable, and robust – for as many users as possible
    • Understand how we can improve our website for users with any kind of disability
  • What do we gain from doing this?
    • Good will – we should be adapting to the needs of our users
    • Making our site accessible expands our user base and therefore potential profits
    • Having a more accessible website benefits all users, not just those with disabilities
  • Risks of Not Completing
    • Alienating a user population who may be potential customers
    • Potential legal action from users for not providing reasonable accommodation

 

THE APPROACH

For this project, I used a combination of three methods to test the following areas on the ModCloth website:

  • Browsing the homepage 
  • Searching for an item
  • Navigating to an item
  • Learning about the item on a product detail page
  • Adding an item to your cart 
  • Removing and item from your cart 
  • Creating an account
  • Checking out

The three methods used to conduct the accessibility evaluation were:

  1. Automated code inspection:  Use a tool, SortSite, to run an automated code inspection on the main pages of ModCloth. Review report results to determine if the code meets accessibility guidelines
  2. Manual code inspection: Use assistive technologies like keyboard only navigation and screen reader software to look for mobility issues and vision issues
  3. Experience walkthrough: Take on the role of a person with a disability doing key tasks on ModCloth
    • We employed three criteria for the experience walkthrough: 
      • How well the site supports use of assistive devices such as screen readers, 
      • The degree to which the site is navigable without a mouse or trackpad, and 
      • Whether the pages allow a visitor with disabilities to understand where they are and what they can do
  •  

SUMMARY + IMPACT

  • Artifacts from the evaluation:
    • Code infractions that need addressed
    • Subjective areas of the website that may need to be re-evaluated or tested further with users
  • How we’ll use the results:
    • Prioritize the areas, processes, or pages of our site we should target first for improvements
    • During and post development of website changes, schedule testing with end users with disabilities to validate our work

Results Summary

  • The ModCloth website failed 12 of the WCAG 2.1’s guidelines.
  • On doing an experience walkthrough with both a screen reader and using keyboard only navigation, various issues ranging from critical to minor were discovered including:
    • Missing bypass blocks causing tabbing issues
    • Incorrect tabbing order causing flow and navigation issues
    • Showing and hiding elements on the page that a user can’t tab to

 Summary Recommendations

  • Address code violations against the WCAG
  • Ensure elements on all pages have alt-text and descriptive text
  • Add bypass blocks so users can skip past elements on the page without having to tab through them such as the navigation 
  • Fix the tabbing order to flow in the correct order and highlight active items
  • Make it possible for users to move from the page they’re on to the cart easily