Skip to content

fix(loader): add aria attributes for screen reader accessibility#46

Open
msmps wants to merge 1 commit intocloudflare:mainfrom
msmps:fix/loader-aria-accessibility
Open

fix(loader): add aria attributes for screen reader accessibility#46
msmps wants to merge 1 commit intocloudflare:mainfrom
msmps:fix/loader-aria-accessibility

Conversation

@msmps
Copy link

@msmps msmps commented Feb 8, 2026

Description

  • Add role="status" and aria-label="Loading" to the Loader SVG component
  • Resolves WCAG 2.1 SC 4.1.3 (Status Messages - Level AA) violation

Problem

The Loader component renders an SVG spinner without any accessibility attributes, making it completely invisible to screen readers. When used as a loading indicator (e.g., in buttons, page transitions, async operations), assistive technology users receive no indication that content is loading.

Screen readers skip over the Loader entirely - users hear nothing.

Solution

Add two ARIA attributes to the SVG element:

  • role="status" - Indicates this is a live region for status updates
  • aria-label="Loading" - Provides the accessible name announced by screen readers

Screen readers announce "Loading, status" when the Loader is present.

Testing

Verified with VoiceOver on macOS:

  1. Enable VoiceOver (Cmd + F5)
  2. Navigate to a Loader component (Ctrl + Option + →)
  3. Confirm announcement: "Loading, status"

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