Skip to content

Conversation

@huangkevin-apr
Copy link

Issue Description

The IBM Equal Access Accessibility Checker identified a violation on website homepage:

  • Issue: Hyperlink has no link text, label or image with a text alternative
  • Element: <a href="/" class="logomark"> containing only an SVG image
  • Impact: Screen reader users cannot determine that this link navigates to the home page
image

Why is this important?
When the purpose of a link is clear users can easily navigate links on the page without having to see the surrounding information for context.

Changes Summary

This PR fixes an accessibility violation where the logo link in the navigation header lacked an accessible name, making it difficult for screen reader users to understand the link's purpose.

Generated Patch

Added proper accessibility attributes to the logo link:

  • Added aria-label="Home" to provide a clear, descriptive label for screen readers
  • Wrapped the SVG include in a <span aria-hidden="true"> to prevent redundant announcements

Testing

  • Validated with IBM Equal Access Accessibility Checker
  • Tested with screen readers to confirm "Home" is announced
  • Visual appearance remains unchanged
  • Link functionality works as expected

Additional Notes

This follows best practices for accessible logo links by:

  • Providing explicit text alternative via aria-label
  • Hiding decorative SVG from assistive technology with aria-hidden="true"
  • Maintaining semantic HTML structure

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.

This pull request is ready for review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant