Alt text for business websites: products, menus and logos
Describe what an image contributes to the page. Its purpose matters more than a formula or a list of keywords.
An image may show a product detail, name your business or contain the only copy of a restaurant menu. Those are different jobs. Writing the same kind of description for all of them misses the point of alternative text.
W3C's Images Tutorial groups images by purpose and explains how to choose a text alternative. Start with the image in its actual page context. Ask what information a visitor would lose if the image were unavailable.
Decide what the image is doing
An informative image needs a text alternative that conveys its meaning. A decorative image can use an empty alternative when it adds no information. An image used as a link or button needs an alternative describing its function. These distinctions come from Images Tutorial.
Do not decide from the file alone. A photograph of a chair could illustrate a mood in one place and identify a product in another. Read the nearby text and try the page task. Write for the job the image does here.
Products: describe the useful visible detail
For a product photo, identify the detail that helps a customer understand the item. A fictional example is Blue ceramic mug with a curved handle and white interior. That description is useful if those features are visible and relevant to the product.
Keep claims about materials, safety or performance in approved product information. Do not infer them from a picture. If the product page already explains a detail, consider what the image adds beyond that text. Avoid repeating a long product description in every image alternative.
For a set of photos, distinguish the views when the difference matters. Front view and rear fastening may be more useful than product photo one and product photo two. Ask someone unfamiliar with the item whether the descriptions clarify the differences.
Menus: provide the content, not just a label
An alternative such as Our menu does not give a reader the dishes or prices shown in a menu image. Put the menu information in readable page text and keep it current. Treat the image as a visual version of information available through another route.
If the image contains a lot of information, W3C's Complex Images guidance explains approaches for complex images, including longer descriptions. Choose a method that actually makes the information available. A short alternative cannot stand in for a full menu.
Have the person who maintains the menu compare both versions. Check names, prices and important notes. When the menu changes, update the text version at the same time. Do not let the accessible route become an older, incomplete menu.
Logos: consider the name and the action
If a logo identifies the company, the business name may be the useful alternative. If it links to the home page, consider how that function is conveyed. W3C's Images Tutorial covers functional images. The description should help someone understand the control, rather than describe the artwork in unnecessary detail.
Check whether nearby text already supplies the same information. A repeated announcement can become cumbersome. Ask a qualified tester to review the actual result when a logo and text are combined in a link. Context determines whether the wording is helpful.
Keep the wording direct
Write a draft while looking at the image and surrounding page. Remove sales language that does not describe the image's purpose. Do not fill the alternative with search phrases or the photographer's filename. A reader needs the information, not a list of targets for a marketing report.
Use an empty alternative deliberately for a decorative image when appropriate. That is different from leaving the decision unresolved. Ask the person editing your platform how to implement that choice correctly. Verify the published result rather than relying on a filled-in settings box.
Review a small set before editing the whole library
Start with a product page, a menu or another important customer route. Make an inventory of the images and the information each contributes. Write proposed alternatives beside them. Have the business owner approve facts that describe products or services.
Ask an accessibility tester to review the page in context. The text around the image and the control it belongs to both matter. Save the approved alternatives with your content records so a later photo replacement gets a fresh review.
The DOJ web accessibility guidance identifies missing text alternatives as an example of an accessibility barrier. Writing useful alternatives is one part of the work. Keep checking the rest of the page, including the form or purchase route the images support.
Access Heroes may earn a commission if you buy a tool we recommend. You pay the tool's maker directly, and we always tell you before you sign up. This article is general information, not legal or tax advice.
Sources
Want help checking image descriptions on your business site? Book a free web accessibility check with TJ. He will look at your site with you and tell you what to fix first.
Comments