Fix Accessibility Violations - Add Accessible Names to Interactive El… #1170
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fhammerschmidt
requested changes
Jan 22, 2026
Member
fhammerschmidt
left a comment
fhammerschmidt
left a comment
There was a problem hiding this comment.
Sorry, but ariaLabel should be camelCased.
Contributor
Author
It seems that there are some build errors, I will try to solve them. Thanks. |
Contributor
Author
Thanks for your help. Now it should work. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes 6 critical accessibility violations on website homepage identified by the IBM Equal Access Accessibility Checker, where interactive elements (links and buttons) containing only images/icons lacked accessible names, making them unusable for screen reader users.
Problems Identified
Issue 1: Logo Images Missing Alt Text (1 violations, blue box)
Violation: Hyperlink has no link text, label or image with a text alternative![]()
tags within the homepage link (responsive logo variants)
Elements: Two
Impact: Screen reader users cannot identify that these images are clickable links to the homepage or understand their purpose
Issue 2: Search Button Icon Missing Label (1 violation, red box)
Violation: SVG element has no accessible name
Element: Magnifier glass SVG icon within search button
Impact: Screen reader users cannot identify the button's purpose
Issue 3: Social Media Icon Links Missing Labels (4 violations, yellow box)
Violation: Hyperlink has no link text, label or image with a text alternative
Elements: GitHub, X (Twitter), Bluesky, and Discourse links containing only SVG icons
Impact: Screen reader users hear only "link" without any context about the destination
Solutions
Fix 1: Add Alt Text to Logo Images
Added descriptive
alt="ReScript Home"attributes to both logo image variants, clearly indicating they link to the homepage.Fix 2: Make Search Button Accessible
Added
aria-label="Search"to the search buttonFix 3: Add Aria-Labels to Social Media Links
Added descriptive
aria-labelattributes to each social media link:Testing
All icon elements have been added description text:
Screenshot of Fix After
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.