Day 5: Web Accessibility (a11y) & Week 7 Mini-Project

Daily Objective

Audit web accessibility (a11y) and convert your Week 4 page into a fully responsive site.

1. Core Accessibility Checklist

• Color Contrast: Minimum 4.5:1 ratio for regular text against background.
• Keyboard Navigation: Ensure interactive elements have distinct :focus-visible rings.
• Screen Reader Text: Provide meaningful alt attributes on images and aria-label where necessary.

:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

---

Week 7 Mini-Project: Fully Responsive Web Page

Project Requirements:

1. Convert your Week 4 product card page into a fully responsive multi-device experience.
2. Mobile-first design using min-width breakpoints (768px, 1024px).
3. Use CSS custom properties (:root) for colors and spacing.
4. Implement fluid typography with clamp().
5. Polish with subtle transitions and verified accessibility contrast.