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