fix: resolve accessibility violations in navigation, landmarks, and S…

[huangkevin-apr]

Description

This PR addresses several accessibility (a11y) violations identified by the IBM Equal Access Accessibility Checker. The changes focus on improving screen reader navigation, providing accessible names for non-text content, and ensuring correct landmark structuring.

Key Changes

1. Unique Labels for Navigation Landmarks
Issue: Multiple elements with the navigation role lacked unique labels, making it difficult for screen reader users to distinguish between header and footer navigation.
Fix: Added descriptive aria-label attributes to separate navigation regions.

2. Accessible Names for SVGs
Issue: The RemixLogo (a non-decorative SVG) did not have an accessible name.
Fix: Added role="img" and a <title> element to the RemixLogo component to ensure its purpose is announced to assistive technologies.

3. Home Link Clarity
Issue: The primary logo link in the Navbar lacked clear text or a label.
Fix: Added aria-label="Home" to the Link component in navbar.tsx to provide clear context for the destination.

4. Content Placement within Landmarks
Issue: Identified content residing outside of defined landmark roles.
Fix: Refactored footer.tsx to wrap content within semantic <footer> and <nav> tags, ensuring all page content is discoverable via landmark navigation.

Testing Instructions

• Deploy the branch to a preview environment.
• Run the IBM Equal Access Accessibility Checker on the Homepage.
• Verify that the "Violations" count is reduced and all violations are resolved.

Screenshots

• Fix Before

• Fix After