Skip to content
Blitz Studio

Accessibility · Practical guide

How to write useful image alt text for a business website

Decide what each image contributes before writing its alternative text or treating it as decoration.

Updated

The quick answer

Write alternative text around the image's purpose on this particular page. Describe the information a reader needs, describe an action when the image supplies a control's meaning, and use an empty alternative for an image that is only decorative. The same file can need different treatment in different contexts.

Blue ceramic mug on a wooden table, with a hand holding its handle.
AI-generated editorial photograph. The scene is illustrative and is not a real product listing or client photograph.

Write alternative text around the image's purpose on this particular page. Describe the information a reader needs, describe an action when the image supplies a control's meaning, and use an empty alternative for an image that is only decorative. The same file can need different treatment in different contexts.

Start with the surrounding page

Before writing, identify where the image appears, what the nearby text already explains and what information would disappear if the image were unavailable. A file's subject alone does not settle the answer.

W3C's image decision tree organizes the choice around text in images, function, information and decoration. Use it as a starting point rather than assuming every image needs a detailed visual description. It explicitly does not cover every case.

Keep the decision with the page record. If an editor reuses an image in another role, review the alternative again instead of carrying forward the old text without context.

Use the visible subject without inventing details

The cover on this guide is an AI-generated editorial photograph of a blue ceramic mug on a wooden table, with a hand at its handle and a camera nearby. It is an illustrative scene, not a real product listing or a client's photograph.

For this guide's visual example, a possible alternative is: Blue ceramic mug on a wooden table, with a hand holding its handle. That identifies visible information relevant to the example. The exact sentence should follow the image's role in the final page.

A fictional product listing would need a different review. If glaze color and shape help distinguish a product, include those details when they are visible and accurate. Do not invent capacity, manufacturing origin, material certification or a product name from the photograph. Put verified specifications in real product text, where everyone can read them.

Distinguish information from decoration

An image can contribute meaning, support the mood of a section or repeat information already present in nearby text. W3C's image tutorial distinguishes informative, decorative and other image roles. For an HTML image that is purely decorative, an empty alternative is commonly expressed as alt="".

An empty alternative is a deliberate implementation decision. It is different from leaving the attribute absent. Record why the image is decorative and check that the page still communicates everything important without it.

Do not use the decorative category to hide difficult content. If a diagram contains the only explanation of a process, the team still needs an accessible way to communicate that process. The decision belongs to the content and implementation review together.

Describe the action when the image provides a control's meaning

An icon that is the only content of a link or button needs to communicate the destination or action. A visible printer symbol might represent a print command; describing its appearance alone would miss its purpose.

If text already gives the same control a clear name, review whether additional image text would repeat it. Evaluate the resulting accessible name in the built interface rather than treating each file in isolation. The button-label guide connects that name to the actual behavior.

A copy document cannot establish the final accessible name by itself. Record the implemented link or button, its visible wording, the image alternative and the observed name together. Escalate ambiguous combinations to the implementer or accessibility reviewer.

Keep important screenshot information available as text

A screenshot can demonstrate a real interface, but the reader may need its important information without seeing the pixels. Explain the relevant observation in the article and provide the source and capture date. Do not paste a whole interface transcript into one alternative simply because it contains many words.

For example, the action-label guide describes two actual resource controls in nearby text and credits the screenshot. The screenshot supports that explanation; it is not the only place where the difference is communicated.

If a chart or complex diagram contains essential data, provide an appropriate text equivalent or supporting data in the page. Choose the method for the information involved rather than setting an arbitrary character limit for every image.

Keep caption, alternative and provenance separate

A caption is visible editorial text. Alternative text communicates the image's role when appropriate. A provenance record identifies the source, permission or generation method. These records can support one another but answer different questions.

Our generated photograph is visibly labeled AI-generated. Its alternative describes the relevant subject, while the provenance record retains the exact generation prompt. Neither the alternative nor the caption presents the scene as a real client project.

For a genuine screenshot, record the public source and date, plus whether the capture came from production or a local preview. A screenshot of a draft resource should not be described as evidence of an external product's behavior.

Review the rendered result and the handoff

Use the website image review worksheet to record page context, image purpose, proposed treatment, visible caption and reviewer. Then inspect the actual markup and the surrounding copy. Check the meaningful reading order and any control name involved.

A keyword list is not a useful substitute for the image's meaning. Avoid generic boilerplate that can be attached to any file. If an image changes, or its purpose changes, reopen the decision.

Image delivery is a separate task. Suitable compression, responsive sources and dimensions help the page operate well, but do not prove that the alternative is useful. The responsive-image guide covers those delivery checks.

Sources and review scope

Sources checked 1 November 2026. The mug and product-listing examples are illustrative. This guide supports editorial and implementation review; it does not certify the accessibility of a whole website or claim search-ranking benefits.

The Blitz Studio team

We design brands, build websites and engineer digital products.

Talk about your next project
Blitz StudioSTART A CONVERSATION

Let’s build
something great.

Tell us where you’re headed. We’ll shape the right next step together.

Book a discovery call30 minutes to explore your project. k@blitzstudio.xyzPrefer email? Drop us a note.
DESIGN / DEVELOPMENT / DIGITAL PRODUCTSCONNECT ON LINKEDIN