Detailed explanation
The alt and title attributes serve different purposes on an HTML image. The alt attribute supplies a text alternative for the image’s meaning or function when someone cannot perceive it. Screen readers generally use it to identify the image, and browsers can display it when the image cannot load, although visual rendering varies. The title attribute provides supplementary advisory information, which desktop browsers commonly show as a tooltip after a pointer hovers over the image. It should not contain information essential to understanding or using the page.
Under the hood, browsers expose image semantics through an accessibility tree that assistive technologies consume. For a typical img element, alt supplies its accessible name. A title may be exposed as additional information or used as a fallback name in some circumstances, but that behaviour is not a dependable replacement for alt. Native title tooltips are also difficult or impossible to discover through touch and are not reliably available through keyboard navigation. This is why adding title alone does not make an image accessible.
Write alt according to the image’s purpose in its surrounding context, rather than describing every visible detail. For an informative photograph, communicate the relevant information; for an image used as a button or link, communicate its action or destination. A logo might use alt="Acme" rather than the vague alt="Company Logo". If that logo is the only content of a homepage link, alt="Acme home" can clarify the destination. Purely decorative images should normally have alt="", allowing screen readers to ignore them. Omitting alt is different: a screen reader may announce a filename or URL instead.
For example, <img src="logo.png" alt="Acme" title="Acme company logo"> has a meaningful alternative and an optional tooltip, though the tooltip adds little value. In interviews, the important distinction is equivalent information versus supplementary information—not simply failure text versus hover text. Explain that img elements generally require an appropriate alt attribute, that an empty value is intentional for decoration, and that essential instructions belong in visible content rather than title.
Key points to remember
- alt communicates an image’s meaning or function when the image cannot be perceived.
- Screen readers generally use alt as the image’s accessible name.
- title supplies optional advisory information, commonly displayed as a hover tooltip.
- Decorative images should normally use alt="" rather than omit alt.
- Essential information must not depend on title because touch, keyboard, and assistive-technology support is unreliable.
Common mistakes candidates make
- Using title instead of alt and assuming the image is accessible.
- Omitting alt on decorative images instead of providing an intentional empty value.
- Writing generic alternatives such as "image" or "Company Logo" without considering context or purpose.
Likely follow-up questions
Should alt and title contain the same text?
Usually not: repeating alt in title adds little value and may produce redundant announcements in some setups. If there is no useful supplementary information, omit title.
What should alt contain when an image is a link?
If the image is the link’s only content, its alt should communicate the destination or purpose, such as "Acme home". If adjacent text inside the same link already provides that meaning, an empty alt may avoid repetition.
Is alt enough to describe a complex chart?
Usually, a complex chart needs more than a short alternative. Use alt to identify the chart and provide its detailed findings or underlying data in nearby accessible text or a table.
Interview tip: Lead with “alt is a text alternative; title is supplementary advice,” then contrast an informative image with a decorative one.