Design Centre

Home Hub ยท Design Options

Read Menu Aloud

Staff operate from an iPad in the kitchen and may not be strong English readers โ€” a speaker button reads the day's menu aloud (Web Speech API). Two placements shown, each in idle and speaking states. Cross-cutting features (language toggle, highlight, stop, a11y) apply to both.

Built into both options
๐ŸŒ
Language toggle
Staff may prefer Hindi โ€” EN / เคนเคฟเค‚ switch, persists in localStorage. Uses best available Web Speech voice per language.
โœจ
Active-meal highlight
Cell currently being read aloud pulses with a colored glow in its meal-type accent. Users see and hear the item together.
โน
Stop control
Idle button becomes a Stop button while speaking. Auto-stops on navigation, day change, or component unmount.
๐Ÿ“
Content format
"Tuesday, April 21. Breakfast: Smoothie. Lunch: Chicken salad with asian dressing. Snack: Fried eggs. Dinner: 2 items." โ€” no calories/macros (noise for staff).
๐Ÿ“ฑ
Responsive
iPad: full button label. Mobile: icon-only with aria-label. Laptop: full label. All targets โ‰ฅ44px per Apple HIG.
โ™ฟ
Accessibility
aria-live region mirrors what's being spoken. Keyboard-activatable. Respects prefers-reduced-motion (no pulse if set).
Option BFloating Action Button โ€” iPad-firstBest for iPad

Large round button, bottom-right. Tap = read today. Long-press = day picker. Transforms into a Stop button + now-reading chip while speaking. Big thumb target for staff using an iPad propped on the counter.

State ยท Idle (picker open)
April 2026
Week of Apr 20
MON
20
1111
TUE
21
1761
WED
22
1621
THU
23
1211
FRI
24
941
SAT
25
305
SUN
26
โ€”
BREAKFAST
โ€”
Smoothie โ€” Pancake in a Jar
โ€”
โ€”
โ€”
โ€”
LUNCH
โ€”
Chicken salad with asian dressing
โ€”
โ€”
โ€”
โ€”
SNACK
โ€”
Fried eggs (2)
โ€”
โ€”
โ€”
โ€”
DINNER
โ€”
2 items
โ€”
โ€”
โ€”
โ€”
Read which day?
Long-press FAB to open ยท tap outside to dismiss
Idle ยท day picker open
State ยท Currently speaking
April 2026
Week of Apr 20
MON
20
1111
TUE
21
1761
WED
22
1621
THU
23
1211
FRI
24
941
SAT
25
305
SUN
26
โ€”
BREAKFAST
โ€”
Smoothie โ€” Pancake in a Jar
โ€”
โ€”
โ€”
โ€”
LUNCH
โ€”
Chicken salad with asian dressing
โ€”
โ€”
โ€”
โ€”
SNACK
โ€”
Fried eggs (2)
โ€”
โ€”
โ€”
โ€”
DINNER
โ€”
2 items
โ€”
โ€”
โ€”
โ€”
Reading Tue ยท Lunch
Chicken salad with asian dressing
Speaking ยท Tue menu ยท highlighted cell pulses
Option CInline Header Button โ€” CompactCleanest footprint

Button lives in the existing week header row, next to the month title. Tiny dropdown selects which day. Zero floating chrome. Read becomes Stop while speaking โ€” no layout shift.

State ยท Idle
April 2026
Week of Apr 20
MON
20
1111
TUE
21
1761
WED
22
1621
THU
23
1211
FRI
24
941
SAT
25
305
SUN
26
โ€”
BREAKFAST
โ€”
Smoothie โ€” Pancake in a Jar
โ€”
โ€”
โ€”
โ€”
LUNCH
โ€”
Chicken salad with asian dressing
โ€”
โ€”
โ€”
โ€”
SNACK
โ€”
Fried eggs (2)
โ€”
โ€”
โ€”
โ€”
DINNER
โ€”
2 items
โ€”
โ€”
โ€”
โ€”
Idle ยท dropdown for day selection
State ยท Currently speaking
April 2026
Week of Apr 20
Reading Tue ยท Lunch
MON
20
1111
TUE
21
1761
WED
22
1621
THU
23
1211
FRI
24
941
SAT
25
305
SUN
26
โ€”
BREAKFAST
โ€”
Smoothie โ€” Pancake in a Jar
โ€”
โ€”
โ€”
โ€”
LUNCH
โ€”
Chicken salad with asian dressing
โ€”
โ€”
โ€”
โ€”
SNACK
โ€”
Fried eggs (2)
โ€”
โ€”
โ€”
โ€”
DINNER
โ€”
2 items
โ€”
โ€”
โ€”
โ€”
Speaking ยท Read button becomes Stop ยท cell highlight pulses

Design prototype only โ€” no production changes yet.