top of page

ROLE

User Research

Accessibility Audit

Visual Design

Prototyping

TOOLS

WAVE version 3.1.6

Web AIM Contrast Checker

ANDI, Apache License 2.0

A11y Contrast Checker

Figma​

PRODUCT

Desktop website redesign

TEAM

4 members

TIMELINE

2 weeks

OVERVIEW

The goal of this project is to run an accessibility check on the Cookie Run store website by using the WCAG 2.1 evaluations, as part of a class project at The University of Texas at Austin.

Website

Cookie Run Store / Global | Official Store (desktop website)

View the accessibility report here

PRODUCT ROADMAP

01

Assess

Evaluating 3 pages of

the Cookie Run website using at least 3 WCAG

2.1 criteria on each page 

02

Evaluate

Analyzing if the page passes the evaluation

03

Solution

Creating screens with improved accessibility

04

Deliverables

  • Accessibility analysis report of the website

  • Mid-fi wireframes of improved solution

BACKGROUND ABOUT EVALUATION

Conformance evaluation of web accessibility was conducted with a combination of semi-automated evaluation tools and manual evaluation.

WCAG 2.1 Level for which conformance was tested: WCAG 2.1 Level A, AA, AAA

Evaluation and Validation tools used:

  • WAVE version 3.1.6

  • Web AIM Contrast Checker 

  • ANDI, Apache License 2.0

  • A11y Contrast Checker

Description of manual reviews used:

  • Visual review

  • Keyboard navigation

  • The scenarios where context, visual observation, and keyboard testing were required were tested according to the specific WCAG guidelines provided

REVIEW ANNOTATIONS

Home page

Status:

Does not pass​

  • 1.4.3 Contrast minimum - Level AA

  • 2.2.1 Timing adjustable - Level A

  • 2.4.7 Focus visible - Level AA

Summary of issues

  • Low contrast of text to background

  • No option to switch to high/low contrast mode

  • Text overlaid on busy images causing readability issues

  • Timing of carousel banners not adjustable, causing accessibility issues

  • Lack of focus visible indicators for keyboard navigation

New collections page

Status:

Does not pass​

  • 2.3.3 Animation from interactions - Level AAA

  • 2.4.9 Link purpose - Level AAA

  • 1.4.11 Non-text contrast - Level AA

Summary of issues

  • White heart button on product cards lacks adequate color contrast (Contrast ratio 1.21:1)

  • Image on hover automatically changes without user control, not essential to functionality

  • Link purpose of heart button is ambiguous, no description provided

  • A text description below an icon can improve link purpose clarity

  • Product picture link meets criteria due to presence of text title description

Product page

Status:

Does not pass​

  • 1.4.5 Images of text - Level AA

  • 1.1.1 Missing alt text - Level A

  • 1.2.8 Multimedia video - Level AAA

Summary of issues

  • Product page fails Non-text Content criterion by not providing text alternatives for non-text content, making it inaccessible for users with different sensory modalities and images with text are not embedded.

  • Multimedia Alternative criterion is not met as video-only content lacks alternative text descriptions, and image objects do not have brief descriptions of their function.

  • Product detail images contain too much information, making them difficult to read and inaccessible.

REDESGN

SUMMARY OF CHANGES

  • Redesigned carousel for accessibility by adding timing controls, clear control options, consistent height, semantic structure, and visible focus indicator.

  • Redesigned navigation menu with filled icons, icon text, increased color contrast, and added accessibility icon and visible focus indicator.

  • Removed animation and improved color contrast for "save" button, and added text description.

  • Made product detail images with no text alternatives accessible to screen readers by displaying text and adding description for multimedia videos.

  • Extracted essential text in HTML form, made "read before purchasing" more eye-catching.

bottom of page