This project improved accessibility and usability by addressing high-impact WCAG 2.2 issues across navigation, content hierarchy, contrast, and interaction patterns. The audit-led redesign reduced barriers for keyboard, screen-reader, and low-vision users while maintaining the site’s original business intent. It demonstrates my ability to translate accessibility standards into practical design decisions and build inclusive experiences at a system level.
Reflection
After redesigning the website, I validated all accessibility improvements using the Stark Accessibility Checker in Figma. The final designs meet WCAG 2.1 AA standards across color contrast, typography, touch targets, and semantic structure. Key accessibility issues identified during the audit, such as low color contrast, small interactive targets, missing alternative text, and unclear focus order, were systematically resolved. As a result, the final interface offers a more inclusive, readable, and operable experience for users who rely on assistive technologies, keyboard navigation, and touch inputs.
Accessibility Improvements & Validation
Accessibility Area
Issue Identified (Before)
Improvement Applied (After)
WCAG Requirement
Tool Used
Validation Result
Color Contrast
Low contrast text
Updated colors to meet contrast ratios
WCAG 1.4.3
Stark Plugin
Passed
Typography
Small text size
Increased font size & hierarchy
WCAG 1.4.4
Stark Plugin
Passed
Touch Targets
Buttons too small
Increased targets to 44×44px
WCAG 2.5.5
Stark Plugin
Passed
Alternative Text
Missing alt text
Added descriptive alt text
WCAG 1.1.1
Stark Plugin
Passed
Keyboard Navigation
Unclear focus order
Improved focus flow
WCAG 2.4.3
Stark Plugin
Passed
Semantic Structure
Missing accessible names
Added labels & structure
WCAG 4.1.2
Stark Plugin
Passed
Color Contrast Ratio
Touch Targets
Typography
High Fidelity Wireframes
Home Page
Before
After
Gallery Page
Before
After
Contact Page
Before
After
About us Page
Before
After
Menu Page
Before
After
Low Fidelity Wireframes
Annotations & Fixes
Design Goals
Perceivable
Improve content clarity and visibility
Ensure all images include meaningful alternative text, text meets WCAG color contrast standards, and content hierarchy is clearly communicated through consistent headings and spacing.
Operable
Enable seamless interaction across input methods
Increase interactive target sizes, clarify link purposes, and ensure all navigation and controls are fully usable via keyboard and assistive technologies.
Understandable
Reduce cognitive load and interaction ambiguity
Add clear labels to form elements, improve instructional clarity, and reduce ambiguity in links and interactive components.
Robust
Strengthen assistive technology compatibility
Fix ARIA-related issues, ensure correct state announcements for dynamic elements such as dropdowns, and maintain a consistent semantic structure across pages.
Legal Compliance
I conducted a WCAG 2.2 Level AAA accessibility audit to identify usability barriers affecting users with disabilities. Key issues included missing alt text, low color contrast, unclear link labels, and small touch targets, primarily impacting screen reader, keyboard-only, and low-vision users. These insights directly guided the design decisions in both low- and high-fidelity redesigns.
Accessibility Audit Findings & Analysis
Accessibility Audit Findings
Accessibility Audit Analysis
The audit showed that most critical issues fell under the Perceivable and Operable principles, creating barriers for users with visual and motor impairments. Repeated issues included missing alternative text, insufficient color contrast, low-contrast footer content, small interactive targets, and unclear social media links. Fewer issues appeared under Understandable and Robust, though missing labels and a malfunctioning FAQ dropdown still impacted assistive technology support. These findings guided the prioritization of high-impact accessibility improvements in the redesign.
Law/Regulation Name
In Compliance?
Brief Explanation
ADA Title II
Not Applicable
It is not applicable because it is privately owned restaurant website is not a government website.
ADA Title III
No
Even though it covers places of public accommodation such as restaurants, but the website has multiple accessibility Problems.
Section 504
Not Applicable
This is not applicable because this is an privately owned restaurant not organization at all to receive federal assistance and the restaurant does not receive any such funding at all.
Section 508
Not Applicable
This one applies for the federal agencies and certain contractors, not to a local private restaurant website.
Twenty-First Century CVAA
Not Applicable
The Twenty-First Century CVAA focuses on advanced communication services and video programming accessibility this site does not provide that type of content.
POUR Principle
WCAG Passes
WCAG Fails
Critical Issues
Moderate Issues
Key Issues & Frequency
Patterns / Trends
Legal Compliance
Perceivable
21
15
6
9
•
None of the images have alt text (4)
•
Insufficient color contrast (2)
•
Low color contrast text in all footer pages (3)
•
Critical issues appear across all three audited pages
•
Repeated problems with missing alt text and low color contrast
No
Operable
39
6
3
3
•
Footer social media links are unclear (3)
•
Social media icons are small (Minimum) (3)
•
Main navigation is largely keyboard accessible
•
Footer social media links are unlabeled and too small
No
Understandable
18
3
0
3
•
There are no critical issues
•
Content is written in clear language
•
Interactive contact elements lack labels
No
Robust
1
1
1
0
•
Drop down menu collapses (1)
•
Most elements are appropriate
•
FAQ dropdown on the home page does not clearly function
No
Analysis
Missing alternative text for images
WCAG 1.1.1 – Non-text Content
Impact: Screen reader users cannot understand product, gallery, or hero images
Low contrast footer text
WCAG 1.4.3 – Contrast (Minimum)
Impact: Footer links and address information are difficult to read
Social media icons too small
WCAG 1.4.11 – Non-text Contrast
Impact: Low-vision users have difficulty locating and interacting with icons
Insufficient text contrast in navigation
WCAG 1.4.3 – Contrast (Minimum)
Impact: Low-vision users struggle to read navigation items
Unclear social media link meaning
WCAG 1.3.1 – Info & Relationships
Impact: Screen reader users cannot identify the purpose of social media links
Inconsistent heading hierarchy
WCAG 1.3.1 – Info & Relationships
Impact: Assistive technologies misinterpret page structure and content order
Insufficient spacing between text elements
WCAG 1.4.12 – Text Spacing
Impact: Content becomes harder to read for users with visual or cognitive impairments
Perceivable
Interactive targets too small
WCAG 2.5.8 – Target Size (Minimum)
Impact: Users with motor impairments struggle to tap buttons and icons
Ambiguous link labels
WCAG 2.4.4 – Link Purpose (In Context)
Impact: Users cannot predict what will happen when a link is selected
Keyboard accessibility gaps
WCAG 2.1.1 – Keyboard
Impact: Keyboard-only users cannot fully navigate the site
Operable
Unclear or inconsistent content language
WCAG 3.1 – Readable / Plain Language
Impact: Users may misunderstand key information or instructions
Missing labels on contact form elements
WCAG 3.3.2 – Labels or Instructions
Impact: Screen reader users lack context when completing forms
Understandable
FAQ dropdown state not announced correctly
WCAG 4.1.2 – Name, Role, Value
Impact: Assistive technologies cannot detect expanded or collapsed states
Robust
This project focuses on redesigning the Fresh Sugarcane & Boba Juice website with a strong emphasis on accessibility and inclusive user experience. The goal was to evaluate the existing website against WCAG 2.2 Level AA/AAA standards, identify accessibility barriers, and translate those findings into meaningful design improvements. Through a structured accessibility audit, low-fidelity wireframing, and high-fidelity prototyping, the project demonstrates how accessibility principles can be integrated into a real-world restaurant website without compromising visual quality or brand identity.
About the Project
Problem
•
Users with disabilities encountered significant barriers navigating the website
•
Screen readers failed to properly interpret page structure and content
•
Insufficient color contrast made text difficult to read for low-vision users
•
Keyboard navigation was incomplete, limiting access for motor-impaired users
Aim
•
Ensure all users can access and interact with website content regardless of ability
•
Achieve full WCAG 2.2 Level AA compliance across all audited pages
•
Implement semantic HTML and ARIA attributes for improved assistive technology support
•
Create a more inclusive digital experience that serves the entire user base
Work Overview
Timeline
September - December 2025
Responsibilities
WCAG 2.2 Accessibility Audit
Identifying Accessibility Violations
Low- to High-Fidelity Redesign
Accessibility Testing & Validation
Disciplines
Accessibility Design
Human Computer Interaction
Tools
Figma
A11Y & Stark Plugin
TEAM
Preetham Kalle
Accessible Redesign for Fresh Sugarcane & Boba Juice
Designing an inclusive, WCAG 2.2 AAA-Compliant restaurant website
