How to build an accessible QrCode in React
Rendered as role="img" with an accessible label so screen-reader users know a QR code is present; the underlying link should also be available as text since a QR code is not operable by assistive tech
When to use a QrCode
- Letting users scan a URL, contact, or short token with a phone camera
- Bridging print or screen to a digital destination
- Sharing a link where typing it would be error-prone
When not to use it
- Encoding long or sensitive payloads — QR codes are public and capacity-limited
- Where a plain, copyable link or button is more accessible
Accessibility
Role img, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <QrCode value={veryLongString} />
Prefer: <QrCode value="https://cascivo.dev/s/abc" />
Long payloads force a dense, hard-to-scan code; encode a short URL that redirects instead
Example
<QrCode value="https://cascivo.dev" />