Decide what the photo adds
Look at each photo in context. An image that shows the work needs a brief description of what matters to a visitor. A background texture used only for decoration can use an empty alt attribute (alt="") when it’s an HTML image. An image-only link should have alt text that describes its destination or action. If the image and visible text share the same link and the text already describes the destination, the image can use empty alt text when it adds no information. W3C’s alt text decision tree
Describe the changes people can see
For a before-and-after gallery, put the full project story in visible text. Use each photo’s alt text to identify the view and add the relevant visual detail. Keep the descriptions in the same order as the images.
Illustrative example. A Burnaby stair contractor shows two photos of the same entry stair.
- Before photo. “Entry stairs before renovation, with carpeted treads and a solid half wall.”
- After photo. “Same stairs with oak treads and an open railing with black balusters.”
- Visible caption. “We replaced the carpeted steps with oak treads and opened the stairwell with a new railing.”
If your caption already explains the entire visual and the adjacent image adds no further information, review it as a redundant image using the W3C decision tree. If you add progress images, give each a detail that helps the reader follow the sequence. Avoid guessing the material, location or scope from the photo alone.
Handle thumbnails, badges and linked images
When a thumbnail is the only content in a link to a case study, a label like “View the entry stair renovation” tells the reader what will open. If a button displays text inside an image, make that text available in the label or use a regular text button. For a badge that conveys information, add the verified wording in the surrounding text or its text alternative. W3C’s guidance on functional images
Use wording that fits the page. Google uses alt text along with page content and image analysis to understand images. Keep it descriptive and leave repeated city names and search phrases out unless they help describe the photo in context. Google Search Central’s image guidance
Review one gallery before publishing
- Read the page in order with the photos out of view. Can you tell what work was done and what changed?
- Open the editor and confirm that informative images have text alternatives. For decorative HTML images, check that the published markup uses an empty alt attribute.
- Use the Tab key to reach each clickable thumbnail. If you use a screen reader, listen for a clear link name and check that the description of each project photo matches its view.
Start with the gallery on your most important service page. Explore our contractor websites and marketing services if you’d like help organising the photos and project details.
Get 3 Free Ideas for My Business
Editorial note. This guide was prepared with AI assistance for AI Power Studio. The example is illustrative. W3C and Google documentation checked November 13, 2026.