Drawer

Accessibility Checklist

Project Name

My Favorite Food – Sola Puri

Accessibility Review Accessibility Requirement Status Notes Color contrast meets WCAG AA ✅ Pass White text on dark header (12.6:1), dark text on white background (15.3:1). Clear heading hierarchy ✅ Pass One H1, multiple H2s, and H3s used correctly. Easy-to-read fonts ✅ Pass Poppins for headings and Inter for body text. Body text size is readable ✅ Pass 18px body text with good line spacing. Keyboard navigation ✅ Pass Navigation follows a logical tab order. ARIA landmarks included ✅ Pass Banner, Navigation, Main, Region, Footer. Images include meaningful alt text ✅ Pass All food images have descriptive alt text. Buttons have visible focus state ✅ Pass Focus outline added for keyboard users. Sufficient spacing between elements ✅ Pass Consistent spacing improves readability. Links are clearly identifiable ✅ Pass Navigation links use high contrast and clear styling. Color Palette Purpose Color Contrast Header #2F2F2F AA ✔ Background #FFFFFF AA ✔ Headings #C0392B AA ✔ Body Text #1F2937 AAA ✔ Buttons #C0392B AA ✔ Button Text #FFFFFF AA ✔ Typography Element Font Size H1 Poppins Bold 42px H2 Poppins SemiBold 30px H3 Poppins Medium 24px Body Inter Regular 18px Navigation Order
  1. Skip to Main Content
  2. Home
  3. About
  4. Why I Love It
  5. Recipe
  6. Gallery
  7. Footer
ARIA Landmarks
  • Header → banner
  • Navigation → navigation
  • Main Content → main
  • Recipe Section → region
  • Gallery Section → region
  • Footer → contentinfo
Alt Text Examples

Image 1:
"Freshly prepared Sola Puri served with hot potato curry on a white plate."

Image 2:
"Golden puffed puris served with traditional South Indian potato masala."

Accessibility Tools Used
  • WebAIM Contrast Checker
  • WCAG 2.1 Guidelines
  • Colour Contrast Analyser
  • W3C Accessibility Guidelines
Final Accessibility Summary

✔ WCAG AA color contrast achieved.

✔ Clear heading structure for screen readers.

✔ Logical keyboard navigation order.

✔ Descriptive alt text for all images.

✔ Readable typography with adequate spacing.

✔ Proper ARIA landmarks for improved accessibility.

✔ Focus indicators included for interactive elements.