Fix Accessibility Violations on Homepage

[huangkevin-apr]

Summary

This PR addresses all accessibility violations identified by the IBM Equal Access Accessibility Checker on the homepage, improving the site's compliance with WCAG standards and ensuring a better experience for all users.

Issues Fixed

🔴 Critical Issues (6 items)

1. Missing navigation landmarks labels

• Issue: Multiple elements lack unique aria-label or aria-labelledby attributes
• Impact: Screen reader users cannot distinguish between different navigation regions
• Fix: Added descriptive aria-label to each navigation element

2. Missing alt text for images

• Issue: Multiple elements without alt attributes
• Impact: Screen reader users cannot understand image content
• Fix: Added descriptive alt text to all images, or alt="" for decorative images

3. Non-landmark content

• Issue: Content exists outside of landmark elements (header, main, nav, footer)
• Impact: Difficult for assistive technology users to navigate page structure
• Fix: Wrapped content in appropriate semantic HTML5 landmarks

4. Missing heading hierarchy

• Issue: Page heading structure skips levels or is not properly nested
• Impact: Screen reader users rely on heading structure for navigation
• Fix: Reorganized headings to follow proper h1 → h2 → h3 hierarchy

5. Missing link context

• Issue: Hyperlinks lack sufficient context (link text or aria-label)
• Impact: Links read as unhelpful text like "click here" or "learn more"
• Fix: Updated link text to be descriptive or added aria-label attributes

Fix Before:

Fix After:

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications.
The generated fixes were manually reviewed and validated before submission.