Skip to article
← Back to Blog
Marketing, SEO

How to Write Accessible Image Descriptions for a Restaurant Site

By Fleksa7 min read•Restaurant Websites, Accessibility, Online Ordering

A dish photo, an ordering button, and a decorative background need different treatment. Use this practical guide to decide what each image should say, avoid repeated menu text, and check the experience with a screen reader.

Give an image alternative text when it communicates something a guest needs to understand or acts as a link or button. Describe its purpose in the context of the page. If the image is purely decorative, or nearby text already gives the same information, it can usually have an empty alternative: alt="".

Start with what the guest needs to do. A menu photo may help someone choose a dish; an ordering icon may need to say where it leads. A decorative border needs no announcement at all. The same photo can need different treatment in two different places.

Decide which images carry useful information

Alternative text, often called alt text, is a short text alternative associated with an image. A screen reader can announce it to a guest who cannot see the image. It may also appear when an image fails to load, depending on the browser and setup.

Before writing, identify the image's job, the text around it, and whether it is interactive. Ask the person who manages the menu to confirm dish names and ingredients. Ask whoever controls the website to show where image alternatives can be edited and how decorative images are marked. The owner or manager should settle questions about what matters to guests.

These examples are hypothetical. They show decisions for particular page layouts, not descriptions to copy onto every restaurant site.

Image and contextDecisionExample
Dish photo with no nearby descriptionDescribe useful visible details“Grilled salmon with rice and sliced cucumber”
Same photo beside a complete dish descriptionAvoid repeating the textEmpty alt: alt=""
Bag icon that is the only content of an ordering linkName the link's destination or action“Order online”
Decorative background patternHide the decoration from screen readersEmpty alt: alt=""
Image of a menu containing item names and pricesProvide the information as page textUse a text menu; a short alt alone cannot replace its contents

The table is a starting point. A dish photo next to its name may still add information that the name does not, such as how the meal is presented. Decide whether that detail helps a guest choose. If it does, describe the detail rather than automatically repeating the name.

For a decorative image, an empty alt attribute is different from leaving the attribute out. Ask your website provider how its editor produces an empty alternative. Deleting text from a field does not always tell you what the published page will contain.

Describe food and context without guessing

Write the useful subject first, then add details that matter to the decision. For a dish, that could be the cooking style, visible ingredients, accompaniments, or portion presentation. A concise description such as “Roasted chicken with potatoes and green beans” is more helpful than “Delicious dinner” or a list of search terms.

Do not infer ingredients from color or appearance. A pale sauce might contain dairy, nuts, both, or neither. If an ingredient or preparation detail matters, confirm it with the kitchen and put reliable information in the menu text too. Alt text is not a substitute for current ingredient or allergen information.

Other restaurant images have different jobs. A photo introducing the dining room might say “Dining room with booths and tables by the windows.” If the page discusses a step-free entrance, an image could describe the visible entrance, but do not promise accessibility from a photo alone. Provide guests with a way to ask about their specific needs.

For staff photos, use names and roles when those details are relevant and confirmed. For a logo linked to the home page, a useful alternative could be the restaurant name and “home.” There is usually no need to start with “image of” or “photo of”; assistive technology commonly identifies the element as an image.

Keep descriptions proportional to their purpose. A short alternative may be enough for a simple dish photo. A floor plan or graphic explaining pickup locations may need a brief alt that identifies it, plus a fuller explanation in adjacent page text. Do not force a long set of directions into one image field.

Prevent repeated menu and ordering text

Listen to the whole card or link, not just the image in isolation. Suppose a menu card already reads “Mushroom pizza” and “Tomato sauce, mushrooms, and mozzarella.” Repeating that entire description in the image alternative adds little. If the photo only illustrates those words, empty alt can make the card easier to navigate.

Now suppose the photo also clearly shows that the pizza is cut into square slices, and that presentation helps guests understand what they are ordering. A short alternative such as “Pizza cut into square slices” may add useful context. If the image is outdated or the presentation varies, leave that detail out or update the photo and menu together.

Buttons and links need special attention. An image-only link should have an accessible name that tells the guest what it does, such as “View menu.” If an icon and visible “View menu” text sit inside the same link, the icon can often have empty alt because the link already has a name. Ask the site provider how the published link is named; adding the same words to both can produce a repetitive announcement.

Text embedded in an image is another common problem. A picture of a specials board may be attractive, but guests also need its items, prices, and conditions in actual page text. A short alternative such as “Today's specials board” identifies the image; it does not communicate the offers. Update the text whenever the board changes.

Apply the same check to online ordering: product images, category icons, and image-only controls may each have different purposes. If ordering opens on another page or provider, include that flow in your review and ask who can make corrections there.

Check the published experience with a screen reader

First, make an image inventory. Walk through the home page, menu, location page, and ordering entry point on both desktop and mobile. For each image, record its page, purpose, nearby text, intended alternative, and the person responsible for updates. Include logos, icons, banners, and images inside links, not just food photos.

Then check the published page with a screen reader and keyboard. Move through the page in reading order and listen for image announcements. Navigate links and buttons separately. Can you tell what each control does? Are dish details announced twice? Does a decorative pattern interrupt the menu? Record the page and exact control when something needs correction.

For a safe practice check, stop before submitting an order or sending a message. You can inspect and navigate the ordering entry point without making a real card payment, sending a guest message, or dispatching a courier. If you later arrange a live service pilot, agree separately on its participants, scope, and safeguards.

Also turn off images if your browser allows it, or inspect the page with your site provider, to see what happens when images do not load. Check at a narrow mobile width. This can reveal missing context or awkward placement, although it does not replace a screen-reader check.

One person's screen reader, browser, and settings cannot represent every guest's experience. If possible, invite people who use assistive technology to review the site and compensate them for their time. Ask them to find a dish, understand its description, and locate the ordering link. Note where they hesitate rather than assuming that a technically present alternative is useful.

Finally, make image descriptions part of the publishing routine. When the kitchen changes a dish, check the photo and its alternative alongside the menu text. When a new banner or ordering button goes live, check its purpose and accessible name. A restaurant website builder comparison can help frame the wider buying decision; ask each provider specifically whether you can edit alt text, mark decorative images with empty alt, and review image-only link names.

Use the table above to review a few real pages, then bring the problem images and questions to your provider. To evaluate a new setup, ask Fleksa about its restaurant website, editing controls, and current US availability.

Frequently asked questions

Does every food photo need alt text?

No. Describe a photo when it adds useful information. If nearby text already communicates the same details and the image adds nothing important, an empty alternative may be appropriate.

How long should restaurant image descriptions be?

Use the words needed to convey the image's purpose, usually a short phrase or sentence. Put complex information, such as a full menu or detailed directions, in page text rather than packing it into alt text.

Can I use a dish name as its image description?

Yes, when the name identifies useful information that is otherwise missing. If the same name is already next to the image, consider whether the photo adds a relevant detail or should have empty alt instead.

Ready to grow your restaurant?

Explore how Fleksa can support ordering and operations in your restaurant.