Designing Swiggy to Be Truly Accessible (Episode 4)
Article Summary
Swiggy tackled mobile web accessibility and discovered that following W3C guidelines was just the starting point. The real challenge? Making a food delivery app work seamlessly for screen reader users.
This is Episode 4 of Swiggy's accessibility series, focusing on their mobile web implementation. The team shares practical solutions for complex user flows like restaurant browsing, cart management, and payments when users navigate via swipe gestures.
Key Takeaways
- Grouped restaurant card info into single swipes, reducing navigation by 70%
- Built focus traps for dialogs to prevent users getting lost behind popups
- Reordered payment methods to prioritize one-click options for screen readers
- Added hidden skip links so users bypass entire menus to reach CTAs
- Used session storage to restore focus when users return from menu pages
Swiggy made their mobile web ordering flow accessible by solving custom navigation challenges that go beyond standard WCAG recommendations.
About This Article
Screen reader users on Swiggy's menu pages had to swipe through every single menu item to reach the View Cart button. This made ordering slower and forced them to take extra navigation steps.
Rahul Arora's team added hidden skip navigation links using the CSS clip property. These links let screen reader users jump straight to the View Cart button without going through the entire menu.
Users can now add items and go directly to checkout with skip links. They no longer need to swipe through complete menu lists, which cuts down the number of steps required for people using assistive technology.