Enhance Accessibility: Add ARIA Labels to Social Media Links in Footer

[huangkevin-apr]

Description

This PR fixes accessibility violations by adding descriptive aria-label attributes to social media icon links in the footer component.

Problem

The IBM Equal Access Accessibility Checker identified two violations in homepage where hyperlinks containing only icon elements (GitHub and Twitter) lacked accessible text alternatives. Screen reader users were unable to identify the purpose of these links, as they only contained Font Awesome icons with aria-hidden="true".

Detected Violations:

• Hyperlinks must have an accessible name for their purpose
• Affected elements: GitHub and Twitter footer links

Solution

Added explicit aria-label attributes to both social media links:

• GitHub link: aria-label="GitHub"
• Twitter link: aria-label="Twitter"

This provides screen readers with clear, descriptive text for each link while maintaining the visual icon-only design.

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.

Testing

• Verified with IBM Equal Access Accessibility Checker - all violations resolved
• Tested with screen reader - links now announce properly as "GitHub link" and "Twitter link"
• Visual appearance unchanged
• Links function correctly

Impact

This change improves accessibility for screen reader users by ensuring all interactive elements have clear, descriptive labels, making the website more inclusive and compliant with accessibility standards.

[cubic-dev-ai]

No issues found across 1 file