Catering, food truck and meal prep website accessibility: menus, event quotes, locations and orders

Caterers, food trucks and meal prep companies sell in ways a normal restaurant site doesn't cover. Caterers win events from an inquiry or quote form and a package menu. Food trucks live or die by "where are we today?". Meal prep businesses run on a weekly menu, an order cutoff and pickup or delivery windows. Customers who use a screen reader, magnifier, keyboard or voice control, and office managers ordering lunch on a phone, often get stuck on menus posted as Instagram images, schedules shown only as a calendar graphic, allergen icons with no text and date pickers that need a mouse. A customer who can't read the menu or find the truck just goes elsewhere. Here's what to check.

1. Event inquiry and catering quote forms

Give every field a visible label, mark required fields in text, use autocomplete for name, email and phone, and let people type the event date instead of forcing a mouse-only calendar. Group choices like service style in a fieldset with a legend, say what to fix in words when something is wrong, and announce the confirmation. (WCAG 3.3.2, WCAG 1.3.5, WCAG 3.3.1, WCAG 4.1.3)

<form>
  <label for="e-name">Your name (required)</label>
  <input id="e-name" name="name" autocomplete="name" required>
  <label for="e-email">Email (required)</label>
  <input id="e-email" name="email" type="email" autocomplete="email" required>
  <label for="e-date">Event date (required)</label>
  <input id="e-date" name="date" type="date" required>
  <label for="e-guests">Number of guests (required)</label>
  <input id="e-guests" name="guests" type="number" min="10" max="500" aria-describedby="e-guests-hint" required>
  <p id="e-guests-hint">We cater events from 10 to 500 guests.</p>
  <fieldset>
    <legend>Service style (required)</legend>
    <label><input type="radio" name="style" value="drop-off" required> Drop-off trays</label>
    <label><input type="radio" name="style" value="buffet"> Staffed buffet</label>
    <label><input type="radio" name="style" value="truck"> Food truck on site</label>
  </fieldset>
  <label for="e-diet">Allergies or dietary needs (optional)</label>
  <textarea id="e-diet" name="diet"></textarea>
  <button type="submit">Request a quote</button>
  <p role="status" id="e-status"></p>
</form>
<!-- example values; fill e-status with "Thanks, we'll email your quote within one business day." -->

See accessible contact forms and form error messages.

2. Menus and catering packages as real text

A menu posted as a JPG, a Canva graphic or a scanned PDF is silent to a screen reader and blurs when zoomed. Put the menu on the page as headings and lists, and show per-person packages as a real table with header cells. Say what's included in words, not with coloured ticks. (WCAG 1.4.5, WCAG 1.3.1, WCAG 1.4.1)

<table>
  <caption>Catering packages, price per guest, 20 guest minimum</caption>
  <thead><tr><th scope="col">Package</th><th scope="col">Includes</th><th scope="col">Price per guest</th></tr></thead>
  <tbody>
    <tr><th scope="row">Taco bar</th><td>2 proteins, rice, beans, salsa, tortillas</td><td>$16</td></tr>
    <tr><th scope="row">BBQ buffet</th><td>2 meats, 3 sides, rolls, sauce</td><td>$22</td></tr>
  </tbody>
</table>
<!-- example packages and prices, use your real menu -->

See accessible menus and PDFs and tables for prices, hours and menus.

3. Allergen and dietary labels in words

Small icons for gluten-free, vegan or "contains nuts" need text, either written next to the item or as alt text on the icon. Don't use colour alone (a green leaf for vegan). Keep allergen information accurate and current, and tell people how to ask about ingredients. (WCAG 1.1.1, WCAG 1.4.1)

<h3>Chicken tinga bowl</h3>
<p>Rice, black beans, chicken tinga, pickled onion. $12</p>
<p><img src="gf.svg" alt="Gluten-free"> Contains: none of the top 9 allergens.</p>
<p>Made in a kitchen that also handles wheat, nuts and dairy. Ask us about ingredients: 918-555-0100.</p>
<!-- example item and wording, use your real recipes and allergen information -->

4. Food truck schedules and locations as text

"Where's the truck this week?" is often answered only with an Instagram story, a calendar widget or a map pin. Post the schedule on your site as a real list or table with day, time and address in text, and give any map embed a title. Keep it updated, because an old location is worse than none. (WCAG 1.3.1, WCAG 1.1.1)

<h2>Where to find us this week</h2>
<table>
  <caption>Truck schedule, week of November 2 (updated Sunday)</caption>
  <thead><tr><th scope="col">Day</th><th scope="col">Time</th><th scope="col">Location</th></tr></thead>
  <tbody>
    <tr><th scope="row">Tuesday</th><td>11 am to 2 pm</td><td>Main Street Brewing, 120 Main St</td></tr>
    <tr><th scope="row">Friday</th><td>5 pm to 9 pm</td><td>Riverside Park, north lot</td></tr>
  </tbody>
