Alternative text communicates an image’s function or meaning in its context. Decorative images should avoid redundant announcements.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: An icon-only download link needs an action name; a decorative flourish can use empty alt. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Determine the image’s purpose
Ask whether it adds information, decorates surrounding text or names an interactive action.
Step 2: Write contextual alternatives
Describe the information or action needed here rather than every visible pixel. Use empty alt for purely decorative images.
Step 3: Provide complex data separately
A chart may need a concise summary plus a table or longer explanation nearby.
Worked scenario
An icon-only download link needs an action name; a decorative flourish can use empty alt.
<a href="/guide.pdf"><img src="download.svg" alt="Download guide"></a>
<img src="flourish.svg" alt="">The first alternative names an action because the image is the link’s content. The second avoids redundant decoration. If visible link text already names the action, an empty icon alternative prevents duplicate announcements.
Common mistake
Describing appearance without conveying function can leave a control unusable.
Verify the behavior
Disable images or inspect the accessible tree. Verify action names remain clear and decorative images do not add noise.
Interview exercise
Handle a chart image.
Answer and reasoning
Provide the important conclusion and a text or table alternative for information users need to inspect.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.