Role and semantics
Section titled “Role and semantics”QrCode draws a figure. The SVG has the img role and is named by label; the caption is a figcaption. The logo is hidden with aria-hidden.
Keyboard
Section titled “Keyboard”QrCode takes no focus.
It has no focusable element; a link placed in caption uses its own focus. logo is hidden from screen readers, so never put a link in it.
Screen reader output
Section titled “Screen reader output”| Example | Read as |
|---|---|
| Code | “Payment link QR code, image” |
| Caption | “Reference: 12345678” |
Contrast
Section titled “Contrast”Modules are black and the background white in every mode (21:1). Colours do not change in forced colours mode or in print.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How QrCode meets it | What the product team does |
|---|---|---|
| 1.1.1 Non-text content | role="img" and label. |
Also show the reference and the address as text. |
| 1.4.11 Non-text contrast | Black modules on white. | Do not place anything over the code. |