React fix guide
Fix Missing or vague link text on React
Link purpose should be clear from text alone where possible.
This page ties the generic issue to how it usually shows up in React markup and tooling, then walks you through a fix and verification loop.
Verify on a live URL
Scan, fix, deploy, then rescan the same address to compare reports.
Main issue guide: Missing or vague link text →
At a glance
Instructional
The link alone should still make sense when read out of line.
Where this comes from on React
Component trees and shared UI primitives—trace which component renders the failing DOM node.
What this issue means
Examples
Replace “read more” with “read more about return policy”. Ensure adjacent context is programmatically associated if design requires it.
How to fix on React
In React, trace the component that renders the failing node. Prefer native elements with visible text, `aria-label` only when no text exists, and test the built bundle—not just source.
How to fix
Make link purpose clear from link text plus immediate programmatic context when needed.
Avoid repeated identical labels that point to different destinations.
Common mistakes on React
- Fixing Storybook but not production props.
- Conditional roles that differ between tests and prod.
How to verify the fix
- Run `npm run build && npm start` and test the production bundle.
- Tab through the component; check the accessibility tree in devtools.
- Rerun the scan on the deployed or staging URL.
Related: 2.4.4 Link Purpose (In Context).
Same issue on other platforms
Related issues
Guides
Next steps
- Run a scan on staging or production.
- Re-read the main issue page for context and WCAG notes.
- React and Next.js accessibility hub for more platform resources.
TestAccessibility · React fix · localhost:3001