Practical working guide
An image alt-text workbook for business websites
Write alternative text for the purpose an image serves in its current context. Describe useful information, describe the action for a functional image and use an empty alt attribute for purely decorative images. Do not fill every image with keywords or repeat nearby text unnecessarily.
Inventory the use, not just the media file
W3C WAI’s image decision tree distinguishes informative, functional and decorative uses. Apply the decision to each placement: the same photograph may need different treatment in a case study and a decorative banner.
| Placement | Details |
|---|---|
| Repair case study photograph | Purpose: Show the relevant completed change Example treatment: “Repaired door frame with the damaged corner replaced.” |
| Image-only home link | Purpose: Navigate home Example treatment: Accessible name states the destination |
| Background flourish | Purpose: Decoration only Example treatment: Empty alt for an image element |
Sources: W3C WAI — Image decision tree.
Work a before-and-after pair
Fictional example: two images show a damaged threshold and the finished repair. If the surrounding copy already explains the job, use concise descriptions distinguishing the visible condition in each photograph. Do not claim “safe”, “certified” or “best workmanship” from appearance alone. For a complex diagram, provide the important explanation as nearby text rather than squeezing every detail into alt text.
Give the review an owner
Record page, placement, image reference, purpose, proposed alternative, language and reviewer. Check the rendered page with images unavailable and with assistive technology where appropriate. Translate the meaning, including the action of functional images, rather than copying English alt text across locales. Recheck whenever the image’s role or adjacent content changes.