Using Accessible Images and Graphics
Why focus on image accessibility?
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.
Accessibility Checklist
Your goals for creating accessible 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.
- If an image is purely decorative, enter a space in the alt text field to mark it null.
- When writing your alt text, be concise and consider the purpose your image plays in the context of your content.
- 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.
- Screen readers are not able to read text displayed within an image.
- 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.
- Infographics must include a full text description, located in the main body of your page or within an Expandable component.
Further reading