Fix Accessibility Violations in Footer

[huangkevin-apr]

Status

READY/IN DEVELOPMENT/HOLD

Description

PR Summary

This PR fixes multiple WCAG accessibility violations in homepage identified by IBM Equal Access Accessibility Checker in the footer component.

All violations are located in /html[1]/body[1]/footer[1] and affect social media icons and links.

1. SVG Graphics Missing Accessible Names (6 violations)

• Rule: svg_graphics_labelled
• WCAG: 1.1.1 (Non-text Content)
• Issue: All SVG icons (Shorebird logo, Discord, GitHub, Twitter, LinkedIn, RSS) lacked accessible names for screen readers

2. Links Missing Text or Labels (5 violations)

• Rule: a_text_purpose
• WCAG: 2.4.4 (Link Purpose), 4.1.2 (Name, Role, Value)
• Issue: Social media links had no descriptive text, making them inaccessible to screen reader users

3. Buttons Missing Labels (5 violations)

• Rule: input_label_exists
• WCAG: 4.1.2 (Name, Role, Value)
• Issue: Icon-only buttons lacked associated labels

Issue Report

Screenshot of Violation Elements:

Violation Report:
http%3A%2F%2Flocalhost%3A4321%2F_llm_processed_group_size_final.json

Changes Made

1. Added <title> elements to all SVG components:

• logo-full.tsx: Added "Shorebird" title
• discord-logo.tsx: Added "Discord" title
• github-logo.tsx: Added "GitHub" title
• twitter-logo.tsx: Added "Twitter" title
• linkedin-logo.tsx: Added "LinkedIn" title

2. Added aria-label attributes to all social media buttons in footer.astro:

• Discord button: aria-label="Discord"
• GitHub button: aria-label="GitHub"
• Twitter button: aria-label="Twitter"
• LinkedIn button: aria-label="LinkedIn"
• RSS button: aria-label="RSS Feed"

3. Added title attribute to RSS icon for redundant accessibility support

Testing

✅ All 16 accessibility violations resolved
✅ Screen readers can now properly announce all social media links
✅ Keyboard navigation users receive clear context for each button
✅ Visual appearance unchanged

Note: This fix improves the experience for users relying on assistive technologies without affecting the visual design or functionality for sighted users.

Additional Info

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.

Type of Change

• ✨ New feature (non-breaking change which adds functionality)
• 🛠️ Bug fix (non-breaking change which fixes an issue)
• ❌ Breaking change (fix or feature that would cause existing functionality
  to change)
• 🧹 Code refactor
• ✅ Build configuration change
• 📝 Documentation
• 🗑️ Chore