Creating Accessible Images & Graphics
Images and graphics play an important role in communicating information, supporting learning, and making digital content more engaging. Whether you’re adding a photograph to a document, creating an infographic, designing a graphic in Canva, or sharing an image on a website or social media, accessibility should be part of the design process from the beginning. Creating accessible images and graphics involves more than making them visually appealing. Thoughtful choices about alternative text, color contrast, readability, and how information is presented help ensure that everyone, including individuals with visual disabilities or those using assistive technology, can access and understand the content.
Below are practical tips for creating accessible images and graphics, applying Universal Design for Learning (UDL), sharing visual content on websites, and finding additional resources for program-specific guidance.
Add Meaningful Alternative Text
Provide concise alternative text (alt text) that communicates the purpose or essential information of an image so people using screen readers can understand its meaning.
Identify Decorative Images
Mark images as decorative when they do not communicate meaningful information, so screen readers can skip unnecessary descriptions.
Don't Rely on Color Alone
Use labels, patterns, shapes, or text in addition to color to communicate meaning, highlight information, or distinguish elements.
Use Accessible Color & Contrast
Use sufficient color contrast, avoid busy backgrounds, and never rely on color alone to communicate important information.
Make Charts and Graphs Understandable
Use clear titles, labels, and legends, and provide accessible descriptions or data tables that communicate important information and trends.
Provide Descriptions for Complex Graphics
Include a more detailed explanation for diagrams, maps, infographics, and other complex visuals when their meaning cannot be communicated through short alternative text alone.
Keep Visual Designs Simple
Use clear layouts, readable fonts, adequate spacing, and consistent formatting to help people easily identify and understand important information.
Use Images with Purpose
Choose images that support the message or learning goal rather than distract from or compete with important information.
Use Visuals to Support Understanding
Choose images, diagrams, and graphics that help explain ideas, reinforce important information, or provide useful context.
Provide Multiple Ways to Access Information
Pair meaningful visuals with accessible text, explanations, or other formats so information is not communicated in only one way.
Reduce Visual Clutter
Keep designs simple, prioritize essential information, and remove unnecessary decorative elements that may distract from the message.
Make Connections Clear
Use labels, examples, and visual organization to help people understand relationships, processes, or important concepts.
Support Different Learning Needs
Use readable text, familiar symbols, clear illustrations, and accessible explanations to support people with different language, reading, and processing needs.
Break Down Complex Information
Divide complicated diagrams, infographics, or visual instructions into smaller, manageable sections.
Use Relevant and Inclusive Images
Select visuals that reflect diverse people, experiences, and perspectives while supporting the purpose of the content.
Provide Context
Explain why an image is included and what people should notice, learn, or understand from it.
Add Appropriate Alternative Text
Use the website's alternative text field to provide a meaningful description of informative images, and use an empty alt attribute for purely decorative images when appropriate.
Add Appropriate Alternative Text
Use the website's alternative text field to provide a meaningful description of informative images, and use an empty alt attribute for purely decorative images when appropriate.
Include Essential Information as Webpage Text
When sharing flyers, announcements, infographics, or graphics containing important details, include that information as accessible text on the webpage rather than relying on the image alone.
Make Complex Visuals Accessible
For charts, diagrams, maps, and infographics, provide a nearby explanation or accessible data table when short alternative text cannot communicate the full meaning.
Check Image Quality and Responsiveness
Make sure images remain clear and understandable on different screen sizes and when magnified, without cutting off important information.
Avoid Text Embedded in Images
Use actual webpage text whenever possible instead of images containing text, allowing visitors to resize, translate, select, and access information using assistive technology.
General Resources
These resources provide practical guidance for creating accessible social media posts, graphics, videos, and other digital content.
- W3C – Images Tutorial
- W3C – Alt Decision Tree
- W3C – Use of Color
- WebAIM – Alternative Text
- WebAIM – Contrast Checker
Resources by Platform
Explore the resources below for platform-specific guidance, tools, and instructions to help you create accessible digital content. Accessibility features and options may vary depending on the platform, device, or application version.
- Canva
- Adobe Express
- Microsoft
