Skip to content

Fix Accessibility Violations for RSS Button and Theme Toggle - #636

Open
huangkevin-apr wants to merge 1 commit into
vercel:mainfrom
huangkevin-apr:fix-a11y-button
Open

Fix Accessibility Violations for RSS Button and Theme Toggle#636
huangkevin-apr wants to merge 1 commit into
vercel:mainfrom
huangkevin-apr:fix-a11y-button

Conversation

@huangkevin-apr

Copy link
Copy Markdown

Description

  • Adding new page
  • Updating existing documentation
  • Other updates

This PR fixes two accessibility violations identified by IBM Equal Access Checker:

  • RSS button missing accessible name (a_text_purpose violation)
  • Theme toggle button missing label (input_label_exists violation)

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)
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.

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

  • Added aria-label="RSS Feed" to provide an accessible name for the link
  • Added title="RSS Feed" to provide a tooltip for mouse users
  • The RSS icon already has proper ARIA markup and remains unchanged

Theme Toggle (components/geistdocs/theme-toggle.tsx)

  • Added aria-label="Toggle theme" to the loading state button
  • Added dynamic aria-label to 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
  • This provides clear context about what action the button will perform

Screenshot of Patched Website

image image image

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:

  • 2.4.4 Link Purpose (In Context) - Level A
  • 4.1.2 Name, Role, Value - Level A

@vercel

vercel Bot commented Jan 9, 2026

Copy link
Copy Markdown
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.

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