Alt Text for Cafe Photos: 20 Good and Bad Examples
Short answer: good alt text describes what a photo actually shows, in one short, plain sentence, written for someone who cannot see the image. It should mention your cafe or your city only when that is genuinely what the image shows, not as a place to stuff extra keywords. This post gives you ten common cafe photo subjects, each with a bad example and a good one, so you have a real pattern to copy rather than a blank box staring back at you every time you upload something new.
Somewhere along the way, alt text got treated as a chore instead of a sentence. An owner or a staffer gets told it matters, opens the field, and either leaves it blank or types something quick like coffee shop or a string of search terms hoping it helps. Neither one actually describes the photo, which is the entire point of the field in the first place, going back to why it exists: someone using a screen reader, or someone whose image failed to load, is relying on that text to know what the picture shows.
This post is built as a reference you can come back to, not a single read through you finish once and forget. Bookmark it, and the next time you upload a new photo and the alt text box sits there blank, scan the ten pairs below for whatever category your new photo falls closest to, latte art, the espresso bar, roasting, the pastry case, the patio, the menu board, staff at work, an event, the interior, or a bag of beans, and use that pattern as your starting point rather than staring at an empty field wondering where to begin.
Purpose
Alt text exists to serve two audiences at once, and it is worth being clear about both. The first is a person using a screen reader, who hears the alt text read aloud in place of the image, and needs it to convey what is pictured, the same way you would describe a photo out loud to a friend on the phone. The second is Google's own image indexing, which reads alt text as part of understanding what an image shows, according to Google's Search Central documentation on image best practices, which recommends short, accurate, descriptive text over a stuffed keyword list.
Those two audiences want the same thing, which makes this easier than it sounds. A screen reader user and Google's own systems are both best served by a plain, accurate description of the actual image, not by a marketing phrase, not by a keyword string, and not by nothing at all. Write for the first audience, the person listening, and the second mostly takes care of itself.
It helps to think about alt text the way you would think about a caption written for someone standing in another room who cannot see your screen. You would not read them a list of search terms, and you would not stay silent. You would say something like a barista pouring a heart shape into a latte at the counter, because that is what tells them what is there. That single habit, describe it the way you would describe it out loud, is the whole method behind every good example in this post.
Bad Examples
The most common failure is simply leaving the field blank on a photo that carries meaning. A blank alt attribute on a meaningful image tells a screen reader user nothing at all, skipping straight past a photo that was clearly worth including on the page for a reason, leaving them with a gap in the page they cannot account for.
A close second is a leftover filename standing in for a real description, something like IMG_4021 or lattephotofinal2, which is technically text in the field but describes nothing about what the image shows. A screen reader will read that filename aloud exactly as written, which is a genuinely strange and unhelpful listening experience for anyone relying on it.
The third common failure is keyword stuffing, cramming a string of search terms into the field hoping it helps with search, something like best coffee shop downtown espresso latte cappuccino near me. This is unpleasant to hear read aloud, describes no actual image, and runs directly against Google's own guidance to keep alt text natural and accurate rather than loaded with repeated terms.
A fourth, subtler failure is alt text that is technically descriptive but generic to the point of uselessness, something like coffee cup or people in a cafe, applied identically across a dozen different photos that each show something specific and different. This fails the same test as a blank field in a quieter way: it exists, but it does not distinguish one image from another or tell a listener anything a truly blank field would not.
There is a fifth pattern worth naming, since it comes from good intentions rather than laziness: alt text that describes the photo's mood or feeling rather than its actual content, something like a cozy, inviting atmosphere perfect for your morning coffee, written across an interior shot. This reads more like marketing copy than a description, and a screen reader user hearing it gets an impression of tone without ever learning what is pictured, how many tables, what the walls look like, whether anyone is sitting there. Save the marketing voice for your regular page copy, and let alt text do its plainer, more literal job.
Good Examples
Latte art: bad, latte. Good, a barista pouring a heart shape into a latte at the counter. The good version names the actual technique and the actual setting, giving a listener a real picture rather than a single generic word.
The espresso bar: bad, espresso machine. Good, a two group espresso machine with a barista pulling a shot into a small white cup. The good version distinguishes this photo from any other espresso machine photo by naming the specific action happening in it.
Roasting: bad, coffee roasting. Good, a roaster checking the color of beans through the sight glass of a drum roaster mid roast. The good version captures a specific moment in a process, not just the general topic of the photo.
The pastry case: bad, pastries. Good, a glass pastry case with croissants, muffins and a chocolate babka on wooden trays. The good version names the actual items visible, which is meaningfully more useful to someone deciding whether to visit than the single word pastries.
A patio: bad, outdoor seating. Good, a wooden patio table with two chairs under string lights in the evening. The good version conveys the mood and setting, not just the category of the space.
A menu board: bad, menu. Good, a chalkboard menu board listing espresso drinks and seasonal specials above the counter. This is a case worth a caution: a menu board photo's alt text should never substitute for an actual text menu elsewhere on the page, since a screen reader user needs the real menu content, not just a description that a menu board exists.
Staff at work: bad, employees. Good, two baristas working side by side at the espresso bar during a morning rush. The good version captures the actual scene, giving a sense of the shop's real energy rather than a flat, generic label.
An event photo: bad, event. Good, a small group gathered around a cupping table tasting coffee samples during a Saturday cupping class. The good version tells a listener what kind of event it was, which matters far more than the single word event ever could.
The interior: bad, coffee shop interior. Good, a bright interior with exposed brick walls, wooden tables and a row of windows along one side. The good version gives an actual sense of the space's character, which is exactly what a photo of an interior is meant to convey in the first place.
A bag of beans: bad, coffee bag. Good, a kraft paper bag of whole bean coffee with a hand drawn label reading a seasonal blend name. If your actual bag has specific, readable text on its label, describing that text is often more useful than describing the bag's general appearance, since a shopper deciding what to buy benefits from knowing what the label says, rather than a vague summary of what the packaging generally looks like from a distance.
Accessibility
WCAG's success criterion 1.1.1 Non text Content is the guideline behind everything in this post, requiring that meaningful images have a text alternative conveying their actual information. It also recognizes a real exception worth knowing: a purely decorative image that adds nothing informational, a repeating background texture, a plain divider line, can carry an empty alt attribute, which tells a screen reader to skip it entirely rather than describe something with no actual meaning to convey.
Knowing when to leave alt text empty is its own small skill. A large hero photo of your cafe's storefront that conveys information, what your shop looks like from the street, should get a real description. A small decorative icon repeated as a divider between sections of a page, conveying nothing on its own, is a legitimate case for an empty alt attribute. The test is simple: if removing the image would remove real information from the page, describe it plainly; if removing it would change nothing meaningful, it is fine to leave the alt attribute empty.
You can test any of the pairs above yourself with a screen reader in a few minutes. On a Mac, VoiceOver reads a page's images aloud in the order they appear, including any alt text attached to them, and skips over an image with an empty alt attribute entirely, moving straight to the next piece of content. Try loading your own homepage with VoiceOver or a similar built in Android screen reader turned on, and listen closely to what it says about each of your own photos.
Length matters less than accuracy, and no fixed maximum length is stated in the documentation this post relied on, so resist any confident sounding rule claiming an exact character limit. What matters is a short, complete sentence that describes the image, whether that lands at forty characters or a hundred and twenty. Write it the way you would say it out loud to someone who cannot see the photo, keep it honest to what is pictured, and you will land in the right range naturally without needing to count characters at all.
One last habit worth building: whoever uploads new photos to your site, whether that is you or a staffer, should get in the practice of writing the alt text at the same moment they upload the image, not as a separate task saved for later that quietly never happens. A photo added today with a real, accurate alt text sentence attached costs almost no extra time in the moment. The same photo revisited weeks later, disconnected from the memory of what was happening when it was taken, takes far longer to describe accurately, if anyone ever gets back to it at all.
Related Reading
More from Hillcane on this topic, plus the pages on the site that sit next to the work.
Frequently Asked Questions
How long should alt text be?
As long as one short, complete sentence needs to be, and no longer. Neither WCAG 1.1.1 nor Google's Search Central image guidance, as this post relied on them, states a fixed maximum, so be wary of any confident rule naming an exact character count. A good description might land at forty characters or at a hundred and twenty. Something like a wooden patio table with two chairs under string lights in the evening is a comfortable length because it says what is there.
What is the most common alt text mistake?
Leaving the field blank on a photo that carries meaning is the most common mistake, since a screen reader user then hears nothing about an image clearly placed on the page for a reason. A close second is a leftover filename such as IMG_4021 or lattephotofinal2, which VoiceOver or an Android screen reader reads aloud exactly as written. A quieter third is generic text like coffee cup copied across a dozen different photos, which exists but tells a listener nothing new.
Should I ever leave alt text empty on purpose?
Yes, for purely decorative images that add nothing informational, such as a repeating background texture, a plain divider line, or a small icon repeated between sections. WCAG success criterion 1.1.1 Non text Content allows an empty alt attribute in that case, which tells a screen reader to skip the image. The test is simple: if removing the image would remove real information, like a storefront hero photo showing what your shop looks like from the street, describe it; if nothing meaningful would change, leave it empty.
What does keyword stuffed alt text look like, and why is it bad?
It looks like best coffee shop downtown espresso latte cappuccino near me, typed into the field in the hope of helping search. Read aloud by a screen reader, it is an unpleasant string of terms that describes no actual image. It also runs against Google's Search Central documentation on image best practices, which recommends short, accurate, descriptive text over repeated keywords. Compare it with a two group espresso machine with a barista pulling a shot into a small white cup, which describes the photo.
Should my alt text always mention my cafe's name or city?
Only when the photo shows it, such as a storefront shot where your sign is visible, or a bag of beans whose readable label carries a blend name. Adding your cafe's name or city to every image regardless of content is the same keyword stuffing problem Google's Search Central guidance warns against. A photo of two baristas working side by side at the espresso bar during a morning rush is better described exactly that way, without a city name tacked onto the end.
How do I test my own alt text with a screen reader?
On a Mac, turn on VoiceOver and load your own homepage, listening to how it reads each image's alt text aloud in order, including skipping any image with an empty alt attribute entirely. A similar built in screen reader exists on Android devices, and either lets you hear exactly what a real user would experience.
What should alt text say for a menu board photo?
Describe the photo itself, such as a chalkboard menu board listing espresso drinks and seasonal specials above the counter, but never let that description substitute for an actual text menu elsewhere on the page. A screen reader user needs the real menu content available as text, not just a description confirming that a menu board exists somewhere in the photo.
Are these twenty examples from real cafe websites?
No. All twenty examples, ten photo subjects each with a bad and a good version, are invented and generic, written to show the pattern rather than describe any real business's photo. The subjects cover latte art, the espresso bar, roasting, the pastry case, the patio, the menu board, staff at work, an event, the interior, and a bag of beans. No reliable prevalence data on how cafes currently write alt text was available for this post, so none is claimed.
Does good alt text help my search rankings?
Google's Search Central documentation says alt text helps its systems understand what an image shows, which is a different claim from a direct ranking boost, and this post does not promise one. Treat accurate alt text first as a basic courtesy for customers using a screen reader and as a WCAG 1.1.1 requirement for meaningful images. Any search benefit is secondary. The same plain sentence serves both audiences, so write it for the person listening and the indexing mostly takes care of itself.
What is the simplest way to write alt text for a new photo?
Describe the photo the way you would describe it out loud to a friend on the phone who cannot see it and only has a few seconds to picture it. One short, accurate sentence naming what is happening in the image is almost always enough, and it is the same habit behind every good example in this post.
Work with Hillcane
You have been told to add alt text and the box is blank. Here are ten photo subjects with a bad example and a good one, so you can stop guessing and start writing.
Want help auditing the alt text across your entire cafe website? Reach out at hillcane.co/contact or call (256) 384-2449.
Comments