What is alt text?

What information should an image alternative convey?

The alternative should preserve the image’s useful meaning or function in its current context. For an informative photograph, that usually means a concise description of the relevant visible detail. For an image that operates a link or control, it may instead need to explain the destination or action.

• In HTML, an image commonly carries its alternative in the alt attribute.

  For example, <img src="chimney-flashing.jpg" alt="Split flashing at the base of a brick chimney"> identifies the defect being discussed. The wording is illustrative. It should only be attached to a photograph that actually shows that detail.

• The same photograph can need different treatment in different locations.

  Within a repair article, the split may be the important information. In a project gallery, the image may illustrate a completed stage of work. On a booking button, the image’s function may matter more than its visual contents.

• Start by asking what a visitor would lose if the image disappeared.

  That question helps separate meaningful information from decoration. Do not begin by asking which search phrase can be inserted into the attribute. A descriptive alternative is useful because it accurately represents the content, not because it provides hidden space for keywords.

• Google’s image guidance explains that it uses alt text alongside computer vision and page content to understand images.

  The attribute is one source of context. It does not replace the surrounding explanation, make a photograph authentic, or establish a particular search ranking.

• The broader discipline of image SEO also covers image discovery, quality, loading, and context.

  Those concerns interact with alternatives but require separate checks. A technically optimized image can still have an inaccurate description, and an excellent description cannot repair a broken image URL.

How do you distinguish informative images from decoration?

Classify the image by what it contributes to the page, not by its size or attractiveness. A photograph is informative when it communicates relevant details that readers need. An image is decorative when removing it would preserve the meaningful content and functionality. Context can change that classification even for the same file.

How can you describe a project photograph without inventing details?

Describe the relevant visible subject and use verified context only when it is necessary to convey the image’s meaning. Avoid inferring a location, person’s identity, cause of damage, or successful outcome from appearance alone. If the interpretation depends on professional judgment, place that explanation in properly attributed surrounding content.

• A roof photograph may show displaced tiles.

  It may not establish what displaced them, how long the condition has existed, or whether water entered the property. “Displaced tiles beside a roof valley” describes visible information. “Storm damage that caused a severe leak” adds causal claims that need evidence beyond the photograph.

• Similarly, a completed patio image does not prove which company installed it.

  That identity must come from verified project information. If the image is licensed stock, do not describe it as your team’s recent installation. The alternative and caption should not turn an illustrative asset into fabricated project evidence.

• A useful description selects the relevant detail rather than cataloging everything in view.

  A chimney repair article may need the condition of the flashing, not the color of a distant fence. Details become useful when they explain the topic, distinguish the image, or support the reader’s task.

• Include orientation when it matters.

  A diagram or comparison may need to distinguish the left-hand damaged component from the right-hand replacement. Avoid directions that make sense only within one cropped layout. Responsive changes can remove or rearrange the feature those directions refer to.

• A contractor can provide technical context for a photograph, but the editor should still inspect the file.

  A note describing corroded pipework does not belong on an image of the replacement pipe. Verify that the evidence, image, caption, and alternative refer to the same stage of the project.

• This is part of creating helpful content: the description assists understanding and respects what the available evidence can support.

  Technical terminology can be appropriate, but it should not make a simple visual detail harder for the intended audience to understand.

What changes when an image is a link or a button?

An image that provides the only meaningful label for a link or button needs an alternative that communicates its function. Naming its appearance may leave the action unclear. When adjacent text already supplies an adequate label within the same control, the image can often avoid repeating that label through a separate description.

• Consider a linked calendar icon that opens appointment booking.

  “Calendar icon” describes the graphic but does not clearly state what happens. “Book an appointment” describes the action. The correct implementation also depends on the control’s other labeling, so inspect the link or button as a whole.

• A company logo linking to the homepage presents a similar decision.

  The alternative should help identify the link’s purpose. A lengthy description of the logo’s shapes and colors may be irrelevant to that task. If a design discussion specifically examines the logo, the descriptive requirements could be different.

• Google notes that alt text on an image link can serve as anchor text.

  This is another reason to represent the destination accurately. A project thumbnail linking to a case study should not use an unrelated service phrase solely because that phrase is commercially valuable.

• A card can contain an image and a visible project title inside one link.

  Repeating the complete title in the image alternative may create unnecessary duplication when the link’s name already includes that text. Review the computed accessible name instead of editing each child element in isolation.

• An image-only social icon needs a useful label for the destination.

  “Blue circle” does not explain that it opens the business’s social profile. Likewise, an image-only telephone control needs an understandable purpose. Its appearance cannot be the only clue for people who cannot see it.

• Test the control with keyboard navigation and assistive technology where possible.

  Confirm that the announced name makes sense and that the action matches it. Populating an image’s attribute is only one part of making the control operable and understandable.

How should diagrams, charts, and maps be handled?

