Images

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.
• Because of character limits on different screen reader software, try to keep your alt text “tweet length” – e.g. around or fewer than 140 characters.
• If an image is purely decorative, enter a space in the alt text field to mark it null. To determine if the image is purely decorative, ask yourself, “Is this image important to the viewer to understand the meaning of the page?”

Avoid using images with text

• Screen readers are not able to read text displayed within or overlaid on 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 in promos and as section headers — always use rich text formatting for your headings.
• Logotypes (logos with text) are okay to use with alt text.

Review your infographics

An infographic is the visualization of information or data as a chart or diagram. Although text in images should be avoided, it is OK to use infographics, as long as you provide your users with an alternative text version below the infographic.

• Infographics must include a full text description, located in the main body of your page or within an Expandable component.
• Note in your alt text where site visitors can locate the full text description.
• Some colors are inaccessible to users with color blindness, so do not rely on color alone to convey messages in graphics.