Alt text and screen readers for QR codes

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.

<!-- 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).

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:

<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.

Inline SVG codes

An inline SVG has no alt attribute; give it a role and a title:

<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:

![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 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 — 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.

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.