Embedded Files
Images in digital content should include meaningful alternative text (alt text) that describes their purpose or provides essential context. Alt text allows screen reader users and those with visual impairments to understand the information conveyed in the image.
Add concise, descriptive alt text for informative images, and mark images that do not convey any information as decorative so they are skipped by assistive technologies.
Guidance to Improve Images:
Guidance to Improve Images:
Provide Alternative Text for Images
Provide Alternative Text for Images
Add concise, descriptive alternative text (alt text) for every meaningful image.
Ensure alt text conveys the purpose or context of the image, not just its appearance.
Avoid repeating information that is already in nearby text unless it adds clarity.
WCAG Alignment
1.1.1 Non-text Content (A): All non-text content must have a text alternative that serves the equivalent purpose, except when the non-text content is purely decorative.
Recommended Actions:
Utilize accessibility checkers such as YuJa Panorama in D2L or Grackle for Google files to identify images missing alt text.
Manually review course files and add alternative text where needed. Review steps for adding alt text below.
Identify Decorative Images Correctly
Identify Decorative Images Correctly
Mark images that are purely decorative (no information or functional purpose) as decorative.
Ensure screen readers skip these images so they don’t distract or confuse students.
WCAG Alignment
1.1.1 Non-text Content (A): Decorative images should be ignored by assistive technologies and do not require alt text.
Recommended Actions:
Select options to indicate decorative images such as borders, background patterns, icons from the alt text menu.
When unsure, ask: Does this image provide any information? If not, it’s decorative.
Provide Text Alternatives for Complex Images
Provide Text Alternatives for Complex Images
For charts, graphs, diagrams, and infographics, provide detailed descriptions in the text or in long descriptions linked from the image.
Ensure the alternative conveys the same meaning or data as the visual element.
WCAG Alignment
1.1.1 Non-text Content (A): Complex images must have a text alternative that communicates the information presented visually.
1.3.1 Info and Relationships (A): Relationships and meaning conveyed through images must be programmatically determinable.
Recommended Actions:
Add a short alt text such as “Pie chart of student majors” and include a longer description in the surrounding text or in a linked document.
For graphs, provide the actual data whenever possible in the alt text description.
For infographics, include a written summary of key points near the image.
Avoid Using Text in Images
Avoid Using Text in Images
Whenever possible, use actual text rather than embedding text inside images such as screenshots.
If text must appear in an image, provide the same information in nearby text or alt text.
WCAG Alignment
1.4.5 Images of Text (AA): Text in images should be used only when necessary (e.g., logos), and the same information must be provided in text form.
Recommended Actions:
Provide text based instructions that accompany screenshots.
If you must use an image with text, repeat the text in the body of the page or in the alt text.
Ensure Functional Images are Accessible
Ensure Functional Images are Accessible
Buttons, icons, or images that trigger actions must have descriptive alt text explaining their function.
Avoid generic text like “click here” without providing context.
WCAG Alignment
2.4.4 Link Purpose (In Context) (AA): The purpose of links, buttons, or controls must be clear from the link text or its context.
1.1.1 Non-text Content (A): Functional images require text alternatives describing their purpose.
Recommended Actions:
Give alt text that explains the action or purpose, such as “Search” for a magnifying glass icon.
Avoid vague labels like “button” or “click here.”
If the image is a link, the alt text should describe where the link goes to or what it does.
Adding Alternative Text
Adding Alternative Text
Add alternative text to all images that convey meaning—such as photos, charts, diagrams, or icons. An image can be marked as decorative if no meaningful information is conveyed.
In Word/PowerPoint/Excel: Right-click → Edit Alt Text
In Google Docs/Slides: Right-click → Alt text
In D2L: Right-click → Image → Alternative Description. Alt text can also be added when adding the image using Insert Stuff.
Tip: Ask yourself, “If a student can’t see this image, what do they need to know?” That’s your alt text.
Resources:
Resources:
Authoring Meaningful Alternative Text - Section508.gov
Write Helpful Alt Text to Describe Images - Harvard University
Everything you need to know to write effective alt text - Microsoft
Adding Alternative Text:
Videos:
Understanding Alternative Text - NC State IT Accessibility
Page updated
Report abuse