Text alternative for images

In a nutshell ...

Every image must ...

• ... have a text equivalent that serves the same purpose,
  if it conveys information or a functionality.

• ... or be silenced,
  if it doesn't convey any information,
  or if the information it conveys is always available in text.

This is so that ...

• People who use screen readers can perceive information conveyed via images.
• People who use speech input software can trigger buttons and links that include icons.

On this page:

• 1. Images that convey information
• 2. Images that convey functionality
• 3. Images that are purely decorative or redundant
• 4. Complex images
• 😅 Common mistakes
• More info

• Does the image convey any information?
  → The text alternative should convey the same information as the image.

• It's not about describing what's on the image:
  It's about serving the same purpose as the image (conveying the same information).

  A picture can seek to convey different information in different contexts.

Example

On a page promoting a holiday resort, the purpose of this picture might be to convey that the resort is family friendly.

• Does the image describe what a button or a link is going to do?
  → The text alternative should describe the action that will be performed.

• It's not about describing what's on the image:
  It's about serving the same purpose as the image: indicating what action will be triggered, or where users will be taken to.

• If the button or link also has text label, see Images that are purely decorative or redundant below.

Example

• The image does not convey any information?
  Or it conveys information that's already conveyed in text?
  → It should be silenced using alt='', or be a CSS background-image.

• This is so that screen readers and speech-input software ignore it.

Example

If a button's name is already included in text, the icon shouldn't be read out by screen readers.

Search

    
    
        
        Search
    

        

• Does the communicate complex information (like an infographics, a chart or a diagram)?
  → The same information should be available in text or as a table within the same page.

1. An img element with no alt attribute

   • If an image doesn't have an alt attribute (or role= 'presentation' or 'none'), then screen readers will read the filename.

   • Always give img elements an alt attribute.

     role= 'presentation' or 'none' achieve the same outcome. But it's better not to use ARIA attributes when the same outcome can be achieved with just HTML.

   Example

   With the code below, screen readers would read out the image like this:
   "search underscore icon underscore jeo87668 underscore medium underscore 2x.png Search, button".

   
   
       
       
           
           Search
       
   
                       

2. Text alternative that does not serve the same purpose as the image

   Example 1

   The purpose of this magnifying glass icon is to convey a 'Search' functionality. So its alternative text should be 'Search', not 'Magnifying glass'.

   

   Example 2

   This alt text describes what's on the image, but doesn't serve the same purpose as the image.

   

3. Text alternative that includes redundant words like 'image', 'icon', 'button' or 'select this to ...'

   • The type of the element (such as image or button) should not be included in the text alternative.
     

     An element's type is programmatically determined (based on the HTML element's tag name or `role` attribute) and announced by the screen reader.

   Example 1

   The alt text should not include 'button'.
   This would be read out by screen readers as "Play button, button".

   

   Example 2

   This would be read out by screen readers as "Picture of a happy family, image".

   

4. Using CSS background-image for images that are not purely decorative or redundant

   • Do not use a CSS `background-image` for images that convey purpose or information not already available in text.
     

   • CSS background images are not available to assistive technologies.

   • CSS background images may only used for:

     • decorative images
     • images that communicate information or functionality that's also described in text.

5. Text alternative that is too verbose

   • Try to be succinct (50 characters max).

   • Verbose alternatives make content harder to listen to and understand for screen reader users.