6.3. Provide alt attribute on <img /> and <input type="image" /> tags

Note

Regardless of whether an <img /> element is decorative, informative, or act as a link/button, it should in all cases have an alt. This is to ensure that screen readers do not read the source file name (i.e. the content of the src attribute).

Decorative/ambient <img />

When a decorative or ambient <img /> element is included in the HTML code, the alt attribute must remain empty (without any space between the quotation marks of alt="").

In the HTML example below, the <img /> element simply enhances “Error messages” (which is explicit by nature):

<h2>
   <img src="error.png" alt="" />
   Error messages
</h2>

Informative <img /> elements

When an informative <img /> element is used in the HTML code, populate its alt attribute with the information conveyed by the image.

The image above refers to the time and distance to reach a destination by walking. The code should be:

<p>
  <img src="walk.png" alt="By walking: " />
  <span>2 min</span>
  <span>111 m</span>
</p>

Note

If the <img /> elements is used to display an informative image in SVG format, add a role="img" attribute inline to ensure good compatibility with mobile assistive technologies:

<p>
  <img role="img" src="walk.svg" alt="By walking: " />
  <span>2 min</span>
  <span>111 m</span>
</p>

Warning

Do not start alternative text with alt="Image of […]". This information is already provided by the assistive technology when it encounters the <img /> element.

Unabeled <img /> links or buttons

When an <img /> element acting as link or bottom is included alone (without a label) in the HTML code, add the information needed to make it explicit into the alt attribute.

In the HTML example below, the <img /> element points to the home page:

<a href="/">
   <img src="home.png" alt="Home" />
</a>

Warning

Do not start the alt text with alt="Link to […]" or alt="Button […]" when the <img /> element is acting as a link or button. This information is already provided to the assistive technology by the <a> or <button> elements.

<input type="image" />

When <input type="image" /> is included in the HTML code, add the information needed to make it explicit into its alt attribute.

In the HTML example below, the <input type="image" /> launches a search within the website:

<input type="image" src="magnifier.png" alt="Search site"  />

Warning

Do not start the alt attribute with alt="Button […]" when the <input type="image" /> element is acting as a link or button. This information is already provided to the assistive technology by the <input type="image" /> elements.

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top