Provide accessible images

Images can be effective way to convey meaning, such as to provide additional information to text content or to assign labels to buttons. Text alternatives are vital for people who can’t see them. When icons are added as images, the best practice is the same as for providing alternative text for images. When other methods are used, such as background images or icon fonts, additional care is needed to ensure that their meanings are available to screen reader users, people with reading difficulties, and those who use Windows High Contrast Mode or who need to apply a user-defined style sheet that changes fonts.

  • Provide appropriate text alternatives for images. See Content Creators: Describe the content of images for best practices for writing text alternatives.
  • Make sure icon fonts have accessible text alternatives. Reliable ways for providing accessible text alternatives vary depending on how the icon is provided. Preferably, use icon fonts, because icons should still be displayed in Windows High Contrast Mode. Provide a text equivalent for the icon as text in HTML, and use CSS to hide the text equivalent visually while making that text available to screen readers. Use a font-detection script to check whether a user-defined stylesheet is being applied, and if so, dynamically update the CSS to display the text alternative.

Testing

When an image is being used for labeling a control (such as a button) or for providing information (such as a logo):

  • If it is provided as an image, does it contain a meaningful text alternative?
  • If it is provided using an icon font or a CSS background image, is there a text alternative that’s read by a screen reader and is displayed when a user-defined style sheet changes fonts?

Resources

✎ Technique: Icon fonts

Icon fonts are a popular and effective method for providing scalable symbols that can be used to label controls and provide graphical information. The information provided by icons also needs to be available to people who can’t see them.

Examples

Good example

In this example, the convention of a house shape is used to denote a link to the site’s home page.

  <a href="#" class="icon-home"> <span class="visually-hidden">home</span></a>

We need to make sure this information is also available to screen-reader users. The visually-hidden class is used to hide the text “home” from sighted users but make it available to screen readers. Screen readers will therefore read “link home.” The CSS to achieve this is:


.visually-hidden {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}

Bad example

If we used display: none to hide the “home” text visually, it would also become hidden from screen readers, so those users would have no description for the link.


.visually-hidden {
  display: none; /* don't use this */
}

Good example

In this example, we use a different method to provide an accessible label for the link: the aria-label attribute.


<a href="#" class="icon-home" aria-label="home"></a>

Note that if the icon was placed inside the link (rather than added as pseudo-content), the aria-label value would helpfully override that character.

Video demonstration

Code editor

A code editor is available to explore and test three acceptable methods for employing icon fonts accessibly.

✎ Technique: Alternative text

Each image requires alternative text that is equivalent to the information it conveys, unless the image is purely decorative and provides no useful information. So you need to be careful about what value you give the alt attribute.

Examples

✗ Bad example

Omitting an alt attribute provides no information to screen-reader users.

    <img src="path/to/image.jpg">
  

✓ Good example: providing an alt attribute

Supply alternative text through the alt attribute. The alternative text should provide information equivalent to what’s conveyed in the image:

<img src="path/to/image.jpg" alt="Your alternative text.">

 

✓ “Null” example

Some images are purely decorative and have no useful information to convey non-visually. In these cases, you should use an empty or “null” alt attribute, as demonstrated below:

    <img src="path/to/image.jpg" alt="">
  

Video: Alternative text with VoiceOver and Safari

Code editor