Three images, three different jobs. The right alt text depends on the job.
What to build
Correct alt text for each image.
Requirements
- The logo (inside the link to the home page) has
alt="Home". - The swirl is decoration, so its alt is empty, with the attribute present.
- The sales chart's alt contains the number
40, the fact that it shows. - All three have a
widthandheight.
Constraints
Do not add visible text. Do not start any alt with "Image of".
Example
A chart's alt text should state what the chart shows: its message, not its shape.
Why it works
The purpose of each image decides its alternative. A linked logo works as a link, a decoration carries no information, and a chart carries a fact.
Hints
Hint 1
A logo that is a link: say where the link goes.
Hint 2
Decoration gets alt="", which is not the same as no alt.
Hint 3
A chart should give the information, not merely say that it is a chart.
Solution
Show one correct solution (try it yourself first)
<a href="/"><img src="logo.svg" alt="Home" width="48" height="48"></a> <img src="swirl.png" alt="" width="200" height="20"> <p>Sales this year:</p> <img src="chart.png" alt="Sales rose by 40 percent this year" width="400" height="300">