Complex visuals often need more explanation than a short attribute can provide. Use the alternative to identify the visual and provide its essential orientation, then make the detailed information available in accessible page content. A long description should preserve the relationships and values that readers need, not merely announce that a diagram exists.

• The W3C complex-image tutorial describes short and long alternatives for information-rich visuals.

  A short label can identify a chart, while a nearby explanation or linked description supplies its details. Choose an approach that readers can discover and use in the published layout.

• For a drainage diagram, the useful information may include where a blockage lies relative to an access chamber and outlet.

  A short alternative saying “Drain diagram” does not preserve that relationship. Explain the relevant flow path and the marked location in the surrounding content.

• For a service coverage map, list the actual covered areas in text.

  Describe exceptions if the boundary is important to booking. A visitor should not have to distinguish a shaded region visually to learn whether the company can serve their address.

• For a chart, include the measure, time period, units, and meaningful trend.

  If exact values support the reader’s decision, supply them in an accessible table or equivalent structured content. Do not squeeze a full table into one long attribute merely to make an automated checker report a description.

• A process graphic can often be accompanied by an ordered explanation of the same steps.

  Preserve branching conditions when they matter. A diagram showing different paths for emergency and routine requests loses useful meaning if its alternative only lists the box labels without their relationships.

• Give the explanatory section a clear heading.

  An H1 tag identifies the page’s main subject; appropriate lower-level headings can help readers find the diagram’s detailed explanation. This structure makes the alternative easier to use without forcing everyone through an oversized attribute.

• Do not treat a tooltip as the only long description.

  It may be unavailable on touch devices or difficult to reach with a keyboard. Put essential information somewhere readers can reliably access, and verify that any reference to its location remains accurate after layout changes.

How should text inside an image be represented?

Preserve meaningful words that are available only within the image, especially when they communicate instructions, an offer, or an important condition. If the same text is already available as real nearby text, repeating it may be unnecessary. Prefer publishing essential wording as actual page text where the design allows it.

• A service promotion graphic might include the service name, eligibility, and an expiry date.

  A description of its colors does not preserve those terms. Readers who cannot see the graphic need the meaningful wording and conditions, ideally in the surrounding content rather than an unwieldy alternative alone.

• Review the offer before copying its text.

  If the graphic is outdated, adding an accurate transcription still exposes an outdated promotion. Correct or remove the asset and the page’s claims together. Alt text cannot repair expired prices, unsupported availability, or contradictions with the booking process.

• A screenshot used to explain a booking form may contain many labels.

  Describe the relevant action and provide the instructions as normal text. Readers should not need to extract a full interface from the image’s alternative before they can understand which field to complete.

• Certificates and badges deserve particular caution.

  State verified information about what they represent without inflating the credential. A badge image does not prove current membership or eligibility. If those details matter to a customer, explain their status in visible content using evidence the business can confirm.

• Text rendered as an image can also become difficult to read when enlarged or viewed on a small screen.

  Providing an alternative supports nonvisual access, but it does not resolve every visual usability issue. Review the choice of format alongside the wording supplied for it.

How do you check the published attribute in a CMS?

Inspect the actual image element on the live page and compare its alternative with the file and surrounding content. A media-library field can be overridden by a page component or left unused by a template. The published attribute, not an editor’s saved field alone, determines what the implementation supplies.

• Begin with a representative informative image.

  Open the browser inspector and locate its image element. Read the alt value exactly. Check whether the displayed file is the one the description names, especially when a responsive source or image transformation changes the asset.

• In WordPress, distinguish the media attachment’s alternative field from the inserted block’s alternative.

  Changing the library entry may not revise every existing instance in the way an editor expects. Confirm the published result rather than assuming that a successful save updated all uses.

• In a page builder, review component-level settings.

  A banner widget may expose title, description, and image alternative as different fields. The visible caption does not necessarily populate the attribute. A generic image title field may also be unrelated to what assistive technology receives.

• Check reused cards and galleries.

  A template may copy the page title into every thumbnail’s alternative, producing identical labels for distinct photographs. Another may use the file name by default. Both require contextual review, even though an automated report might classify the attributes as present.

• For dynamically inserted images, inspect after the content has loaded.

  An attribute that appears in the initial source can be replaced during hydration. Conversely, an image might be added only after interaction. A JavaScript SEO investigation can help explain rendering differences, while accessibility testing must examine the actual interactive state.

• A website SEO checker can help locate missing attributes across pages.

  Use its output to prioritize inspection. It cannot determine whether a description is true, whether an image is decorative, or whether the control’s complete accessible name is useful.

What should you inspect in responsive and lazy-loaded images?

Verify that each displayed version retains an appropriate alternative and that the description still matches what users receive. Responsive sources may change size or composition, while lazy loading can change when an element appears. Those behaviors require implementation checks rather than separate keyword descriptions for every image file variation.

• A responsive image element can refer to multiple source files while carrying one alternative.

  If those files show the same meaningful content at different resolutions, the same wording may be suitable. If an art-directed crop removes the feature being described, revise the image choices or the description’s assumptions.

