The purpose of alt text, or alternative text, is to communicate an image’s information or function when someone cannot see it. It should describe what matters in context, without piling up keywords. A decorative image needs an empty alt attribute; an image functioning as a link or button needs to explain its purpose. In this guide from Agencia Cero you will see how to write it with examples and how it relates to SEO.
SEO aims to help search engines discover and interpret useful content. For example, a blinds company can explain its service for people searching for “roller blinds Las Condes,” provided it serves that area. That query can guide a page, but should not automatically be copied into every image. Alternative text responds to what each image communicates, not a keyword quota.
To understand the broader context, review what SEO is and how it has evolved.
Agencia Cero
Alternative text serves an accessibility function and also provides context to search engines. Google combines the alt attribute with page content and vision systems to interpret images. A relevant description can help understand them, but does not guarantee indexing, traffic, or a ranking. The priority is for someone who cannot see the image to receive the necessary information.
What is alternative text?
In HTML, alternative text is added through the alt attribute of the img tag. Screen readers can communicate it, and browsers can show it if the image fails to load. It is not the same as a visible caption or the title attribute. Its wording depends on whether the image informs, decorates, or allows an action.
<img src="cortina-roller.jpg" alt="White roller blind installed in a window">Why is alternative text important?
Reviewing alternative text matters for three reasons, without confusing accessibility with a ranking guarantee:
- Access to content: an appropriate alternative communicates image information to people using screen readers. The text must match the element’s function; indiscriminately describing every image can add noise.
- Context for search: Google uses alternative text alongside other signals to understand an image. This does not ensure it appears in results or increases visits.
- Understanding when the image is unavailable: alternative text can preserve useful information if the file fails to load. It does not replace a complete site accessibility review.
How to write useful alternative text
Before writing, identify the image’s function, read the surrounding text, and decide what information would be lost if it were not visible. Then write a brief, sufficient alternative. The following examples are hypothetical; they do not automatically describe the image inserted in this article.
Identify the image’s function
The same photograph can serve different functions depending on the page. In a tourism offer, identifying the location and activity matters. In a portfolio, composition or framing may matter. Choose the information someone needs to understand the content without adding qualities or locations you do not know.
Example: a photo on a tourism page
Imagine a photo of a boat on Lake Ranco, with mountains in the background, on an excursions page. If you have confirmed the location, an alternative could be “Tour boat on Lake Ranco, with mountains in the background.” “Adventure tourism on Lake Ranco” describes an offer, but does not explain what the image shows on its own. If the photo links to booking and has no other accessible name, the link’s purpose must also be clear.
In a portfolio, that same scene could be described as “Panoramic view of the lake and mountains, with a boat in the foreground,” if those elements are present. Add “panoramic photograph” when the format provides relevant information. Do not use “professional photograph” as an advertising label replacing description.
We recommend reviewing 22 SEO Tips for Beginners
Cristián Hernández G.
When to include a keyword
A keyword can form part of alt text when it precisely names something important in the image. For example, “white roller blind installed in a window” makes sense if that is visible and relevant to the page. Do not add municipalities, services, prices, or variants solely to attract searches. Describe the visual or functional information readers need, even if the result does not include the article’s main keyword.
Avoid a buildup such as “vegan pastries, vegan restaurant, vegan desserts.” If the image shows pastries and that detail is known, “Freshly baked vegan pastries on a tray” can be more useful. Do not infer ingredients or properties the photo and its context cannot confirm.
Describe relevant information precisely
For an informative image, identify the elements supporting the explanation: what appears, what happens, and which detail helps understand the page. You do not need to inventory every object or narrate feelings the image does not communicate verifiably.
Use clear words and check that the description matches the actual image. One way to review it is to imagine what you would tell someone who cannot see it and needs to understand the content. If nearby text already explains the same thing, avoid unnecessary repetition and assess whether the image adds independent information.
How long alternative text needs to be
There is no universal 125-character limit that guarantees complete reading in every screen reader. Aim for concision without losing essential information. When an image contains a complex chart, map, or diagram, also provide an extended explanation or accessible table in the content instead of loading all the data into the alt attribute.
In a hypothetical breakfast example with waffles, blueberries, and tea, a list of every plate, napkin, and background detail can distract from what matters. Describe the elements relevant to that page. If the purpose is teaching table setting, some surrounding details could indeed be necessary.
Example: describing breakfast without losing precision
For that breakfast, “Waffles with blueberries and a cup of tea” can be an appropriate alternative if the image shows it. Do not change waffles to scrambled eggs merely to shorten it. You can normally omit “image of,” because the screen reader already identifies the element; retain a reference to the image type when it adds meaning, as in a diagram or screenshot.
In a food photography portfolio, you could highlight lighting or composition if relevant. On a café menu, identifying the dish usually matters. The establishment’s name or location should be added only if needed to understand the image or its function. Do not turn alt text into a sales phrase or attribute an unconfirmed establishment to the photo.
What else to review in site images
Alt text is one part of image review. Also check appropriate dimensions, file size, sharpness, and mobile loading. You can evaluate compression with tools such as JPEG.IO, comparing the result with the original: compression does not guarantee retaining all quality. Avoid uploading confidential material to external services without authorization.
A visible caption can explain context, authorship, or details useful to everyone. Place the image near related text and use descriptive filenames when preparing new resources. Do not repeat keywords in alt text, captions, and titles out of obligation. Verify that important images are accessible and review the page with assistive technologies when possible.
How to handle decorative, functional, and complex images
The decorative images that provide no information or function should have alt="". Leaving the attribute empty is not equivalent to omitting it: without it, some technologies may announce the filename. Decide according to the specific use; a photo can inform on one page and be decorative on another.
In a functional image, such as an icon that is the only content of a button, communicate the action: “Search” or “Download catalog,” as appropriate. If the same link already includes visible text identifying it, empty alt text can avoid repetition. The control must always retain an accessible name.
When an image contains necessary text, provide those words in an accessible alternative and avoid images of text if you can publish actual text. For a complex chart, use a brief description identifying it and accompany it with the data and conclusions in text or a table. Do not reduce essential information to meet an arbitrary limit.
How to review alt text before publishing
Open the actual image, check its function, write the alternative, and review the published page. If you use WordPress, verify the attribute in the inserted image: changing a detail in the media library does not always update all existing insertions. Also test links or buttons containing images and confirm their purpose is understandable without seeing them.
To expand on these criteria, consult the W3C accessible images tutorial and Google’s image recommendations. If you need to review how content, navigation, and contact connect, explore our strategic web design service or tell us about your context through contact.
