# Alt text and screen readers for QR codes

> Alt text for a QR code should state what scanning does and where it leads — "QR code linking to the dinner menu at example.com/menu" — never just "QR code". Pair every on-screen code with a clickable link or short URL, because a screen-reader user cannot aim a camera at their own display.

Source: https://useqr.app/docs/design/qr-code-alt-text-and-screen-readers · Last reviewed 2026-08-21 · UseQR is free forever, MIT licensed, no signup.

---

## The pattern: destination plus action

Alt text answers the question a screen reader user actually has: *what does this image do
for me?* For a QR code that is always "scanning it takes you somewhere", so the alt text
states the somewhere.

```html
<!-- Useless: announces the format, withholds the content -->
<img src="menu-qr.png" alt="QR code">

<!-- Correct: destination and action -->
<img src="menu-qr.png"
     alt="QR code linking to the dinner menu at example.com/menu">
```

Include the human-readable domain and path. Keep the whole string under about **125
characters** — a long-standing screen-reader guideline — which rules out pasting a full
URL with query strings into the alt attribute.

## A QR code on screen is a broken control

For a screen reader user, an image-only QR code is worse than undescribed — it is
*unusable*, because nobody can aim a phone camera at the display they are currently
browsing. The same trap catches every sighted visitor on a phone: you cannot scan a code
with the device showing it (see
[scanning a code on the same phone](/docs/scanning/how-to-scan-a-qr-code-on-the-same-phone)).

The fix is structural, not descriptive: every on-screen QR code needs a **clickable link
to the same destination** next to it. One clean pattern:

```html
<figure>
  <img src="menu-qr.svg" alt=""
       role="presentation">
  <figcaption>
    Scan to open the menu, or visit
    <a href="https://example.com/menu">example.com/menu</a>
  </figcaption>
</figure>
```

Here the caption's real link carries the information, so the image is marked decorative
(`alt=""`). The alternative is meaningful alt text on the image and no adjacent link.
**Exactly one of the two should name the destination** — both at once makes screen readers
announce it twice. More on the visible-URL half of this pattern in
[QR code next to a short URL](/docs/design/qr-code-next-to-a-short-url-fallback).

## Inline SVG codes

An inline [SVG](/glossary/svg) has no alt attribute; give it a role and a title:

```html
<svg role="img" aria-labelledby="qr-menu-title" viewBox="0 0 33 33">
  <title id="qr-menu-title">QR code linking to the dinner menu at example.com/menu</title>
  <!-- modules -->
</svg>
```

In markdown, the alt slot works the same way. UseQR's direct image endpoint drops into it:

```markdown
![QR code linking to example.com/menu](https://useqr.app/q/https%3A%2F%2Fexample.com%2Fmenu.png)
```

## Print has no alt attribute

On paper the accessibility layer is the printed short URL under the code — it serves
screen-reader users photographing the page with OCR, users whose cameras fail, and
everyone who meets the page somewhere a scan is impractical. Treat the
[short URL fallback](/docs/design/qr-code-next-to-a-short-url-fallback) as the print
equivalent of alt text, and hold it to the same standard: short, readable, typeable.

## What not to put in alt text

- The raw payload with query strings and [UTM parameters](/glossary/utm-parameter) — noise
  read aloud character by character.
- "Scan me" or other CTA copy — that is visual rhetoric, not information.
- Instructions for scanning — the user of a screen reader needs the link, not a tutorial;
  general scanning guidance lives at [how to scan a QR code](/docs/scanning/how-to-scan-a-qr-code).

## FAQ

### What should the alt text of a QR code say?

State the action and the destination: "QR code linking to the dinner menu at
example.com/menu". Never just "QR code" — that tells a screen reader user the format of an
image they cannot use, while withholding the one thing they need.

### Should a QR code image be a link?

On screen, yes — wrap the image in an anchor to the same destination, or put a visible
text link beside it. A screen-reader user, and anyone browsing on the phone itself, cannot
scan the display they are reading.

### Should alt text include the full URL?

Include the readable domain and path, not the full payload. Query strings and tracking
parameters are read out character by character and carry nothing a listener can use. Keep
the whole alt string under roughly 125 characters.

### How do I make an inline SVG QR code accessible?

Give the svg element role="img" and an aria-labelledby pointing at a title element that
names the destination. Without it, screen readers either skip the graphic entirely or
announce meaningless path data.

## Try it

- https://useqr.app/url
- https://useqr.app/scan
