Fix Accessibility Violations for Header Icon Links

[huangkevin-apr]

Please check if the PR fulfills these requirements

• The commit message follows our guidelines
• Tests for the changes have been added (for bug fixes / features) - N/A for accessibility fix
• Docs have been added / updated (for bug fixes / features) - Inline comments added for maintainability

Which issue(s) this PR fixes:
Fixes #757

What kind of change does this PR introduce?

Bug fix - Accessibility compliance improvement

What is the current behavior?

The three icon-only links in the header navigation (GitHub, Twitter/X, Slack) lack accessible names, causing WCAG 2.1 Level A violations:

• Issue: Hyperlinks must have an accessible name for their purpose (Success Criterion 2.4.4)
• Impact: Screen reader users cannot identify the purpose of these icon links
• Detection: IBM Equal Access Accessibility Checker reports 3 violations
• Current behavior: Screen readers announce these links as just "link" without any context about their destination

Current configuration in docusaurus.config.js:

{
  href: "https://github.com/kubeedge/kubeedge",
  position: "right",
  className: "header-github-link heade-icon",
  // No aria-label - link purpose is invisible to screen readers
}

Screen reader experience:

• User hears: "link" (no indication it goes to GitHub)
• User must guess the purpose or explore the link's destination
• Creates accessibility barrier for users with visual disabilities

What is the new behavior?

After this fix, all three icon links have descriptive aria-label attributes that screen readers can announce:

Updated configuration:

{
  href: "https://github.com/kubeedge/kubeedge",
  position: "right",
  className: "header-github-link heade-icon",
  "aria-label": "GitHub repository", // Accessibility: Add aria-label for icon-only link
}

Improved screen reader experience:

• GitHub link announces: "GitHub repository, link"
• Twitter link announces: "KubeEdge Twitter, link"
• Slack link announces: "KubeEdge Slack community, link"

Benefits:

• ✅ All 3 accessibility violations resolved (verified with IBM A11Y Checker)
• ✅ Screen reader users can identify each link's purpose without exploration
• ✅ Complies with WCAG 2.1 Level A standards
• ✅ No visual changes to the header design
• ✅ Improves UX for keyboard navigation and voice control users

Technical implementation:

• Added aria-label property to navbar item configurations in docusaurus.config.js
• Labels are applied at build time by Docusaurus
• Inline comments document the accessibility purpose for future maintainers
• Works consistently across all pages (homepage, docs, blog, case studies)

Does this PR introduce a breaking change?

No. This PR does not introduce any breaking changes.

• No changes to visual design or layout
• No changes to functionality or user interactions
• No API changes
• No configuration breaking changes (only additive properties)
• Fully backward compatible with existing Docusaurus builds
• All existing links continue to work exactly as before

Other information:

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.

[kubeedge-bot]

Welcome @huangkevin-apr! It looks like this is your first PR to kubeedge/website 🎉

[gemini-code-assist]

Summary of Changes

Hello @huangkevin-apr, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the accessibility of the website by resolving critical WCAG 2.1 Level A violations related to icon-only links in the header. By introducing descriptive "aria-label" attributes, the change ensures that screen reader users can now clearly understand the purpose and destination of the GitHub, Twitter/X, and Slack navigation links, thereby improving overall user experience for individuals with visual disabilities without altering the site's visual presentation or introducing any breaking changes.

Highlights

• Accessibility Fix for Header Icon Links: Addressed WCAG 2.1 Level A violations by providing accessible names for the GitHub, Twitter/X, and Slack icon-only links in the header navigation.
• Improved Screen Reader Experience: Implemented "aria-label" attributes for these links, allowing screen readers to announce descriptive names like "GitHub repository, link" instead of just "link", significantly enhancing usability for visually impaired users.
• No Visual or Breaking Changes: The fix introduces no visual changes to the header design, functionality, or user interactions, and is fully backward compatible, ensuring a seamless update.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request correctly addresses a significant accessibility issue by adding aria-label attributes to icon-only links in the header, making them understandable for screen reader users. The change is well-documented and effectively resolves the reported WCAG violation. My review includes one suggestion to further improve accessibility by internationalizing these new labels, ensuring a consistent experience across all supported languages.

[gemini-code-assist]

While adding aria-label is a great step for accessibility, these labels are hardcoded in English. Since the site supports internationalization (i18n) for English and Chinese, these labels should also be translated to provide an accessible experience for all users. Currently, a screen reader user on the Chinese version of the site will hear an English label for these links. Please consider making these labels translatable.

[kubeedge-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: fujitatomoya
To complete the pull request process, please assign kevin-wangzefeng after the PR has been reviewed.
You can assign the PR to them by writing /assign @kevin-wangzefeng in a comment when ready.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment