Using Accessible Images and Graphics

Images can enhance a user’s comprehension of content, especially those with learning disabilities. But the extensive use of inaccessible images, such as images with text or specific combinations of color, can be a barrier for many site visitors. Providing alternative (alt) text is only one step in ensuring your images are accessible to all users.

• Provide useful alt text descriptions
  
  • When writing your alt text, be concise and consider the purpose your image plays in the context of your content.
    
  • If an image is purely decorative, enter a space in the alt text field to mark it null.
    
• Avoid using images with text
  
  • Screen readers are not able to read text displayed within an image.
    
  • Images with text are difficult to read on smaller screens and can appear pixelated when magnified.
    
  • Remove instances of images with text being used as promos or section headings — always use rich text formatting for your headings.
    
• Review your infographics
  
  • Infographics must include a full text description, located in the main body of your page or within an Expandable component.
    
  • Some colors are inaccessible to users with color blindness, so do not rely on color alone to convey messages in graphics.

Further reading

• Creating accessible video
• Page headings, text, and links