HTML Alt Text

Understanding HTML Alt Text

Alternative text, commonly called alt text, provides a text alternative for an image when the image cannot be seen or displayed.

Alt text is specified with the alt attribute of the <img> element and is particularly important for people who use screen readers to access webpage content.

The alt Attribute

The alt attribute is used with the <img> element to provide a text alternative that represents the purpose or meaningful information of an image.

<img src="/img/images/image-600x400.jpg"
     alt="HTML image example"
     width="600"
     height="400">

The alt attribute is required on the <img> element. However, the value does not always contain descriptive text because images that are purely decorative should generally use an empty alt="" value.

Why Alt Text Matters

Images can communicate information that is unavailable to someone who cannot see them. Appropriate alt text makes that information available in a text form that assistive technologies such as screen readers can use.

Alt text can also provide useful information when an image fails to load because of an incorrect path, missing file, connection problem, or other issue.

The purpose of alt text is not simply to satisfy HTML validation. It is part of making the meaning and functionality of webpage content available to more users.

Writing Useful Alt Text

Useful alt text communicates what a user needs to know about an image in the context of the surrounding content. It should usually be concise while still conveying the important information or purpose of the image.

<img src="/img/products/blue-coffee-mug.jpg"
     alt="Blue ceramic coffee mug">

Avoid unnecessary phrases such as image of or picture of when the same information can be communicated more directly.

<!-- Less useful -->
<img src="/img/products/blue-coffee-mug.jpg"
     alt="Image of a blue ceramic coffee mug">

<!-- More direct -->
<img src="/img/products/blue-coffee-mug.jpg"
     alt="Blue ceramic coffee mug">

Alt Text Depends on Context

There is not always one correct alt text value for an image. The appropriate text depends on why the image appears on the page and what information it contributes to the surrounding content.

For example, the same photograph might need a description when it provides important information, a short functional alternative when used as part of a link, or an empty alt="" value when it is included only for decoration.

Think about what information would be missing if the image were unavailable. That information often provides a good starting point for writing appropriate alt text.

Decorative Images

An image that adds visual decoration but does not communicate meaningful information generally does not need descriptive alt text. In this situation, use an empty alt attribute.

<img src="/img/images/decorative-divider.png" alt="">

The empty value tells assistive technologies that the image does not contribute meaningful content and can generally be ignored. The alt attribute itself should still be present.

When Images Cannot Be Displayed

When an image cannot be loaded, the browser may display its alternative text in place of the missing image. This provides another reason for writing alt text that communicates useful information rather than a filename or generic description.

<img src="/img/images/image-not-found.jpg"
     alt="HTML image example"
     width="600"
     height="400">

In this example, the image path intentionally points to a file that does not exist. The missing image makes it possible to see how the browser handles the alternative text when the image resource cannot be displayed.

Common Alt Text Mistakes

• Omitting the alt attribute entirely.
• Using a filename such as image-600x400.jpg as alternative text.
• Writing image or photo without communicating useful information.
• Adding unnecessary phrases such as image of when they do not add meaning.
• Describing decorative images that should have an empty alt="" value.
• Writing excessively long descriptions when a concise alternative communicates the same information.
• Using the same alt text for unrelated images simply because the images have similar dimensions or filenames.

HTML Alt Text Example

The following example uses the alt attribute to provide a text alternative for an image.

<h1>HTML Alt Text Example</h1>

<img src="/img/images/image-600x400.jpg"
     alt="HTML image example"
     width="600"
     height="400">

<p>The alt attribute provides a text alternative for the image.</p>

Try changing the alt text in the editor. You can also change the image source to a filename that does not exist to observe what happens when the browser cannot load the image.

Alt Text Best Practices

• Provide an alt attribute for every <img> element.
• Describe the purpose or meaningful information of the image rather than every visual detail.
• Consider the surrounding content when deciding what the alt text should communicate.
• Keep alt text concise when a short description provides all the necessary information.
• Use alt="" for images that are purely decorative.
• Avoid using filenames as alt text.
• Do not begin every description with phrases such as image of or picture of.
• Test pages with images disabled or unavailable to help evaluate whether important information is still understandable.

Summary

The HTML alt attribute provides a text alternative for an image and is an important part of accessible webpage content. Effective alt text communicates the purpose or meaningful information of an image in its particular context, while purely decorative images generally use an empty alt="" value.