• Imagine a photograph whose desktop crop shows a cracked fitting on the right.

  The mobile crop displays only a technician’s hands. The alternative referring to the crack now fails to represent the displayed visual. Preserve the relevant feature in both crops or choose a contextually accurate solution.

• Loading placeholders should not introduce confusing duplicate announcements.

  A low-resolution preview and a final image may be implemented within one element or as separate elements. Inspect the actual result. Do not assign the same informative alternative to multiple temporary layers without understanding their accessibility behavior.

• Google’s image documentation distinguishes standard HTML images from CSS background images, which it does not index as images.

  If an essential project photograph is implemented only as a background, review that choice. CSS decoration has no ordinary image alt attribute to fill in later.

• An accessibility solution may require changing markup rather than adding a text field to the editor.

  For an informative visual, use an appropriate semantic representation and accessible explanation. For decoration, ensure the design does not depend on it to communicate necessary information.

• Also test failure states.

  A broken image can expose its alternative visually, but that is not a complete content strategy. Visitors still need a usable page and working controls. Repair the file path, delivery, or loading logic separately from revising its description.

How would a roofing photograph review work in practice?

Review the image’s role, visible details, and verified project context before choosing a description. The following invented example illustrates that sequence without claiming client results. It shows how an editor can improve accuracy and access while keeping technical diagnosis and commercial promises in the visible explanation where they can be assessed.

• Suppose a roofing page contains a close-up of chimney flashing before repair.

  The existing alternative reads “Best roofers Leeds Manchester Birmingham cheap roof repairs.” It says little about the image and includes locations the photograph cannot establish. Its main function is a string of commercial phrases.

• The editor views the file and finds a split in the flashing beside the chimney base.

  “Split flashing beside the chimney base” could communicate that relevant detail. If the image does not show the entire chimney, there is no need to invent a broader view in the description.

• The contractor’s inspection notes identify water ingress associated with this defect.

  That conclusion belongs in the accompanying project explanation, with enough context to distinguish a professional finding from a general inference. The alternative can remain focused on the visual evidence.

• A second photograph shows newly installed flashing.

  Give it wording appropriate to that stage, rather than copying the first description. If both appear in a comparison, clearly label which is before and which is after. Preserve those distinctions if the gallery rearranges on mobile.

• The page should not claim the repair permanently prevents all leaks unless the business can support that promise.

  Neither the photographs nor their descriptions establish such an outcome. Explain relevant scope and limitations in the service content instead.

Why is copying keywords into every alternative a mistake?

Repeated commercial phrases often replace the information the image is supposed to convey. They can make a page harder to use and create inaccurate labels for different visuals. Keywords can appear naturally when they describe the subject, but inserting unrelated phrases or place lists undermines the alternative’s purpose.

What other questions should you resolve during review?

Decide whether the issue concerns missing markup, inaccurate wording, redundant information, or a visual that needs a longer explanation. Those cases require different fixes. Filling an empty field is appropriate only after understanding the image’s purpose. The final review should preserve useful meaning rather than maximize the number of populated attributes.

• Is there a universal character limit?

  The sources cited here do not establish a single ideal length for every alternative. Keep simple descriptions concise, and move complex information into accessible surrounding content. A rigid limit can remove essential meaning or encourage padding to meet an arbitrary target.

• Should the alternative repeat the caption?

  Sometimes their functions differ. A caption might identify the project and explain its context, while the alternative describes a visible detail. If the caption already communicates the entire relevant meaning, reconsider whether a separate repetition adds value.

• Does every image need the words “image of”?

  Usually the more useful wording identifies its subject or function directly. Mention the format when it matters, such as distinguishing a diagram from a photograph. Do not add introductory words simply to make a short description longer.

• Can filenames substitute for alternatives?

  A filename can offer technical context, but it is not a reliable substitute for a purpose-written alternative. Generated names may be meaningless. Descriptive names also cannot explain a linked image’s action or preserve the information in a complex diagram.

• Can automated generation help?

  It can produce a draft for review, but it may misidentify equipment, invent context, or miss an image’s function. Treat any generated wording as unverified until someone checks the visual and its surrounding content. Do not publish confident technical diagnoses inferred solely from a model’s description.

• When should alternatives be reviewed again?

  Recheck them when files, crops, captions, links, or the surrounding explanation change. A once-accurate description can become wrong after a replacement image is uploaded. Keeping those elements aligned is more useful than repeatedly editing unchanged wording for speculative search benefits.

• For recurring template issues, a website design and development review can address the components producing the markup.

  Editors can then focus on contextual wording. Resolve both sides where necessary so that useful descriptions actually reach the published page.

Primary documentation

Google Search Central: Image SEO best practices and SEO Starter Guide. W3C Web Accessibility Initiative: An alt Decision Tree and Complex Images tutorial. Accessed 8 October 2026.