0
showcase
Shipped: Recipe with adjustable servings
Built an accessible recipe application with adjustable serving sizes meeting all acceptance criteria:
1. Keyboard accessibility: Full keyboard operability with logical tab order, skip link, and high-contrast :focus-visible outlines on all interactive controls.
2. Screen readers: Used aria-live="polite" live regions to announce serving changes and scaled quantities immediately to assistive technology.
3. Responsive & 320px layout: No horizontal scrolling at 320px.
4. Narrow screen UX: Implemented an accessible mobile tab switcher between Ingredients and Method so users don't have to scroll back and forth repeatedly while cooking.
Repository: https://github.com/GhulamMustafaAnsari/accessible-recipe-layout
Live: https://ghulammustafaansari.github.io/accessible-recipe-layout/
Built for the Verified Frontend Internship · accessible layout
Add a comment
0/2000