Allergen labelling is the place where a bad mobile menu can shift from “annoying” to “actually dangerous.” This post is for restaurants that want their menu to work for a guest with a peanut allergy who is trying to scan-and-decide in under a minute.
This is not legal advice. The rules are jurisdiction-specific and they change. We cite the FDA, the EU FIC Regulation, and UK government guidance below — please verify against the current text for your jurisdiction before publishing.
Before you read further, run the 10-row audit against your current menu — row 5 specifically checks for allergen icons + alt text, which is what most of this post is about.
TLDR
Three things matter on mobile: (1) every allergen icon has descriptive alt text (e.g., alt="contains peanuts"), (2) the menu supports filtering or jumping by allergen so a guest with a tree-nut allergy can find safe items in 3 taps, and (3) for tourist markets, allergen names get a human review — crustáceos and mariscos both translate to “shellfish” but refer to different things.
Why this matters
Two layers of evidence:
- Legal scope. The FDA recognises a “big 9” allergen list (egg, milk, peanuts, tree nuts, fish, shellfish, soy, wheat, sesame — sesame added in 2023, S-017). The EU FIC Regulation 1169/2011 lists 14 allergens for declaration at point of sale (S-019). UK guidance under Natasha’s Law extends this to pre-packed-for-direct-sale foods (S-018).
- Accessibility. WCAG 2.2 SC 1.1.1 (Non-text Content) requires alt text on informational images. An icon without alt text is invisible to a screen reader (S-008).
In our 5-restaurant sample (S-304), zero menus passed both layers. Most had either icons-without-alt or no allergen labelling at all.
The 3-tap allergen-finding workflow
Goal: a guest with a peanut allergy can find safe items in 3 taps from the QR scan.
- Tap 1 — scan the QR, land on
/menu. The header includes a small “Filter by allergen” toggle. - Tap 2 — toggle “Hide items with peanuts.” (For statically generated pages, this can be a
#no-peanutURL fragment that scrolls to a curated section, or a small client-side script that hides matching items.) - Tap 3 — read the remaining items.
Implementation note: this works without JavaScript if you render an “Allergen-friendly menus” section that pre-filters for each major allergen. With ~9 allergens × your item count, that’s still a small HTML page.
Icon spec
Use SVG icons (sharper on retina, lighter than PNG, animatable if you ever want a focus indicator).
<img
src="/icons/peanut.svg"
alt="contains peanuts"
width="16"
height="16"
loading="lazy"
aria-label="Contains peanuts"
>Notes:
altandaria-labelagree. Pick one for accessibility — if you have descriptivealt, you don’t needaria-label.- Icons should be next to the item name, not buried in a separate column.
- Provide a visible legend at the bottom of the menu listing what each icon means. Don’t rely on icon-only.
The full FDA “big 9” + EU 14
| # | Allergen | FDA (US, S-017) | EU FIC 1169 (S-019) | UK (Natasha, S-018) |
|---|---|---|---|---|
| 1 | Eggs | yes | yes | yes |
| 2 | Milk / dairy | yes | yes | yes |
| 3 | Peanuts | yes | yes | yes |
| 4 | Tree nuts | yes | yes (broken into types) | yes |
| 5 | Fish | yes | yes | yes |
| 6 | Shellfish (crustacea) | yes | yes (separate from molluscs) | yes |
| 7 | Soy / soybeans | yes | yes | yes |
| 8 | Wheat / gluten | wheat | gluten-containing cereals | wheat / gluten |
| 9 | Sesame | yes (2023+) | yes | yes |
| 10 | Molluscs | — | yes | yes |
| 11 | Celery | — | yes | yes |
| 12 | Mustard | — | yes | yes |
| 13 | Lupin | — | yes | yes |
| 14 | Sulphur dioxide / sulphites | — | yes | yes |
If you’re a US restaurant labelling for US guests, the FDA 9 are sufficient. If you serve tourists from the EU/UK, label the EU 14. The cost of being more cautious is small.
Translation pitfalls (tourist markets)
In bilingual or multilingual menus, allergen translation is where machine translation breaks dangerously.
- English “shellfish” maps to Spanish mariscos in colloquial use, but the EU FIC distinguishes crustacea (crustáceos: prawns, lobster, crab) from molluscs (moluscos: clams, mussels, scallops). A peanut-allergic guest doesn’t care, but a shellfish-allergic guest does — and many people who say “I have a shellfish allergy” only mean crustacea.
- English “tree nuts” doesn’t translate cleanly to many languages. German Schalenfrüchte covers a similar list; French fruits à coque the same; but the underlying list (almond, hazelnut, walnut, cashew, pecan, pistachio, macadamia, Brazil nut) is what should be on the menu, not the umbrella term.
- English “wheat” vs gluten matters for coeliac vs wheat allergy. The EU groups under “gluten-containing cereals”; the US splits “wheat” out specifically.
Have a human translator (not Google Translate) review at minimum the allergen line and the allergen icons’ alt text before publishing.
Common mistakes
- Icons baked into a single menu image. Screen readers see “Image: menu.png”. Useless.
- Allergen icons with no legend. A peanut icon is reasonably universal; a “may contain trace nuts” icon is not.
- “Vegetarian” and “vegan” mixed with allergen icons. They’re dietary preferences, not allergens. Use a different visual treatment (a different shape, or a separate row of icons).
- Listing allergens only at the bottom of the menu. Diners on phones scroll past the bottom. Repeat per-item.
- Forgetting cross-contamination disclaimers. If your kitchen processes peanuts on shared surfaces, say so. “Prepared in a kitchen that handles peanuts and tree nuts” is the standard line.
FAQ
Am I legally required to label every allergen?
It depends on your jurisdiction. The EU and UK have explicit labelling requirements for non-prepacked food at point of sale (S-019, S-018). In the US, FDA labelling rules apply primarily to packaged food, not restaurant menus — but state-level rules vary. Check with your local health department or a hospitality lawyer.
What if I can’t translate the allergens myself?
Hire a human translator for the allergen section specifically. Cost is usually under $50 per language. Allergen wording in tourist markets is the cheapest insurance you can buy.
Should I rely on customers asking the server?
It’s a backup, not a primary control. A guest scanning a QR is doing so because they specifically don’t want to interrupt service for a verbal question.
Do I need to label “may contain”?
In the EU, “may contain” labelling for cross-contamination is voluntary but encouraged. In the US, the FDA has rejected most “may contain” rulemaking; many restaurants still use it as a kitchen-safety disclaimer.
What about allergen scanning with a phone camera?
Out of scope for this post. Some apps do this on packaged food; for menus, the alt-text-on-icons approach is what works on every browser without an app.
After you’ve labelled allergens, run the 10-row audit — row 5 specifically checks for icons + alt text. If you’re shipping bilingual, see the bilingual menu setup post.