QR Code และ API การเข้าถึง

QR Codes and Accessibility APIs

Making QR code features accessible requires proper integration with screen readers, keyboard navigation, and ARIA attributes in web applications.

Screen Reader Support

QR code images must have meaningful alt text:

<img
  src="/api/qr?data=https://example.com"
  alt="QR code linking to example.com product page. URL: https://example.com/product"
  role="img"
/>

Alt text best practices: - Describe the QR code's purpose, not its appearance - Include the destination URL in the alt text - Keep alt text under 150 characters

Keyboard Navigation

For interactive QR code tools (generators, scanners):

• All controls must be keyboard-accessible (tab order, enter/space activation)
• Focus indicators must be visible on all interactive elements
• Escape key should close any QR code display modals

ARIA Attributes

<div role="region" aria-label="QR Code Generator">
  <input
    type="url"
    aria-label="URL to encode as QR code"
    placeholder="https://example.com"
  />
  <button aria-label="Generate QR code">Generate</button>
  <div
    role="img"
    aria-label="Generated QR code for https://example.com"
    id="qr-output"
  ></div>
</div>

Alternative Access Methods

A QR code should never be the only way to access content. Provide:

• Text link: Clickable/tappable URL alongside the QR code
• Copy button: One-click URL copy to clipboard
• NFC: Near-field communication as an alternative scan method
• Short code: "Visit example.com/abc or scan the QR code"

Camera Scanning Accessibility

For web-based QR scanning features:

• Provide permission request explanations before camera access
• Offer manual URL entry as an alternative to scanning
• Announce successful scans via aria-live regions
• Support keyboard-triggered scanning (enter key to capture frame)

Testing for Accessibility

• Test with VoiceOver (iOS/macOS) and TalkBack (Android)
• Test with screen readers on web (NVDA, JAWS)
• Run automated accessibility audits (Lighthouse, axe)
• Test keyboard-only navigation through the entire QR workflow
• Verify colour contrast meets WCAG AA standards

Key Takeaways

• QR code images must have descriptive alt text including the destination URL
• Provide text links alongside QR codes for screen reader and keyboard users
• All QR code tool controls must be keyboard accessible
• Use ARIA attributes to provide context for interactive QR features
• Test with actual screen readers, not just automated tools