Fix Accessibility Violations for Navbar Social Media Links

[huangkevin-apr]

Summary

This PR resolves 3 accessibility violations detected by the IBM Equal Access Accessibility Checker in the navigation bar social media links. The fix adds accessible names to icon-only links, ensuring screen reader users can identify the purpose of each social media link.

Problem

The IBM A11Y Checker identified the following issues: Hyperlinks Without Accessible Names (3 violations)

• Elements: Twitter, GitHub, and Slack links in the navbar
• Issue: Links contain only Font Awesome icons (<i class="fab fa-*">) without text or ARIA labels
• Rule Violated: Hyperlinks must have an accessible name for their purpose
• Impact: Screen reader users cannot identify which social media platform each link leads to
• WCAG Reference: WCAG Success Criterion 2.4.4 (Link Purpose in Context)

Current State
All three social media links in the navbar follow the same problematic pattern:

<a class="button ..." href="{{ $url }}">
  <span class="icon">
    <i class="fab fa-twitter" aria-hidden="true"></i>
  </span>
</a>

While the icons have aria-hidden="true" (correctly hiding them from screen readers), the parent links lack any accessible alternative, leaving them completely unlabeled for assistive technology users.

Solution

Added aria-label attributes to all three social media links to provide accessible names:

diff --git a/themes/containerd/layouts/partials/navbar.html b/themes/containerd/layouts/partials/navbar.html
index a0c8b72..80c40c2 100644
--- a/themes/containerd/layouts/partials/navbar.html
+++ b/themes/containerd/layouts/partials/navbar.html
@@ -72,19 +72,19 @@
         <div class="navbar-item">
           <div class="field is-grouped">
             <p class="control">
-              <a class="button has-background-twitter-blue is-borderless has-text-white" href="{{ $twitterUrl }}">
+              <a class="button has-background-twitter-blue is-borderless has-text-white" href="{{ $twitterUrl }}" aria-label="Twitter">
                 <span class="icon">
                   <i class="fab fa-twitter" aria-hidden="true"></i>
                 </span>
               </a>
 
-              <a class="button is-borderless has-background-black has-text-white" href="{{ $githubUrl }}">
+              <a class="button is-borderless has-background-black has-text-white" href="{{ $githubUrl }}" aria-label="GitHub">
                 <span class="icon">
                   <i class="fab fa-github" aria-hidden="true"></i>
                 </span>
               </a>
 
-              <a class="button has-background-slack-green is-borderless has-text-white" href="{{ $slackChannel }}">
+              <a class="button has-background-slack-green is-borderless has-text-white" href="{{ $slackChannel }}" aria-label="Slack">
                 <span class="icon">
                   <i class="fab fa-slack" aria-hidden="true"></i>
                 </span>

Accessibility Impact

This change ensures compliance with WCAG 2.1 Level A standards and improves the experience for:

• Screen reader users: Can now identify each platform ("Twitter, link", "GitHub, link", "Slack, link")
• Keyboard navigation users: Receive proper announcements when tabbing through navbar links
• Voice control users: Can navigate using commands like "click Twitter", "click GitHub", "click Slack"
• All assistive technology users: Understand icon-only links without relying on visual appearance

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.