Fix Accessibility Violations for Social Media Buttons

[huangkevin-apr]

Summary

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

Problem

The IBM A11Y Checker identified the following issues: Hyperlinks Without Accessible Names (3 violations)
The buttons contain only icon elements without any accessible text alternative, making them invisible to screen reader users in terms of their purpose.

• Elements: GitHub, Twitter, and Slack buttons in the social buttons component
• 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 button links to
• WCAG Reference: WCAG 2.1 Success Criterion 2.4.4 (Link Purpose in Context)
• Location: layouts/partials/social-buttons.html

Solution

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

diff --git a/layouts/partials/social-buttons.html b/layouts/partials/social-buttons.html
index fe0e8ae..f05cb72 100644
--- a/layouts/partials/social-buttons.html
+++ b/layouts/partials/social-buttons.html
@@ -1,19 +1,19 @@
 <div class="buttons">
-  <a class="button is-small is-black is-outlined" target="_blank" href="{{ site.Params.github }}">
+  <a class="button is-small is-black is-outlined" target="_blank" href="{{ site.Params.github }}" aria-label="GitHub">
     <span class="icon">
       <i class="fab fa-github"></i>
     </span>
   </a>
 
-  <a class="button is-small is-twitter-blue" target="_blank" href="https://twitter.com/{{ site.Params.twitter }}">
+  <a class="button is-small is-twitter-blue" target="_blank" href="https://twitter.com/{{ site.Params.twitter }}" aria-label="Twitter">
     <span class="icon">
       <i class="fab fa-twitter"></i>
     </span>
   </a>
 
-  <a class="button is-small is-slack-green" target="_blank" href="{{ site.Params.slack }}">
+  <a class="button is-small is-slack-green" target="_blank" href="{{ site.Params.slack }}" aria-label="Slack">
     <span class="icon">
       <i class="fab fa-slack"></i>
     </span>
   </a>

[OrlinVasilev]

looks good to me, does that mean IBM is interested to join the project?

[huangkevin-apr]

looks good to me, does that mean IBM is interested to join the project?

Thanks a lot! 😊
Just to clarify: I’m not representing IBM, and this PR is from my side as an independent contributor/researcher.
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.
A11YRepair integrates IBM Accessibility Checker as a dependency for detecting and fixing violations.
The generated fixes were manually reviewed and validated before submission.