Florist, bakery and gift shop website accessibility: delivery dates, product options and gift messages

Florists, bakeries, cake shops and gift shops sell a lot of orders that are gifts for someone else, often bought in a hurry on a phone. Those orders run through a few fragile steps: a delivery date picker, a delivery-area or ZIP checker, size and price options, a gift message box and a checkout with upsell pop-ups. If a visitor who uses a screen reader, keyboard, magnifier or voice control gets stuck at one of them, they usually order somewhere else. Here's what to check.

1. Delivery date pickers and delivery-area checkers

Calendar pop-ups that only work with a mouse, and dates shown as "unavailable" only by greying them out, block keyboard and screen reader users. Let people type a date as well as pick one, say which days are closed or full in text, and announce the result of a ZIP or delivery-area check with a status message instead of only turning a box green or red. (WCAG 2.1.1, WCAG 4.1.2, WCAG 4.1.3)

<label for="deliv-date">Delivery date</label>
<input id="deliv-date" name="delivery_date" type="date" required aria-describedby="deliv-hint">
<p id="deliv-hint">We deliver Monday to Saturday. Same-day orders by 1 pm.</p>

<label for="zip">Delivery ZIP code</label>
<input id="zip" name="zip" inputmode="numeric" autocomplete="postal-code">
<button type="button">Check delivery</button>
<p role="status" aria-live="polite" id="zip-result"></p>
<!-- After the check, put text in #zip-result, for example:
     "We deliver to 12345. Delivery fee $12." (example values) -->

Also list the towns or ZIP codes you deliver to as plain text on the page, so people don't have to guess. See location pages and map embeds.

2. Product photo alt text

Shoppers choosing a bouquet or a cake need the photo described: what it is, the main colours and the size. Example (made up for this guide): alt="Example: medium bouquet of pink roses and white lilies in a clear glass vase". Don't use the file name or the same alt text on every photo, and if a photo shows text (a cake inscription, a sale banner), put that text on the page too. (WCAG 1.1.1, WCAG 1.4.5) Our free alt text checker and alt text examples help.

3. Sold-out, same-day and seasonal badges

A red "sold out" corner, a green "same-day" dot or a greyed-out card can't be seen by everyone. Write the status as text on the card and in the button ("Sold out for Saturday", "Same-day delivery available"), and disable or remove the add-to-cart button with a clear reason. (WCAG 1.4.1)

4. Size and price options as real radio groups

"Standard, Deluxe, Premium" or "6-inch, 8-inch, 10-inch" options built as clickable picture tiles often announce nothing. Use a real radio group with a fieldset and legend, and put the price in the label so it is read with each choice. (WCAG 1.3.1, WCAG 3.3.2)

<fieldset>
  <legend>Choose a size</legend>
  <label><input type="radio" name="size" value="standard" checked> Standard, 12 stems, $55</label>
  <label><input type="radio" name="size" value="deluxe"> Deluxe, 18 stems, $75</label>
  <label><input type="radio" name="size" value="premium"> Premium, 24 stems, $95</label>
</fieldset>
<!-- example values -->

See the online store and checkout guide for variant pickers and carts.

5. Gift message and card note boxes

Card-note boxes often have only placeholder text and a silent character limit that cuts the message off. Give the box a visible label, explain the limit, and announce the characters left politely (not on every keystroke if it gets noisy; updating every 10 characters or near the limit works well). (WCAG 3.3.2, WCAG 4.1.3)

<label for="card-note">Message for the card (optional)</label>
<p id="card-hint">Up to 200 characters. We'll print it exactly as typed.</p>
<textarea id="card-note" name="card_note" maxlength="200" rows="4"
  aria-describedby="card-hint card-count"></textarea>
<p id="card-count" aria-live="polite">200 characters left</p>

6. Custom cake and large order forms

Custom cake, wedding and event order forms are long. Give every field a visible label, use autocomplete on name, email, phone and address, group related choices (flavour, filling, tiers) with a fieldset and legend, write specific error messages, and don't make people type the same address twice for billing and delivery. If the form or a held delivery slot times out, warn people and let them extend it, and keep what they've typed if they go back. Let people describe a design in text as well as uploading a photo. (WCAG 1.3.5, WCAG 3.3.1, WCAG 3.3.7, WCAG 2.2.1)

<label for="cust-email">Email</label>
<input id="cust-email" name="email" type="email" autocomplete="email" required aria-describedby="email-err">
<p id="email-err"></p>
<!-- On error, put text such as "Enter an email address like [email protected]" in #email-err -->
<label class="check"><input type="checkbox" name="same_address" checked> Billing address is the same as delivery address</label>

See form error messages and accessible contact forms.

7. Checkout and upsell pop-ups

"Add a balloon?", "Add chocolates?" and email sign-up pop-ups must be reachable with the keyboard, have a named close button, close with Escape, and return focus to where the shopper was. They must not cover the focused field or the checkout button on a phone, and add-on buttons need names ("Add chocolates, $15", not just "+"). (WCAG 2.4.3, WCAG 2.5.8) See the pop-up and chat widget checklist.

8. Hours, pickup and access details

Put shop hours, pickup windows, holiday cut-off times, the address and a tel: phone link on the page as text, not only in a banner image or a map. Describe the shop factually (for example "step-free entrance, curbside pickup on request, call when you arrive") rather than calling it "fully accessible". (WCAG 1.4.5)

9. Contrast and video

Pastel text on cream, white text on photos of flowers and thin script fonts often fail the 4.5:1 contrast ratio. Darken the text or add a solid background behind it; check with our free colour contrast checker. Caption decorating and arranging videos, and don't auto-play sound or a moving slideshow without a pause button. (WCAG 1.4.3, WCAG 1.2.2, WCAG 2.2.2)

Common mistakes

• A delivery calendar that only works with a mouse, with closed days shown only in grey.
• A ZIP checker that turns a box red or green and says nothing.
• "Sold out" or "same-day" shown only by colour.
• Size options as picture tiles with no names or prices in text.
• A card-note box with placeholder-only text and a hidden character limit.
• An upsell pop-up that can't be closed with the keyboard.
• Holiday hours and cut-off times posted only as an image.

A 15-minute check you can do today

1. Using only Tab, Shift+Tab, arrow keys, Space and Enter, pick a product, choose a size, enter a delivery ZIP, pick a delivery date, type a card message and reach checkout.
2. Check you can see where focus is at every step and close any pop-up with Escape.
3. Leave a required field empty and read the error message: does it say how to fix it?
4. Zoom to 200% on a laptop and check the size options, price and "Add to cart" button still fit.
5. Find your hours and pickup times and check you can select them as text.

Our keyboard test and screen reader test walk you through it.

Many florists and bakeries use a website from a wire service, a bakery ordering platform or Shopify; send that provider the questions to ask your web designer and ask what they'll fix in shared templates. Avoid relying on an overlay widget instead of real fixes; see overlays vs real fixes.

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on this page: missing alt text, unlabelled fields and buttons, low contrast and similar code problems on the pages it visits. It can't place an order, test a delivery calendar's keyboard behaviour, judge whether your alt text is accurate, or reach checkout steps behind a cart, which is why the 15-minute check matters. Related: online store checkout, restaurant websites, wedding and event venues.

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

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

• Tour operator, travel agency and activity booking website accessibility: tour dates, itineraries and waivers
• 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.