Detailed explanation
Accessible images let people understand the information or action an image provides even when they cannot see it. The main HTML mechanism is the alt attribute on an <img> element. Browsers expose this text as the image’s accessible name, which screen readers can announce. Alternative text can also help when an image fails to load. In interviews, the important distinction is that alt text should communicate the image’s purpose in its context, rather than mechanically describe every visible detail.
For informative images, write a concise alternative containing the information the reader needs. For example, <img src="chart.png" alt="Bar chart showing sales rising 20% in Q3"> communicates the chart’s main takeaway. Avoid starting with “image of” or “picture of” because screen readers generally identify the element as an image already. However, identifying a relevant format, such as a chart or screenshot, can be useful. If a graph contains detailed values or relationships, provide a nearby explanation or an accessible data table as well; a short alt attribute cannot replace all that information.
For purely decorative images, use alt="" so screen readers normally ignore them. For example, <img src="divider.png" alt=""> prevents an ornamental divider from interrupting the reading order. Do not simply omit alt: some browser and screen-reader combinations may announce a filename or URL instead. Whether an image is decorative depends on context. An illustration that adds no information beyond adjacent text may be decorative, while the same illustration in a teaching exercise may need a meaningful alternative. CSS background images have no alt attribute, so essential information must also be available in accessible page content.
For functional images inside links or buttons, describe the action or destination, such as “Search” or “Home,” rather than only their appearance. If visible text already names the same control, empty alt text can avoid repetition. Finally, verify the result with a screen reader and inspect accessible names in browser developer tools. Interviewers look for context-sensitive decisions, not merely the claim that every image needs descriptive text.
Key points to remember
- Give informative images concise alt text that communicates their purpose in context.
- Use alt="" for decorative images; do not omit the attribute.
- For image-only links and buttons, describe the destination or action.
- Supplement complex charts and diagrams with accessible explanations or data tables.
- Check accessible names and reading order using browser tools and a screen reader.
Common mistakes candidates make
- Writing filenames, vague labels, or unnecessary phrases such as “image of” as alt text.
- Omitting alt on decorative images instead of explicitly using alt="".
- Describing a functional icon’s appearance without explaining what its control does.
Likely follow-up questions
What is the difference between missing alt and alt=""?
An empty alt attribute explicitly indicates that the image does not need a spoken alternative. A missing attribute does not communicate that intention, and a screen reader may announce the filename or URL.
How would you make a detailed chart accessible?
Provide short alt text identifying the chart and its main takeaway. Add an adjacent explanation or accessible data table containing the important values and relationships.
What alt text should a logo inside a homepage link have?
If the logo is the link’s only content, use text such as “Acme home” to identify the destination. If text within the same link already provides that name, the logo can use alt="" to avoid repetition.
Interview tip: Explain informative, decorative, and functional images with one example each, then mention how you would test them.