HTML & CSS Interview Question #18

What is the purpose of the alt attribute on an image?

HTML Fundamentals, Structure, Semantics, Links, Images, Tables & Forms Junior Beginner

Quick Interview Answer

The alt attribute provides a text alternative when an image cannot be perceived or loaded and is essential for many screen-reader users. The correct text depends on the image's purpose and surrounding context.

Detailed Explanation

The alt attribute provides a text alternative when an image cannot be perceived or loaded and is essential for many screen-reader users. The correct text depends on the image's purpose and surrounding context.

Informative images need concise meaningful alternatives. Decorative images should generally use alt="" rather than repeating irrelevant information. Images used as links or controls need alternative text that communicates their function.

Code Example

<!-- Informative -->
<img src="sales-chart.png"
     alt="Sales increased 18 percent in Q3">

<!-- Decorative -->
<img src="divider.png" alt="">