Summary
ChaatBazaar's menu item cards are interactive elements (Add to Cart buttons, item click areas) but they are built in a way that makes them inaccessible to keyboard-only users and screen reader users. Specifically, there are no aria-label attributes on icon buttons, the cart interaction relies on mouse events only, and focus states are not visually indicated. This violates WCAG 2.1 AA — the baseline accessibility standard for web applications.
Problem
"Add to Cart" buttons do not have descriptive aria-label attributes (e.g., aria-label="Add Pani Puri to cart"), so screen readers announce them as generic "button".
Card click targets use onclick handlers on
elements rather than semantic or elements, making them unreachable by Tab key navigation.
No visible :focus styles — keyboard users cannot tell which element is currently focused.
Images lack meaningful alt text (e.g., alt="" or alt="food" instead of alt="Pani Puri — tangy tamarind water in crispy puris").
The cart icon and quantity controls have no keyboard support.
Impact
Screen reader users cannot add items to the cart or navigate the menu.
Keyboard-only users (motor-impaired, power users) cannot use the site at all.
The application fails a basic WCAG 2.1 AA audit, which is increasingly a legal compliance requirement in many jurisdictions.
Proposed Solution
I will perform a full accessibility audit and fix of the menu page and cart UI:
Replace
interactive elements with semantic
elements.
Add aria-label attributes to all icon-only buttons.
Add :focus-visible CSS styles that are visible and consistent with the orange theme.
Ensure all images have descriptive alt text.
Add role="status" to the cart count badge so screen readers announce changes.
Test with keyboard-only navigation and the NVDA/VoiceOver screen reader.
I will document the before/after accessibility improvements in the PR.
Could you assign this issue to me?
Labels: accessibility, bug, enhancement, GSSoC 2026
Summary
ChaatBazaar's menu item cards are interactive elements (Add to Cart buttons, item click areas) but they are built in a way that makes them inaccessible to keyboard-only users and screen reader users. Specifically, there are no aria-label attributes on icon buttons, the cart interaction relies on mouse events only, and focus states are not visually indicated. This violates WCAG 2.1 AA — the baseline accessibility standard for web applications.
Problem
"Add to Cart" buttons do not have descriptive aria-label attributes (e.g., aria-label="Add Pani Puri to cart"), so screen readers announce them as generic "button".
Card click targets use onclick handlers on
No visible :focus styles — keyboard users cannot tell which element is currently focused.
Images lack meaningful alt text (e.g., alt="" or alt="food" instead of alt="Pani Puri — tangy tamarind water in crispy puris").
The cart icon and quantity controls have no keyboard support.
Impact
Screen reader users cannot add items to the cart or navigate the menu.
Keyboard-only users (motor-impaired, power users) cannot use the site at all.
The application fails a basic WCAG 2.1 AA audit, which is increasingly a legal compliance requirement in many jurisdictions.
Proposed Solution
I will perform a full accessibility audit and fix of the menu page and cart UI:
Replace
Add aria-label attributes to all icon-only buttons.
Add :focus-visible CSS styles that are visible and consistent with the orange theme.
Ensure all images have descriptive alt text.
Add role="status" to the cart count badge so screen readers announce changes.
Test with keyboard-only navigation and the NVDA/VoiceOver screen reader.
I will document the before/after accessibility improvements in the PR.
Could you assign this issue to me?
Labels: accessibility, bug, enhancement, GSSoC 2026