guaro mediaMake something worth sharing
Menu
Publishing

Write meaningful alt text for a tutorial photograph

Describe the photograph’s instructional purpose in its page context, preserving the information a reader needs without turning alternative text into a catalogue of visible objects.

Hands folding a decorated piece of paper.

A tutorial photograph often shows something the surrounding words cannot explain as quickly: a hand position, a cable connection, or the difference between two arrangements. Alternative text should carry the useful meaning of that image for someone who cannot see it. Begin by asking why the photograph was included. The answer matters more than describing every colour and object in the frame.

Identify the information the image adds

Read the nearby instruction and then look at the photograph. What would be missing if the image were unavailable? It might be the location of a connector, the direction of a movement, or the position of a reflector. W3C’s informative-image guidance emphasises conveying the relevant meaning in context rather than providing an indiscriminate literal description.

For an illustrative example, a photograph of a recording desk might need text explaining that the microphone is supported separately from the keyboard surface. A description that lists a desk, computer, microphone, and chair misses the relationship the tutorial is trying to show.

Write a concise, accurate description

Name the important subject and relationship in ordinary language. Include direction or position when it matters to the instruction. Avoid relying on colour alone to identify a part, particularly when the reader needs another distinguishing feature. Do not infer an outcome that the photograph cannot establish.

Keep essential task instructions available in the main text where practical. Alternative text can then describe how the photograph illustrates them without having to hold an entire procedure. A complex diagram or multi-step visual may require a fuller adjacent explanation rather than an overlong alt attribute.

Consider redundancy and image function

If the image adds no information beyond nearby text and exists only for decoration, assess whether it should have an empty alternative according to the publishing system’s accessibility approach. Do not automatically give every photograph the same generic description. An informative tutorial image deserves a description specific to its role.

If the image is also a link or control, its function needs consideration as well. A linked preview that opens a larger view has a different context from a purely illustrative photograph. Coordinate with the page editor so the accessible name and nearby text make the action understandable.

Review the page as a whole

Read the article using its alternative text in place of the photographs. Check that it remains coherent and that the same explanation is not repeated unnecessarily in the body, caption, and alternative. Revisit the description when an image is cropped or replaced; the useful feature it names must still be present in the approved photograph.

Keep alternative text with each image asset during handoff, but allow it to be adapted when the same photograph serves another purpose elsewhere. Context determines what information matters. A useful description gives the reader access to the instructional point, rather than simply proving that someone looked at the picture.