Accessible restaurant menus: why a picture of a menu fails, and what to do instead

Why it matters for restaurants

The ADA lists restaurants by name as public accommodations, and in 2019 a federal appeals court held that the law covered a pizza chain's website and app because they connect customers to its restaurants (Robles v. Domino's). The Supreme Court declined to review that decision. A menu people can't read online is a barrier to the restaurant itself.

What a picture of a menu fails

A menu that is only an image, or a PDF with no text layer, fails several WCAG criteria at the same time:

• 1.1.1 Non-text Content (A): a screen reader has nothing to read. Alt text can't realistically carry a full menu with prices.
• 1.4.5 Images of Text (AA): the text is a picture, so it can't be restyled.
• 1.4.4 Resize Text (AA): zooming in blurs the image instead of enlarging the text.
• 1.4.10 Reflow (AA): on a narrow phone screen the image either overflows sideways or shrinks until it's unreadable.
• 1.4.12 Text Spacing (AA): people who need more space between lines and letters can't adjust it.

Publish the menu as real text

1. Put the menu on a web page as HTML: a heading for each section (Starters, Mains, Desserts), a list of dishes, and prices as text.
2. Keep the designed image if you like it, but below the text version and marked as decorative, or as a download.
3. If the menu changes often, use a menu plugin or editable content fields so staff update text, never a new picture.
4. If a PDF must exist, generate it from the same text so it has a real text layer and tags. Never make it the only version.
5. Put allergy and dietary labels in text (“Vegetarian”, “Contains nuts”), not only as colored icons.

<h2>Mains</h2>
<ul class="menu">
  <li>
    <h3>Grilled salmon</h3>
    <p>With rice and seasonal greens. <span>Gluten-free</span></p>
    <p class="price">$24</p>
  </li>
</ul>

The rest of the menu page

• Give the page one main heading, like “Dinner menu”.
• Make online ordering buttons real buttons with clear names.
• Check the contrast of text on textured or photo backgrounds.
• Label links to other menus clearly: “Lunch menu”, not a row of “View” links.
• Make sure third-party ordering widgets can be used with a keyboard.

Specials, flyers and promotions

Daily specials and seasonal promotions are often posted as designed images. The same rule applies: put the offer and the price in text next to the image, and write alt text that carries the key information, or mark the image decorative when the text already says it.

Practical takeaways

• Text first, design second: the image can stay, but not alone.
• One source of truth for prices, so the text version never goes stale.
• Check the menu page on a phone at 200% zoom.
• Read it with a screen reader once; it takes five minutes.

Sources

• 42 U.S.C. § 12181(7)(B): restaurants as public accommodations
• W3C: Understanding 1.4.5 Images of Text
• W3C: Understanding 1.4.10 Reflow