HTML Alt Attribute

Definition

The alt attribute specifies the alternative text to be used if the element it is representing is not displayed.

Applicable Elements

The alt Attribute can be used with the following elements:

• <area>
• <img>
• <input>

HTML <area> alt Attribute

The <area> tag defines predefined clickable areas within an image map. This allows areas on an image to be associated with a link.

When used with the <area> element, the’ alt’ attribute specifies the alternative text for the hyperlink to be used on browsers that do not display images. It is targeted towards assistive technology, such as screen readers.

Syntax

 <area alt="Earth" href="https://en.wikipedia.org/wiki/Earth">

Usage

• The alt attribute is required if the <area> href attribute is used.
• The alt attribute is used on browsers that do not display images so that it presents the user with the same choices as if the image was displayed. It represents the value of the href attribute.
• The alt attribute may be left blank if there is another <area> element in the same image <map> that points to the same hyperlink, and that <area> element has an alt attribute.
• Unlike with the <img> and <input> elements, the alt attribute is not displayed if the main <img> element cannot be loaded due to error (rather than because of assistive technology).

Values

Values can include:

• Descriptive text that describes the content of the relevant area of the image.

Examples

The following example shows the Moon and the Earth on an image, each represented by an <area> element. Each of the<area> elements contain an ‘alt’ attribute describing its contents.

<img
  src="https://res.cloudinary.com/thewebmaster/image/upload/f_auto,q_auto,w_600/image/moon-earth.png"
  width="600"
  height="337.5"
  alt="Area Tag Demo."
  usemap="#workmap"
/>

<map name="workmap">
  <area
    shape="circle"
    coords="178,171,133"
    alt="Earth"
    href="https://en.wikipedia.org/wiki/Earth"
    target="_blank"
  />
  <area
    shape="circle"
    coords="455,130,80"
    alt="Moon"
    href="https://en.wikipedia.org/wiki/Moon"
    target="_blank"
  />
</map>

HTML <img> alt Attribute

The <img> tag is used to embed an image on a web page.

The alt attribute represents the <img> and is used for screen readers or as a text replacement should the image not load for any reason.

Syntax

<img src="/moon-earth.png" alt="Moon and Earth">

Usage

• The alt attribute specifies the alternative text to be used if the image is not displayed for any reason.

• The alt attribute may be used when copying and pasting the image to text or saving an image as a bookmark.

• Omitting the alt attribute indicates the image is a key part of the document, but no textual information is available.

  However, setting alt="" will indicate that it is not a key part of the document. This is useful for tracking pixels or other images that should not be included for screen readers. alt="" will also stop visual browsers from displaying a broken link if the image fails to load for any reason. The general rule when writing alternative text is that if you replace every image with the text of its alt attribute on the page, its meaning must not change.

• The alt attribute should not contain text that could be the image’s caption, title, or legend. These include information that supplements the image. The alt attribute should be text that can replace the image.

• If you wish to provide supplemental information you can use the title attribute.

• The alt attribute should not repeat information already provided in any text next to the image.

Values

Values can include:

• Textual content that may be used instead of the image.

Examples

In the following example, the alt attribute’s value indicates the contents of the image.

<img
  width="800"
  height="450"
  src="https://res.cloudinary.com/thewebmaster/image/upload/image/moon-earth.png"
  alt="Moon and Earth"
/>

HTML <input> alt Attribute

The <input> element is a field used in HTML Forms enabling the user input data.

The <input> element can use an image to represent a submit button by setting the type attribute to image.

The alt attribute, when used with <input type="image">, represents the button image and is used for screen readers or as a text replacement should the image not load for any reason.

Syntax

<input type="image" src="submit.png" alt="Submit" width="150" height="50">

Usage

• The alt attribute is valid only for <input type="image">, which is used to display an image button on forms.
• The alt attribute is required.
• It should contain a non-empty string giving a label that would be appropriate should the image not be displayed.
• It works in the same way an alt attribute works on <img> elements.
• The alt attribute should not contain text that could be the image’s caption, title, or legend. These include information that supplements the image. The alt attribute should be text that can replace the image.
• If you wish to provide supplemental information you can use the title attribute.

Values

Values can include:

• Descriptive text that describes the content of the image.

Examples

The example below shows a graphical login button.

<label for="name">image:</label>
<input
  type="image"
  id="name"
  name="name"
  src="https://www.freeiconspng.com/uploads/login-button-png-13.png"
  alt="login button"
  height="16"
/>

Specification

The alt HTML specification for each of the following elements is below:

• <area>

  • HTML Living Standard Specification

• <img>

  • HTML Living Standard Specification

• <input>

  • HTML Living Standard Specification

Browser Support

The alt attribute has the following browser support for each element:

Desktop

Mobile