Text Alternatives
Every non-text element — image, icon, chart, or graphic — needs a text equivalent that communicates the same information to users who cannot see it.
A screen reader encounters an image and reads whatever text alternative is provided. If none exists, it announces the filename or says nothing. Either way, the information is lost.
The alt attribute
The alt attribute on an <img> element provides the text equivalent of an image. Its value should communicate what the image conveys — not describe what the image looks like unless the appearance itself is the content. A photo of a product should describe the product as it relates to the surrounding context. A chart should describe the data it shows, or reference a table containing that data. A decorative image — one that adds no information — should have an empty alt="" so screen readers skip it entirely.
Icons
Icons that convey meaning without accompanying visible text need an accessible name — either via aria-label, aria-labelledby, or a visually hidden text element. An icon-only button labelled ”×” communicates nothing to a screen reader without additional context. The rule: if removing the icon would lose information, that information needs a text alternative.
Complex visuals
Charts, diagrams, and data visualisations require alternatives that match their informational complexity. A bar chart cannot be described adequately in a single alt attribute sentence. Provide either a structured data table as an alternative, a linked text summary, or a long description using aria-describedby. The goal is not to mention that a chart exists — it is to transfer the same information the chart contains.
The mistake
Writing alt text that describes the image visually rather than communicating its meaning. “Blue button with white text” tells a screen reader user nothing useful. “Submit order” tells them what the button does. Alt text is not a caption for sighted users — it is a functional equivalent for users who cannot see the image.
The takeaway
Every non-text element in your interface is a decision about whose experience you are excluding. Work through your designs element by element and write the text alternatives before handing off. If you cannot write a meaningful alternative, the element may be decorative — in which case alt="" is the correct answer.