ASOS

Web Accessibility
School Project

Web accessibility evaluation and improvements to include more people in the digital world

Project Philosophy

No one should be excluded from the experience of exploring the world through the Internet.

Overview

The number of online shoppers has been increasing year after year. More and more websites are making changes to ensure they are ADA-compliant in the US. ASOS.com, as one of those, also does a really good job making their website as inclusive as possible. However, there are still some little details that need to be improved.

I launched the project with an accessibility evaluation to assess the accessibility issues that still exist on this website. The evaluation includes 30 of 50 WCAG 2.1 AA Success Criteria. A mockup will be delivered to show the potential UX design solutions based on the issues found during the evaluation process. Since it's not possible to remove all the problems from a UX designer’s perspective, accessibility annotations for other UX professionals used to guide further improvements are also provided.

Time

  • Apr 2022 - May 2022

My Role

  • Accessibility Evaluator
  • UX Designer

Tools

  • WCAG EM Report
  • Web Developer
  • ANDI
  • Figma

Problem Statement

"How might we improve the website from an accessibility perspective?"

Deliverables

WCAG EM Report

UX Design Improvement

Accessibility Annotation

Close-Up

Evaluation

UX Design Improvement

Distinguishable

  • Added a filter on top of the image on the home page to make the text more visible
  • Raised contrast ratio of the heading in the product detail section from 2.85:1 to 4.51:1 to exceed WCAG AA guideline

Predictable

  • Changed the wording of the button label to make it clear to users where the button is leading them to

Input Assistance

  • Added an error description to let users make more sense of the error
    It will show up if the user clicks on the "ADD TO BAG" button before choosing a size.

Accessibility Annotation

Non-Text Content

Resize Text

Content on Hover or Focus

Sensory Characteristics

Focus Order

Focus Visible

Lessons Learned

Be practical

There are situations where aesthetics override functionality for the sake of emotional impact. However, to make the design not exclude anyone, accessibility should always be prioritized.

Be contextual

Designing for accessibility is subjective. It's always good to put ourselves in the user's shoes and see which solution works best for our users.

Be collaborative

It's not possible to achieve accessibility by only using the hand of designers. Being able to communicate with other UX professionals effectively is of vital importance.