Making your ordering site usable by every guest is both the right thing to do and a practical protection for your business. Under the ADA, your ordering site is treated as an extension of your restaurant, and WCAG 2.1 Level AA is the standard courts and regulators most commonly referenced.
This article covers the accessibility settings you control in Admin, how to configure them well, and how to check your own site.
What Lunchbox builds into your ordering site
Accessibility on your site is a partnership. These are the capabilities the platform provides, so you know what you're starting from before you configure anything.
Your site declares its language. Every page sets lang="en", which is what tells a screen reader to pronounce your menu in English rather than guessing. It sounds small; it's the difference between "quinoa" and an unintelligible string of phonemes.
Guests can skip repeated navigation. A "Skip to main content" link is the first thing in the tab order, so keyboard and screen reader users can jump straight to your menu instead of tabbing through the header on every page.
Your site is built against WCAG 2.1 Level A and AA. That's the standard courts and regulators reference under the ADA, and it's the target our platform accessibility work is specified and reviewed against — including the criteria covering keyboard operation, focus order, focus visibility, and how components report themselves to screen readers.
Order dialogs identify themselves properly. When the service type and time selector opens, it's announced as a dialog and carries its heading as its name, so a screen reader user knows what just opened and why. Every control inside it has a proper accessible name — no unlabeled buttons.
Core ordering steps work from the keyboard. Menu items open with Enter. Service type options move under the Arrow keys. The order dialog follows a defined tab sequence rather than scattering focus across the screen. And keyboard focus stays visible as you move — every control shows a focus ring when you tab to it, so guests never lose track of where they are.
Menu images support alt text. Your item photography can carry a text description that screen readers read aloud, and it's worth populating — see the menu content guidance below.
Option groups behave the way screen reader users expect. Pickup, Delivery, Dine-In and your catering options are grouped as a single control: Tab moves past the whole set, Arrow keys move within it, and the selected option reports its state. This is the standard pattern, and it keeps long option lists from flooding the tab order.
The order dialog has a defined, logical focus sequence. Close, then service type, then location, then day, then time, then start order. Focus follows the visual layout rather than jumping around the screen.
Background scrolling is locked while a dialog is open, so guests using magnification don't lose their place behind the overlay.
Admin blocks some non-compliant color choices. Success Text Color on the Rewards page is applied only when it meets contrast requirements — if a value you set doesn't appear, that's the guardrail working.
NOTE: Accessibility is an ongoing engineering program. Improvements to the ordering site are tracked continuously against WCAG 2.1 Level A and AA, not treated as a one-time project. If you report something, it goes into that queue.
Color: the setting with the biggest impact
Go to Design → Web → Colors. Six values drive your ordering site, and each affects contrast — the measurable difference in lightness between text and the surface behind it. Contrast is the most common accessibility issue on restaurant sites, and it is entirely within your control.
Field | Where it appears | Contrast target |
Primary Color | CTAs, View Hours, selected category names, selected radios and field outlines | 4.5:1 as text, 3:1 as a boundary |
Primary Text Color | Text sitting on Primary — CTA labels, toggle text | 4.5:1 against Primary |
Background Color | Fills the screen behind all content | Reference surface |
Passive Color | Phone numbers, pickup time estimates, unselected category names, modifier prices | 4.5:1 against Background |
Gray Color | Toggle backgrounds, hover states, promo field | 3:1 against Background |
Green Color | "Open Now" on the Locations screen | 4.5:1 against Background |
Two rules cover most of it.
Normal-size text needs 4.5:1 against whatever sits behind it. This is where bright brand colors most often fall short. Saturated yellows, oranges and light reds frequently land near 2:1 on white — legible to some guests, invisible to others.
Large text (24px, or 18.7px bold) and non-text elements need 3:1. A color that fails as body text may be perfectly usable for a heading, a button fill or a border.
If a brand color won't meet the target, you rarely need to abandon it. Darkening or lightening the same hue usually clears the threshold while keeping the color recognizably yours — and you can keep the original shade for large text, icons and fills.
Use the Ordering Site Color Check tool to test a palette before launch. Enter your 6 hex codes and it reports every pairing your site actually renders, the specific screen elements affected, and the nearest passing shade at the same hue.
Rewards colors
Under the Others tab, Success Text Color is applied only when it meets contrast requirements. If a value you set doesn't appear on the Rewards page, that's why — choose a darker or lighter version of the same color.
Dark Mode (BETA)
Dark Mode inverts the surface your palette sits on, which changes every contrast relationship on the site. If you enable it, set a genuinely dark Background Color, update your logo and icons for the dark surface, and re-check your palette. A color that passed on white will often fail on near-black, and vice versa.
Menu content
Your menu copy is read aloud verbatim by screen readers, and it is the part of the experience you write yourself.
Write item names that stand alone. "Chef's Special" tells a guest nothing; "Chef's Special — grilled salmon bowl" tells them what they're ordering.
Put allergen and dietary information in the item description, not only in an image or an icon. Text is available to every guest; a graphic is not.
Keep modifier group names specific. "Choose your protein" is navigable. "Options" is not.
Add descriptive image alt text wherever your menu tooling allows it. Describe the dish, not the photo — "grilled salmon bowl with greens and avocado," not "food photo 3."
Checking your own site
Accessibility is a shared responsibility: Lunchbox builds the platform, you configure and populate it. These checks cover your half and take about thirty minutes.
Run every color pairing through the Color Check tool, including Primary Text on Primary
If using Dark Mode, re-run all checks against the dark background
Confirm Success Text Color renders on the Rewards page
Review menu item names for standalone clarity
Confirm allergen and dietary details appear as text
Tab through your live site start to finish without touching the mouse, and note anywhere you get stuck
Getting help
Your Implementation Manager can review your palette with you before launch and walk through the checklist above. If a guest reports difficulty using your site, or you receive an accessibility complaint, contact Support & your Technical Account Manager promptly. The specifics of what the guest encountered matter, and early information gives us the best chance to help.