Altwise

QR codes and QR code menus: making the pages they open accessible

How to make QR code menus, price lists, review cards and scan-to-pay pages accessible: a real text page instead of a menu photo, phone-first layout with zoom, clear page titles, a printed short address, alt text for QR images on websites, and contrast.

QR codes are everywhere on small business materials: restaurant table menus, brewery tap lists, salon price cards, event flyers, real estate yard signs, "leave us a review" cards, church bulletins and "scan to pay" stickers at the counter. The square itself is printed, but what it opens is a web page, and that page is where most accessibility problems hide. A QR code that opens a blurry photo of a paper menu, or a PDF that needs pinching and zooming on a phone, shuts out people using screen readers, people with low vision and anyone on a small screen. This guide covers how to make QR codes and the pages behind them work for everyone.

1. Make the page behind the code a real web page

The most common problem is a QR code that opens a photo or scan of the printed menu or price list. Text inside a picture can't be read by screen readers, can't be translated and turns blurry when zoomed (WCAG 1.4.5). Put the menu, price list or event details on a normal web page with headings for each section and real text for every item and price (WCAG 1.3.1). If you must link a PDF, make it a tagged, text-based PDF and offer the web page too. See accessible PDFs and menus and accessible tables for prices and hours.

<html lang="en">
<head><title>Dinner menu - Example Cafe</title></head>
<body>
  <h1>Dinner menu</h1>
  <h2>Starters</h2>
  <ul>
    <li>Tomato soup, $7. Vegetarian, contains dairy.</li>
  </ul>
</body>
</html>

(The menu item above is example data.)

2. Build it for phones first

Almost everyone who scans a QR code is on a phone. The page should read top to bottom without sideways scrolling (WCAG 1.4.10), let people zoom text to 200% without losing anything (WCAG 1.4.4), and never block pinch-zoom in the viewport settings. Buttons such as "Order", "Pay" or "Leave a review" should be easy to tap, at least 24 by 24 CSS pixels (WCAG 2.5.8). See mobile accessibility, zoom and tap targets.

3. A clear page title and language

When the page opens, a screen reader first reads its title. "Dinner menu - Example Cafe" tells people they landed in the right place; "Untitled" or "menu_final_v3.pdf" doesn't (WCAG 2.4.2). Set the page language so it is read with the right voice (WCAG 3.1.1). If you offer a Spanish menu, link it clearly from the top of the page. See page titles, language and bilingual pages.

4. Don't make the QR code the only way in

Some people can't point a camera at a small square: they may be blind, have a tremor, have an older phone, or simply have no data. Print a short, readable web address next to every code, such as "examplecafe.com/menu", and keep printed menus or a staff member available on request. Physical signs and printed cards are outside the website guidelines, but a short address costs nothing and helps everyone. For "scan to pay" or "scan to check in", keep another way to pay or check in.

5. QR codes shown on your website

If a QR code appears on a web page, for example to download an app, join a Wi-Fi network or pay by a payment app, a screen reader can't scan it. Give the image alt text that says what it is for, and put a normal link or the details in text right next to it (WCAG 1.1.1). A link that says where it goes, like "Download our app from the App Store", works better than "Scan here" (WCAG 2.4.4).

<img src="review-qr.png" alt="QR code to leave us a review">
<p>On a computer? <a href="https://example.com/review">Leave us a review</a>.</p>

6. Contrast and print size

On the web page, menu text and prices need 4.5:1 contrast against the background (WCAG 1.4.3). Grey text on a photo of wood or a chalkboard is a common failure. In print, a dark code on a light background, printed large enough and away from glare, is easier for every camera to read.

7. Menus with ordering, allergens and options

If the QR page lets people order or pay at the table, the ordering steps need to work by keyboard and screen reader too: named buttons, labelled options, clear errors and a confirmation that is announced. Allergen and dietary notes should be written in words, not only as small icons or colours. See restaurant online ordering and colour-only meaning.

Common mistakes

A 5-minute check you can do today

  1. Scan each of your QR codes with your own phone. Does it open a real text page, or an image or PDF?
  2. Try to select a word on that page. If you can't, it is a picture of text.
  3. Zoom in with two fingers. Does the text get bigger and stay readable without sideways scrolling?
  4. Turn on your phone's screen reader (VoiceOver or TalkBack) and swipe through the first few items. Do prices and names make sense?
  5. Check that a short web address is printed next to every code.
  6. Test that each code still works, especially any made with a free short-link tool.

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can visit the page your QR code opens and flag missing page titles, missing language, images with no alt text, low contrast text, blocked zoom and unclear links. It can't scan the printed code, check whether a menu photo matches the real prices, or tell whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your QR menu and ordering pages, and gives copy-paste fixes for your platform.

Setting up QR menus or landing pages for several clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any QR code generator, menu app or website builder.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.