</table>
<iframe src="https://www.google.com/maps/embed?..." title="Map of this week's truck stops"></iframe>
<!-- example days, times and places, use your real schedule -->

Tell people in text whether a stop has step-free access to the order window and seating, only if you've checked it. See location pages and map embeds.

5. Meal prep weekly menus, cutoffs and pickup windows

Meal prep sites change the menu every week and have an order cutoff. Say the cutoff in text with the day, time and time zone, don't rely on a countdown timer alone, and keep any timer out of live announcements so it doesn't interrupt screen readers every second. Pickup and delivery windows should be buttons or radio choices with the full day and time in their names, usable with a keyboard. (WCAG 2.2.1, WCAG 2.2.2, WCAG 2.1.1)

<p>Order by Thursday 8 pm Central for next week's meals.</p>
<fieldset>
  <legend>Pickup or delivery window (required)</legend>
  <label><input type="radio" name="slot" value="sun-pickup" required> Sunday, pickup 2 pm to 5 pm at our kitchen</label>
  <label><input type="radio" name="slot" value="mon-delivery"> Monday, delivery 4 pm to 7 pm</label>
</fieldset>
<!-- example cutoff and windows, use your real ones -->

6. Online ordering, add-ons and checkout

Quantity steppers need labelled buttons ("Add one chicken tinga bowl"), the cart total should update in a status message, and upsell pop-ups must close with Escape and not trap the keyboard. If you use a third-party ordering or catering platform, test it with a keyboard, ask the vendor for its accessibility documentation (a VPAT), and offer phone or email ordering next to it. (WCAG 4.1.2, WCAG 4.1.3, WCAG 2.1.2)

<button type="button" aria-label="Add one chicken tinga bowl">+</button>
<button type="button" aria-label="Remove one chicken tinga bowl">−</button>
<p role="status">Cart: 3 meals, $36.00</p>
<p>Rather order by phone or email? Call 918-555-0100 or write to [email protected].</p>
<!-- example items, number and email, use your real details -->

See online store checkout accessibility and what a VPAT is.

7. Food photos, Instagram embeds and video

Give menu and event photos alt text that says what the dish or setup is ("Grazing table with cheeses, fruit and bread for 40 guests"). Instagram feed embeds often have no alt text, so make sure the menu, prices and schedule also appear as text on the page. Caption any event or cooking videos. (WCAG 1.1.1, WCAG 1.2.2) See alt text examples and social icons and feed embeds.

8. Contrast, zoom, tap targets and help

Bold brand colours, chalkboard-style menus and white text on food photos often fail the 4.5:1 contrast ratio. Check the site at 200% zoom on a phone-width window, keep "Order now" and phone buttons big enough to tap, and put the same contact line on every page. (WCAG 1.4.3, WCAG 1.4.10, WCAG 2.5.8, WCAG 3.2.6)

Keep accessibility wording factual and don't claim the site is "fully accessible". See the accessibility statement template.

Common mistakes

• The menu is only a photo, a Canva graphic or a scanned PDF.
• Catering packages and prices posted as one image.
• Allergen icons with no text, or colour as the only signal.
• The truck schedule lives only on Instagram stories or a map pin.
• Order cutoffs shown only as a countdown timer.
• Mouse-only date pickers on the event inquiry form.
• Unlabelled + and − buttons in the order form.
• An overlay widget instead of real fixes. See overlays vs real fixes.

A 15-minute check you can do today

1. Using only Tab, Shift+Tab, Enter and Space, fill in your event inquiry form and submit it. Can you always see where you are?
2. Submit it with the guest count left blank. Does the error say what to fix, in words?
3. Try to select a word on your menu. If you can't, it's an image.
4. Find this week's truck locations or meal prep cutoff without opening Instagram or a map.
5. Add two items to an order with the keyboard and check the total updates.
6. Zoom to 200% on a phone-width window. Can you still reach the order and call buttons?

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the public pages it visits, such as your home, menu, catering and schedule pages: missing alt text, unlabelled fields and buttons, low contrast, missing page language and similar code problems. It doesn't place an order, submit your inquiry form, read text inside menu images or judge whether your allergen information is accurate, which is why the 15-minute check matters. Our Fix-Pack scans up to 10 public pages and gives copy-paste fixes for your platform, and notes what to ask your ordering or catering platform for. Platform steps: Squarespace, Wix, WordPress, Shopify.

Related: restaurant websites, florist, bakery and gift shop websites, wedding and event venue websites, menus and PDFs.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Youth sports league and swim school website accessibility: registration, waivers, schedules and levels
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.