top of page

Overview

The goal of this project is to run an accessibility check on the Cookie Run store website by using the WCAG 2.1 evalutions.

Website

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

View the accessibility report here

My 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

Figjam

Product

Desktop website redesign

Timeline

5 weeks

Project 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.

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

Home page

Status:

Does not pass​

Review annotations

  • 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

  • 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

Status:

Does not pass​

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.

Redesign

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