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