Detailed answer
Describe the information or function the image contributes in its context.
A decorative image can use empty alt text to avoid noise. A linked image may need text describing its destination. Avoid filenames and unnecessary repetition of captions. The same image may need different alt text in different contexts.
Example
<img src="editor.png" alt="HTML source beside a live preview" width="800" height="450">
Understanding the behavior
Alternative text depends on the image's purpose in context. Describe information that the surrounding text does not already provide. Decorative images usually need an empty alt value, while an image used as a link needs a name that explains the destination or action.
Practical implementation notes
Read the paragraph with the alternative text in place of the picture. Avoid repeating the filename or adding image of when it contributes nothing. Complex diagrams may need a longer adjacent explanation.
How to check it
Temporarily block the image request and read the alternative text in context.
Expected result
The alternative communicates what the screenshot illustrates.
Watch out: An omitted alt attribute differs from intentionally empty alt text.
Read the reference ↗