Skip to content

Conversation

@huangkevin-apr
Copy link
Contributor

Summary

This PR fixes accessibility violations in the Quick Install section where copy-to-clipboard buttons lack accessible labels, making them unusable for screen reader users.
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.

Problems Identified

The IBM Equal Access Accessibility Checker identified critical violations:

Issue 1: npm install Command Copy Button

  • Violation: Form control element <button> has no associated label
  • Element: Copy button for npm install rescript command
  • Impact: Screen reader users cannot identify the button's purpose or what content will be copied

Issue 2: npx create Command Copy Button

  • Violation: Form control element <button> has no associated label
  • Element: Copy button for npx create-rescript-app command
  • Impact: Screen reader users cannot identify the button's purpose or what content will be copied

Solution

Added a descriptive ariaLabel prop to the copy button that dynamically includes the command being copied:

ariaLabel={"Copy " ++ code ++ " command"}

Testing

  • Validated with IBM Equal Access Accessibility Checker - both violations resolved
  • Tested with screen readers (NVDA/JAWS) to confirm proper label announcement
  • Verified labels are correctly generated for both commands

Fix Before:
image

**Fix After:""
image

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