Creating Accessible Images
Images are great to help convey meaning in a quick way. However, when a user cannot view an image clearly that image can become a liability to a website's overall clarity and ease of communication. Fortunately, including well-crafted alt tags can fix this, but there is a bit of an art to writing clear, concise alt tags.
How to Get Started
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 fewer than 140 characters.
- 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 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
- 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.
Infographic Example 1
Identify the image in fewer than 140 characters as alt text. For example, "The Ecological Model. Four groups are stacked as progressively smaller ovals. See longer description in expandable/body of text." In the body of the page or expandable, provide a longer description such as: "The Ecological Model. Four groups are stacked as progressively smaller ovals. Each group covers some area of the previous group. The groups, from largest to smallest, are: Societal, Community, Relationship, and Individual." Include additional description as needed.
Infographic Example 2
Include in alt text: "Bar graph. Title: Status of State Anti-Bullying/Harassment Laws 2003-2014. See expandable/body of text for long description." In the longer description, you may describe it in more detail. For example, "The x-axis is year 2003 to 2014 in increments of one year. The y-axis is number of states from 0 to 50 in increments of 5. ..."
- Are useful alt text descriptions provided?
- Are full text descriptions for infographics provided?
- Are images with text removed?
- Have images with text been replaced with appropriate rich text heading formatting, or promo components?