Fix: Simplify accessible names for social media icons

[huangkevin-apr]

Summary

This PR addresses 3 accessibility violations identified by IBM Equal Access Accessibility Checker related to social media icons on website homepage. The fix simplifies SVG <title> elements to match their visible label text, ensuring consistency between visual and accessible content per WCAG Level A requirements.

Problem

The accessibility checker identified that accessible names for social media icons did not match their visible label text:

• Twitter icon: <title>Twitter Logo</title> doesn't match visible text "Twitter"
• GitHub icon: <title>GitHub Logo</title> doesn't match visible text "GitHub"
• YouTube icon: <title>YouTube logo</title> doesn't match visible text "YouTube"

**Issue: **According to WCAG 2.5.3 (Label in Name), when components have visible text labels, the accessible name should contain or match the visible text. Adding "Logo" or "logo" creates a mismatch that can confuse users, especially those using voice control who say "click Twitter" but the accessible name is "Twitter Logo."

Solution

Simplified all SVG <title> elements to exactly match their visible labels by removing the "Logo"/"logo" suffix:

// Before
<title>Twitter Logo</title>
<title>GitHub Logo</title>
<title>YouTube logo</title>

// After
<title>Twitter</title>
<title>GitHub</title>
<title>YouTube</title>

Fix After:

This ensures:

• Accessible names match visible labels exactly
• Voice control users can activate icons using the visible text
• Screen reader announcements are concise and match visual expectations
• Consistency across all social media icons

Testing

✅ Verified with IBM Equal Access Accessibility Checker
✅ All 3 accessible name mismatch violations resolved

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.