Accessible Restaurant Menu

Scan the code, they said. It's easier, they said. What loads is a 4MB PDF at 8-point type, a wall of unlabeled images, and a screen reader that announces "link, link, image, link" for ninety seconds straight. For a blind diner, the QR menu didn't replace the paper menu. It replaced the ability to order dinner without asking for help.

The brief:

Design a restaurant QR-code menu that a blind diner can browse, filter, and order from independently, using only a screen reader.

Who you're designing for:

Amara, 29, blind since birth and a VoiceOver power user. She's out to dinner with four friends, everyone's ready to order, and she does not want to be the one who has to hand her phone to the server or ask the table to read the specials out loud. She wants to find the vegetarian dishes, check a price, and order the mushroom risotto herself, before the waiter comes back.

Constraints:

1. Every item is reachable and fully announced by a screen reader in a logical order, with name, price, and dietary tags read as one coherent unit. No orphaned "image" or "link" labels, no dead ends.

2. The menu holds up at 200% zoom (or 320px reflow) with no horizontal scrolling and no lost content or function.

3. No PDF. Real structured content with proper section headings, so a screen reader user can jump between sections instead of swiping through everything.

4. A diner can filter by at least one dietary need (vegetarian, gluten-free) and the active filter is announced, not just shown in color. Color is never the only signal, and text contrast holds at 4.5:1 or better.

Bonus round:

Let Amara place the whole order, from open to confirmation, using only VoiceOver, and count the swipes. Two dishes ordered in under fifteen swipes? Now you're cooking.

What good looks like:

• A blind diner orders start to finish without asking a friend or the server to read the screen.

• The same layout survives 200% zoom and one-handed use without breaking.

• Price and dietary info is never trapped behind color alone, a hover state, or an image with no alt text.

Suggested tools:

Figma for the screens, Stark for contrast and structure checks, and an actual screen reader (VoiceOver on iOS or Mac, TalkBack on Android) to test what you built, because the only real proof is closing your eyes and ordering. Pen and paper first to plan the heading structure.

Brand vibes:

Study the GOV.UK Design System for how structured headings and plain content patterns make complex information navigable. Look at Apple's VoiceOver and its accessibility guidance for how a screen reader experience should feel, with a sane focus order and predictable navigation. Skim the BBC's mobile accessibility guidelines for content structure at scale. If you want the deeper why behind all of this, Felipe's write-up on inclusive design and on cognitive accessibility set the mindset, and the EqualWeb accessibility widget case study shows it applied to a shipped product.

Felipe's tip:

If it only works when you can see it, it doesn't work. Design the menu you could order from with your eyes closed.

Share it: Post your attempt and tag flinbu. Best structure wins dinner conversation for a week. #FlinbuChallenge #AccessibilityChallenge #InclusiveDesign