Write Useful Image Alt Text for Photos, Links, Charts and Decoration

Ask whether the image supplies information, performs a function, or simply decorates the page. The W3C WAI images tutorial organizes guidance around those roles. An informative product detail should describe the detail a buyer needs. A search icon acting as a button needs a name for its action. A decorative texture can use an empty alternative. Do not classify an image as decorative just because writing a description is difficult; a complex chart can carry essential information even when a short sentence cannot capture it all.

Consider the surrounding text before writing. If a paragraph already explains a pictured feature, the image description can focus on the visual detail that adds something useful rather than repeating the entire paragraph. If the image is the only place a warning or instruction appears, the alternative must make that information available. For a screenshot tutorial, identify the control or state that matters, not every toolbar icon. The screenshot preparation guide helps create a focused capture, but cropping alone does not provide a text alternative.

For a furniture listing, 'Oak desk with two left-hand drawers and black metal legs' is more useful than 'beautiful desk photo' or a string of search phrases. For a repair tutorial, the same desk might need 'Loose screw at the rear left leg bracket.' Both descriptions can be correct because the page asks different questions. Avoid unsupported inferences about a person's identity, mood, or characteristics. Describe what is visible and relevant. If uncertainty matters, do not turn a visual guess into a confident claim just to make the sentence sound complete.

There is no universal character count that makes every alternative useful. Aim for concise wording, but do not cut an essential instruction merely to meet an arbitrary limit. Long descriptions of complex material are usually better placed in visible nearby text where everyone can benefit. Redundant prefixes such as 'image of' are often unnecessary because assistive technology already identifies the element as an image, although the medium itself can matter in contexts such as paintings or screenshots. Read the alternative in the surrounding paragraph to check whether it actually supports the page's flow.

A purely decorative img should generally have an empty alt attribute, written as alt=''. Omitting alt is not equivalent: some assistive technologies may announce a filename or URL. A repeated decorative divider, ambient background flourish, or image that adds no information beyond nearby text may qualify. Do not use empty alt on the only visible label of a control. If a button contains an icon with no text, the control still needs an accessible name, provided through an appropriate labeling method. The icon's appearance alone does not communicate its action to every user.

For a linked company logo that is the only content of a home link, wording such as 'Company name home' communicates the destination. If the link already contains equivalent visible text, repeating the same label through the image can become noisy. Test the complete accessible name rather than judging the alt string in isolation. Theme variants should keep the same function even if their colors differ. The dark-mode image guide addresses asset appearance; accessibility still depends on the actual HTML and labeling around those assets.

A chart showing a trend needs more than 'bar chart.' A short alternative can identify its subject and central takeaway, while adjacent prose or a table supplies values and relationships. For example, describe that support response time fell across the quarter and provide the monthly figures in accessible text. A diagram explaining a multi-step workflow may need an ordered textual explanation. The image's complexity should not force a reader to infer essential information from color, line position, or a visual legend they cannot perceive. Make the underlying meaning available independently.

Use real text for headings, instructions, prices, and other important words whenever the design allows it. Text baked into an image cannot reflow like HTML text and can become illegible after resizing. If an image of text is necessary, its alternative should communicate the words that matter. For long documents, provide an accessible document or transcription rather than placing pages of text in an alt attribute. The image resizer and SVG to PNG tool prepare visual assets; neither operation creates the missing semantic structure or an accessible reading order.

Inspect the published DOM to confirm the intended alt attribute actually appears. A CMS media-library field can be overridden by a page builder, theme, or individual image block. Test with a screen reader or accessibility inspection tools and read the page with images unavailable. Follow image links by keyboard and confirm their names explain where they go. Check captions for duplication and ensure decorative images do not interrupt the reading sequence. An automated missing-alt check is useful, but it cannot determine whether a present description is accurate or appropriate.

Descriptive context can also help search systems understand an image, but keyword stuffing makes the experience worse and is not a substitute for useful content. Keep filenames readable, surround images with relevant text, and make the image itself reachable through appropriate markup. The image SEO guide covers delivery and discovery checks. When using responsive variants, ensure that every crop still matches the alternative's meaning. Review alt text whenever the image changes: replacing a front view with a close-up while retaining the old description is a common editorial error that no format converter can detect.