Creating accessible assets: Images and icons

Making your website accessible means ensuring that all visitors, including those with visual impairments, can fully experience your content. This article explains how to use images and icons in a way that meets accessibility standards by adding alternative text, using meaningful visuals, and avoiding common pitfalls. Follow these best practices to create inclusive, user-friendly assets for your website or landing page.

Requirements

• All images and information-bearing icons should have an alternative text provided to describe the content of the image or icon
  • Alt text should not include words that identify the element as a graphic or image (e.g., avoid phrases like “graphic of,” or “image of,” etc.) because screen readers already state the role (e.g., by saying “graphic” and then reading the alternative text).
  • Avoid using all caps, as some screen readers will read each letter
  • Required for:
    • images using <img>
    • active images
    • form input images
    • SVG using <img>
    • SVG using <SVG>
    • HTML5 canvas
    • icon fonts
• Alt text descriptions should bring context for the user and must be meaningful
  • The image/icon links should describe the link destination.
  • The image/icon of button/control links should describe the button or control’s purpose and/or resulting action.
  • The length of the alternative text for informative images/icons should be concise (no more than 250 characters)
• Alt text should be localized according to the language used on a page.
• Don’t use text in images if you can use real text instead unless it’s essential (like a logo) or you need specific fonts, sizes, colors, or backgrounds.
• If it is required to use the image of text, follow guidelines for color and contrast. 
• If a background image has useful information, alt text must be added (e.g., via regular visible text, by adding role="image" and aria-label, or by other means). 
• If there is text over an image, test the contrast of the overlaying text with at least 8 colors from the image.
• Provide controls (pause buttons, arrows) for content that starts automatically like: carousels, image sliders, and background videos.
• Don’t make carousels play automatically.
• Don’t use ghost buttons over images (buttons with no background or outline).
• No content should flashes more than three times per second. 
• Graphical objects like a standalone icon, a graph, or an image have a minimum contrast of 3:1 between the item and its background. 
• Icons used across multiple pages must share the same meaning and functionality.
• If we use a specific icon to initiate an action (e.g., a down arrow for dropdowns or accordion/expand), we don’t use one decoratively on another page.

Exceptions

Decorative or redundant images or icons

When images serve no content purpose, are purely decorative, or duplicate information already conveyed in a text, it is recommended to assign them null (empty) alternative text (alt="), designate them with ARIA role="presentation", or implement them as CSS backgrounds.

Decorative or redundant background images

Don’t give alt text for background images that aren’t important and do not bear information for the user. 

Examples

	DO: Text in alt provides context and information: “mature woman working on laptop, wearing office outfit and smiling, standing over white background”. DON’T: A description is not specific enough: “mature woman”.
	Icon is information bearing and important for user. Text in alt: “facebook icon”, “Instagram icon”, “Pinterest icon”.
	On the page, there are six descriptions with an illustrative icon. Those images are decorative images. We set this by adding an empty alt attribute: <img src="filename.png" alt="">. Assistive technologies, like a screen reader, will then ignore the image. Without the empty alt attribute, a screen reader may read the file name, which makes no sense and confuses the user.
	In this example, the logo serves two purposes: to tell users which site the user is on and to provide a link back to the front page. DO: Describe the image and its role, e.g. using aria-label-"GetResponse homepage".