Everything you need to know about the alt attribute

Discover everything about the alt attribute, its importance for SEO, accessibility, and how it enhances the user experience on websites.

The alt attribute is still mostly missing, misused, or misunderstood.

So, what is the alt attribute for? What is the use of alt? And why using it correctly is so important.

What is the alt attribute?

The alt attribute in HTML stands for alternative text. It is used in HTML documents to specify alternative text that is to be displayed in place of the element that cannot be rendered. Primarily used with the img (image) element and input type image.

The alt attribute examples

<img src="path/to/world-map-image.jpg" width="600" height="600" alt="World Map" usemap="#worldMap">
<map name="worldMap">
  <area shape="rect" coords="0,0,50,50" href="#" alt="Asia" title="Asia">
  <area shape="rect" coords="60,10,110,60" href="#" alt="Africa" title="Africa">
  <area shape="rect" coords="120,30,170,80" href="#" alt="North America" title="North America">
  <area shape="rect" coords="130,90,180,140" href="#" alt="South America" title="South America">
  <area shape="rect" coords="20,150,70,190" href="#" alt="Antarctica" title="Antarctica">
  <area shape="rect" coords="80,40,130,90" href="#" alt="Europe" title="Europe">
  <area shape="rect" coords="160,120,210,170" href="#" alt="Australia/Oceania" title="Australia/Oceania">
</map>

<img src="https://example.com/images/cat.jpg" alt="A cute cat sitting on a window sill" width="300" height="200">

<form action="/submit_form" method="post">
  <div><label for="name">Name</label><input type="text" id="name" name="name"></div>
  <div><label for="email">Email</label><input type="email" id="email" name="email"></div>
    
  <div><input type="image" src="submit-button.png" alt="Submit Button" width="100" height="40"></div>
</form>

The alt attribute vs property

The alt attribute and the alt property are both used within HTML to provide alternative text for images, but they serve slightly different purposes and have nuances that are important to understand.

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

Properties reflect the live state of elements, whereas attributes represent the initial state when rendered in the DOM.

Key differences:

• Definition: the alt attribute is written in the HTML code of an image element, e.g., <img src="example.png" alt="Description of the image">. The alt property can be accessed or modified using JavaScript, e.g. document.querySelector("#exampleImage")?.alt = "New description".

• Synchronization: changes to the alt property in the DOM do not automatically update the alt attribute in the HTML. This means that the initial value set in HTML can differ from what is currently in the DOM if modified by JavaScript. However, you can use methods setAttribute and removeAttribute for updating the Document Object Model (DOM) and the HTML content of the page simultaneously. These methods are part of the HTMLElement interface and allow you to dynamically modify the attributes of an element.

  When you use setAttribute, it sets or changes the value of an attribute on the specified element. If the attribute already exists, its value is updated. If it does not exist, the attribute is added. This method also reflects in the HTML source of the page immediately after execution.

  The removeAttribute method, on the other hand, removes the specified attribute from the element. The removal is immediate and affects both the DOM structure and the HTML content displayed in the browser.

Read article View the properties of DOM objects to find out how to access and manipulate element properties using Chrome DevTools.

Accessibility

The primary function of the alt attribute is to enhance accessibility for visually impaired users. The text alternative can be read aloud or rendered as Braille. Screen readers read the alt text aloud, allowing these users to understand the content and purpose of images on a webpage.

For example, if an image of a dog is described with the alt text “a small dog sitting on a windowsill”, the screen reader will convey this information to the user, making the web content more inclusive.

For input elements of type image, the alt attribute of the input element is used to provide a functional label. This label indicates the button’s purpose but makes no attempt to explain the image.

SEO (Search Engine Optimization) and the alt attribute

Search engines can’t directly interpret images, so they rely heavily on alt text to understand image content.

Descriptive alt attributes help search engines accurately index images, improving your chances of appearing in relevant search results, especially in image searches. Image search in search engines refers to the functionality that allows users to find images on the internet based on specific keywords or phrases. This feature is provided by most major search engines. It enables users to input text queries related to what they’re looking for, and the search engine then returns relevant images from across the web.

Remember, the search engine doesn’t see like we do. It interprets the code. The better the image description, the better the chance for a better position in search results.

Backup content when image fails to load

If an image fails to load, the alt text serves as a backup description.

Alt text during the image loading

Some browsers may display alt text during the loading process, especially if the image takes time to load. This can vary between browsers and versions.

The alt for text-only browsers

A text-only browser is a type of web browser that displays only the textual content of web pages, excluding most graphic content such as images, videos, and animations. This type of browser is very useful in low-bandwidth environments since it loads sites faster than graphical web browsers.

Text-only browsers, such as Lynx, do not support the display of images in the same way that graphical browsers do. Instead, they provide an alternative method to convey the information that images would typically represent.

When a text-only browser encounters an image, it will display the text specified in the alt attribute of the img tag. This allows users to understand what the image represents without seeing it visually.

If an image with the alt attribute reads A beautiful sunrise, a text-only browser would display:

[A beautiful sunrise]

Some examples of text-based web browsers include Lynx, Links, ELinks, w3m, and Browsh. These browsers vary in features but share the common characteristic of focusing on text content over graphical elements.

Decorative images

Decorative images are those that serve only to enhance the visual appeal of a webpage without adding informational value. Examples include background images, divider lines, or images used solely for aesthetic purposes. Since these images do not need to be described to make sense of the content, they should have an empty alt attribute to avoid unnecessary noise for assistive technologies.

The alt attribute generator

The alt attribute generator also refers to the image description generator. We have used the Pallyy Image Description Generator designed to assist users in generating compelling descriptions for images.

This tool leverages artificial intelligence (AI) to analyze uploaded images and produce high-quality, descriptive captions that can enhance the effectiveness of social media posts, blog entries, product listings, and other forms of digital content.