top of page


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


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

My Role

User Research

Accessibility Audit

Visual Design



WAVE version 3.1.6

Web AIM Contrast Checker

ANDI, Apache License 2.0

A11y Contrast Checker




Desktop website redesign


5 weeks

Project roadmap



Evaluating 3 pages of the Cookie Run website using at least 3 WCAG 2.1 criteria on each page. 



Analyzing if the page passes the evaluation.



Creating screens with improved accessibility.

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



  • Accessibility analysis report of the website

  • Mid-fi wireframes of improved solution.

Home page


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


Does not pass​

Product page


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.


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