What Is Alt Text and Why Is It Important?
Alt text is a written alternative that conveys the purpose or information of an image when the image cannot be seen or is not available.
Part of our guide: Mobile-Friendly Websites: The Complete Guide for Businesses
Alt text is a written alternative that conveys the purpose or information of an image when somebody cannot see it or the image is unavailable. In HTML, it is normally provided through the alt attribute of an image element.
Good alt text is contextual. The same photograph may need different wording on a product page and in a news article, while a purely decorative image usually needs an empty alternative so assistive technology can skip it.
Why alt text matters
Screen readers can announce alt text to people who cannot see the image. It can also help when images fail to load or when a person uses a text-focused browsing mode. The W3C images tutorial groups images by their purpose and explains the alternatives each type needs.
Alt text is one requirement within website accessibility. It does not make an otherwise inaccessible page compliant, but missing or unsuitable alternatives can remove essential information or controls.
Thinking about your own rebuild?
Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.
Describe purpose, not every pixel
Ask what the image contributes at this point in the page. A concise alternative should convey that contribution. It does not need to inventory every colour, object and background detail.
For a team photograph on an about page, names and roles may matter. In an article about workplace layout, the arrangement of the space may matter more than identities. If the surrounding sentence already explains the image completely, repeating it can create noise.
Avoid beginning every alternative with “image of” or “picture of” because the assistive technology normally announces the element as an image. Mention the medium when it is relevant, such as a diagram, illustration, screenshot or portrait.
Informative images
An informative image communicates material not otherwise available nearby. Write a short alternative that captures its essential meaning. For example, a photograph demonstrating a damaged component should identify the visible damage, not merely name the object.
Context determines the necessary detail. A landscape used to identify a venue might need the building name and entrance position. The same scene used as atmosphere on a homepage may be decorative.
Keep the alternative concise, then place longer explanation in the body or caption when readers need it. Alt text should not become a hidden paragraph that sighted users cannot access.
Decorative images
An image is decorative when it adds visual mood or repetition but no information needed to understand or use the page. Give it an empty alternative, written as alt="", so a screen reader can usually ignore it.
Do not omit the attribute. A missing alt attribute can cause some technologies to announce the filename or URL, which is rarely useful. An empty alternative is an intentional editorial decision, not unfinished work.
Background images created with CSS are generally ignored by assistive technology, which is appropriate only when they are truly decorative. Do not place essential text or status in a background image.
Functional images
When an image is the only content of a link or button, its alternative should describe the action or destination. A magnifying-glass icon that submits search needs an accessible name such as “Search”, not “magnifying glass”.
Visible text beside the icon may already provide the name. In that case, the image can be decorative to avoid duplicate announcements. The complete control must still have a programmatically determinable name.
Logo links often need the organisation name and, where useful, the destination such as home. Avoid repeating “logo” unless identifying the graphic as a logo adds necessary meaning.
Complex images and charts
A chart, map or diagram may communicate too much information for a short alt attribute. Provide a concise identification and summary, then supply the underlying data or a longer explanation in nearby text.
For a chart, state the important conclusion in the prose and provide an accessible table where exact values matter. For a process diagram, describe the stages and relationships in logical order. Everyone benefits from access to the explanation, not only screen-reader users.
Do not place a very long description solely in alt text. It can be difficult to navigate and review. Use structured HTML with headings, lists and tables where appropriate.
Images containing text
Avoid using an image as the only presentation of important words. Text in HTML can reflow, enlarge, translate, respond to colour preferences and be copied. Words baked into a graphic cannot adapt as reliably.
When an image of text is necessary, the alternative should include the meaningful words or equivalent information. Examples may include a historical document, a photographed sign or a logo whose styled wording is the content.
Promotional graphics shared from social media often contain dates, prices and instructions. Recreate those details in the page copy rather than expecting the alt attribute to carry an entire advertisement.
Product and service images
Describe the characteristics a customer needs for the decision. A product alternative might include type, colour, view and significant feature, while nearby product data handles size and price. Do not copy the full product title into every gallery image.
Different views need distinctions such as front, back, detail or item in use. If thumbnails select a larger image, their accessible names should make the choice clear.
Service websites should describe genuine project photographs according to the claim they support. “New accessible ramp at the north entrance” is more useful than “our work”.
People, identity and sensitive context
Describe identity attributes only when they are known, relevant and appropriate. Do not guess ethnicity, gender, disability, emotion or relationships from appearance. A neutral description of the activity may be sufficient.
Use a person’s name when the page identifies them and the image supports that identification. For illustrative stock or generated imagery, avoid implying that depicted people are customers, employees or case-study participants.
Consider privacy and dignity before publishing the image at all. Alt text cannot repair an inappropriate or misleading use of photography.
Screenshots and interface examples
Explain why the screenshot is present. If it demonstrates a setting, name the setting and the relevant state. Provide the instructions in normal page text so they remain searchable, responsive and maintainable.
Do not attempt to transcribe an entire interface into the alt attribute. A short alternative can identify the screen, while a numbered procedure explains the controls in order.
Screenshots become outdated quickly. Review the image, instructions and alternative together after a product update.
Alt text and SEO
Descriptive alternatives can help search systems understand image content and context, but their primary purpose is accessibility. Do not stuff keywords, location lists or sales phrases into the attribute. Repetition creates a poor screen-reader experience and is not a sound search strategy.
Use a relevant filename, nearby copy and a caption when each genuinely helps readers. Keep the same meaningful alt text across mobile and desktop presentations, as Google’s mobile-first guidance recommends.
The mobile SEO article explains how image quality, content equivalence and crawling fit into the wider search picture.
Write alt text through a simple process
First decide whether the image is informative, functional, complex or decorative. Then read the surrounding content and identify what would be missing without the image. Write that information plainly and remove detail that does not support the purpose.
Read the page with the image and its alternative in sequence. Check for repetition. Ask whether the wording implies facts the image cannot prove. For an important image, invite another editor to review it.
Document recurring examples in the content guide. Product galleries, staff portraits, article heroes and icons can each have a house pattern while still requiring contextual judgement.
Common alt text mistakes
Leaving the attribute missing is different from intentionally using an empty value. Copying the filename, writing only “photo” or using a generic phrase such as “business image” provides little value.
Over-description is also a problem. Lengthy visual inventories delay the reader from reaching the content. Keyword lists and marketing claims make the alternative sound unnatural and may misrepresent what is visible.
Another mistake is describing a functional icon’s appearance instead of its action. “Right arrow” does not tell somebody whether the control advances a gallery, submits a form or opens another page.
Managing alt text in a CMS
Content systems should provide a clearly labelled alternative-text field and allow an editor to mark an image decorative. Guidance should appear close to the field, with examples relevant to the organisation.
Be careful with a central media library. One stored alternative may not fit every use of the asset because purpose changes by context. Allow page-level alternatives where possible and do not force decorative imagery to inherit unsuitable text.
Automated generation can suggest a visual description, but it does not understand the editorial purpose reliably. A person responsible for the content should review, revise or reject the suggestion before publication.
Audit existing images
Start with high-traffic and task-critical pages. Find images with missing attributes, suspicious filenames, repeated generic text and unusually long alternatives. Automated tools can locate candidates, but a human must judge purpose and quality.
Review linked images, buttons, charts, maps and images of text before decorative photography. Repair the shared component when the same issue occurs repeatedly. Add image checks to the normal publishing checklist.
The question does a business website need accessibility explains why ongoing ownership matters beyond a one-off audit.
Frequently asked questions
How long should alt text be?
Use as many words as needed to convey the image’s purpose concisely. Complex detail belongs in visible nearby content rather than an extremely long attribute.
Do all images need descriptive alt text?
All image elements need an appropriate alt decision, but decorative images normally use an empty alternative rather than a description.
Should alt text say “image of”?
Usually not. Assistive technology normally identifies the element as an image. Mention the medium only when it adds useful context.
Can AI write alt text automatically?
It can suggest what appears visually, but it may miss context, invent details or describe irrelevant features. Human editorial review is required.
Does alt text improve Google rankings?
It can help search systems understand an image, but it should be written for accessibility and context, not manipulated as a ranking tactic.
Make every image earn its place
When an image conveys information or performs an action, provide an equivalent that works without sight. Mark decorative images so assistive technology can skip them. Check each image’s purpose before deciding what alternative it needs.
Afterworks includes image handling, content guidance and accessible components within a website rebuild so good alternatives are supported by the publishing system as well as individual editors.
