[A11Y] [Critical] Missing semantic structure and ARIA landmarks

[continue]

Accessibility Issue: Missing Semantic Structure and ARIA Landmarks

WCAG Level: A
Severity: Critical
Category: Semantic HTML

Issue Description

The application lacks proper semantic HTML structure and ARIA landmarks. Screen reader users cannot efficiently navigate between sections of the page.

User Impact

• Affected Users: Blind/Low Vision users, Screen reader users
• Severity: Users cannot navigate efficiently through the application sections

Violations Found

File: `index.html`

Lines: 12-71

Issues:

1. Missing `` landmark wrapper is present but sections inside lack `aria-label` for differentiation
2. Header element exists but lacks `role="banner"` fallback for older assistive technologies
3. Multiple similar sections without distinguishing labels for screen readers

---

Recommended Fix

Add `aria-label` attributes to differentiate sections:

```html

\`\`\`

Changes Needed:

1. Add `aria-label` to each section element
2. Ensure sections are distinguishable for screen readers

Testing Instructions

1. Navigate with screen reader (NVDA/VoiceOver)
2. Use landmarks navigation (NVDA: D key, VoiceOver: VO+U)
3. Verify each section is announced with its label
4. Test with Lighthouse accessibility audit

Resources

• WCAG 1.3.1 Info and Relationships
• MDN ARIA Landmarks

Acceptance Criteria

• All sections have aria-label attributes
• Screen reader can navigate between sections
• Lighthouse accessibility score improved
• Manual testing with screen reader completed

---