Fix Accessibility Violations for RSS Button and Theme Toggle - #636
Open
huangkevin-apr wants to merge 1 commit into
Open
Fix Accessibility Violations for RSS Button and Theme Toggle#636huangkevin-apr wants to merge 1 commit into
huangkevin-apr wants to merge 1 commit into
Conversation
Contributor
|
@huangkevin-apr is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
This PR fixes two accessibility violations identified by IBM Equal Access Checker:
These violations affect users relying on assistive technologies like screen readers, as the buttons lack proper labels to convey their purpose.
Issue Description
When running IBM Accessibility Checker (Version 4.0.9) on the website, 2 accessibility violations were reported.
1) RSS button missing accessible name (a_text_purpose violation)

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.
2) Theme toggle button missing label (input_label_exists violation)

Why is this important?
Associating a meaningful label with every UI control allows the browser and assistive technology to expose and announce the control to a user. Associating a visible label also provides a larger clickable area.
Fix Description
RSS Button (
components/geistdocs/rss-button.tsx)aria-label="RSS Feed"to provide an accessible name for the linktitle="RSS Feed"to provide a tooltip for mouse usersTheme Toggle (
components/geistdocs/theme-toggle.tsx)aria-label="Toggle theme"to the loading state buttonaria-labelto the interactive button that updates based on current theme:"Switch to light mode" when in dark mode
"Switch to dark mode" when in light mode
Screenshot of Patched Website
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.
WCAG Compliance
These changes address the following WCAG Success Criteria: