Images play an important role in digital content, but without proper description, they can create barriers for people who use screen readers, visual impairments, and more. Image Descriptions and Alternative text (alt text) provides a text-based equivalent for images, ensuring that essential information, meaning, and functionality are available to all users.
“Alt text” provides a concise, programmatically associated description of an image that is not displayed on the page but can be accessed by assistive technologies such as screen readers. Alt text is one of many methods to include an image description. More robust or lengthy descriptions might be included as part of the image caption or below the image itself. Depending on the purpose of the image—whether informative, functional, or complex—the image description should be tailored to provide the right level of detail based on role and context.
Expectations
Image descriptions must be included for any non-decorative image. The image description must include enough information to fully convey the image’s purpose.
Every image description must have a programmatic relationship with the image itself. The easiest way to do this is to provide alt text for all non-decorative images. If alt text is used as the image description, it should be short. If a long description is needed and provided elsewhere, for example below the image, the alt text must refer to this full description in this situation. For example, such alt text may say “Line graph of this fiscal year’s earning. Full description directly below the image.”
Niche exceptions to text alternatives exist. For example, if an image is used as part of a test and a full image description would give away the answer, the text alternative is only required to identify the image broadly/generally without providing a full equivalent text alternative. A full list of these exceptions can be found in W3C’s WCAG documentation: WCAG 2.1 SC 1.1.1 Non-text Content.
Why are image descriptions and alt text important?
Image description and alt text provide meaningful descriptions of an image, ensuring that users who cannot view it still receive the same information. Individuals who benefit from image description and alt text include those with visual disabilities who rely on screen readers, as well as users with limited or metered internet connections who may disable images to save bandwidth. Additionally in-text image descriptions may help text-based learners who struggle learning visually.
Image description and alt text impact:
- People with Visual Disabilities: For individuals who are blind or have low vision, alt text is read aloud by assistive technologies like screen readers (e.g., Microsoft Narrator, JAWS) to convey the image's meaning and context.
- Users with Technical Issues: Sighted users benefit when images don't load due to slow internet connections, errors in the image source, or broken images, as the alt text provides the missing information.
- Comprehension: Image descriptions impact comprehension, especially for complex or abstract images. For all users, descriptive text can provide context, clarify meaning, and reinforce learning. For people with visual impairments, a good image description is crucial for accessing visual content and achieving an equivalent understanding.
- Search Engine Optimization (SEO): Search engines like Google use alt text along with computer vision to understand the subject matter of an image, helping to improve search rankings and discoverability.
How to Implement
Providing alternative text involves two key steps:
- writing a meaningful description of the image, and
- adding that description to the image as alt text or nearby image description.
How To: Write a Good Image Description:
To write an effective image description, aim for three goals: be concise, be complete, and consider context.
- Concise: Focus only on what’s essential to understanding the image.
- Complete: Describe important visual information as completely as possible.
- Contextual: Describe the image based on its purpose in the content, not just what it looks like.
For a detailed example of writing an effective image description, please view "How to Write Good Image Descriptions".
Quick Tips:
- Keep alt text short while still conveying meaning (usually under 125 characters). If more content is needed to provide the equivalent purpose, place it close to the image and refer to its location in the alt text.
- Consider key elements of why you chose this image, instead of describing every little detail.
- No need to say “image of” or “picture of.”
- Do say if it’s a logo, illustration, painting, or cartoon.
- Don’t duplicate text that’s adjacent in the document or website.
- End the alt text sentence with a period.
How to: Adding Alt Text to an Image
The process for adding an image description as alt text varies by platform. Use the instructions below, organized by platform, to apply alt text to your images.
Coming soon: applying alt text directions for Facebook, Instagram, QuesitonPro, Qualtrics
To add Alt-Text to an image in Cascade, use the following steps:
- In a WYSIWYG, press the "Edit/Insert Image" button.
- Navigate to your desired image and insert per usual.
- In the "Insert/edit image" dialogue box, enter the desired Alt Text in the "Image description" field.
- If the image is purely decorative and provides meaningful information to the page, you may instead check the "This is a decorative image, no description needed" checkbox.
- If the image is purely decorative and provides meaningful information to the page, you may instead check the "This is a decorative image, no description needed" checkbox.
- Click "Ok" to apply the changes.
- To add or change Alt Text for an image that has already been inserted, right click on the image and then click on the "Image" button on the resulting dropdown. This will bring up the "Insert/edit image" dialogue box.
To add Alt-Text to an image in Canvas, use the following steps:
- In an editable region such as a page or a quiz, use the click on the “embed image” button to bring up the “Insert/Edit Image” dialogue box.
- Navigate to or upload your image as usual using the “URL,” “Canvas,” or “Flikr” tabs directly under the “Image Source” heading.
- Insert your description in the “Alt text” field directly below the “Attributes” heading. If the image is purely aesthetic and provides no information to the page, rather than inputting an image description mark the “Decorative Image” checkbox.
- Click "Update" to complete.
- To add alt text to an existing image, select the image and click the “embed image” button. This will bring up the “Insert/Edit Image” dialogue box with the “Alt text” form field and “Decorative Image” checkbox.
The procedure for applying Alt-Text varies slightly depending on what version of Word you are working with. As of Word 2016, the procedure is as follows:
- Insert an image into your Word document.
- Right click the image and from the dropdown menu, click “Format Picture…” This will open the “Format Picture” options pane on the right-hand side of the window.
- Click the “Layout & Properties” icon in the Format Picture pane.
- In the Alt-Text dropdown, input your image description into the “Description” field. We recommend using only the Description field and leaving the “Title” field blank.
The procedure for applying Alt-Text varies slightly depending on what version of PowerPoint you are working with. As of PowerPoint 2016, the procedure is as follows:
- Insert an image into your Powerpoint Slide.
- Right click the image and from the dropdown menu, click “Format Picture…” This will open the “Format Picture” options pane on the right-hand side of the window.
- Click the “Layout & Properties” icon in the Format Picture pane.
- In the Alt-Text dropdown, input your image description into the “Description” field. We recommend using only the Description field and leaving the “Title” field blank.
To add Alt-Text to an image in HTML, use the following steps:
- In the img tag, add the alt attribute.
- Within the quotation marks, add your image description, for example:
<img alt="JMU Duke Dog mascot posing in front of Wilson Hall"> - For images that are purely decorative in nature, be sure to include a null alt attribute as follows:
<img alt="">
Examples of Best Practice:
Best practices for alt text and image descriptions depend on the purpose of the image. The following examples illustrate how to provide effective descriptions for different types of images.
Informative images are visuals that convey essential information that is not already provided in the surrounding text. Their purpose is to support or enhance understanding, such as a map showing directions or a photo illustrating a concept.
The image description must provide concise, meaningful alternative text (alt attribute) that conveys the image’s content or meaning.
Example: This image below was used in an article decribing the refreshed and expanded anatomy room that will be opening soon in Carrier Library. The alt text of this image is, "Two students examining a skeleton model in the Anatomy Room in Rose Library."
Functional images are visuals that serve as interactive elements, such as buttons, links, or icons. Their purpose is to trigger an action rather than simply convey information—for example, a magnifying glass icon that opens a search function or a printer icon that initiates printing.
The alt text must describe the function of the image, not the visual (e.g., “Search” for a magnifying glass icon). When linked, the alt text should identify/describe the destination of the link.
Example: An image used to help users return to the top of a webpage should have the alt text "Back to Top", which indicates the function that the image serves (ie. returning back to the top).
Complex images are visuals that present detailed information that cannot be fully conveyed in short alt text. Examples include graphs, charts, diagrams, maps, or infographics. Because they communicate relationships, patterns, or multiple data points, these images usually require a longer description beyond basic alt text.
Because the level of detail in complex images is often too much to capture in alt text alone, it’s best to provide a full description in nearby text, a long description, or an accessible data table. The alt text should briefly identify the image and direct users to where the complete description can be found.
Images of text are visuals that display written content as part of an image rather than as selectable or readable text. Because screen readers and other assistive technologies cannot interpret text embedded in images, all meaningful text should be provided in a text-based format whenever possible.
If an image of text must be used, the same content should be conveyed through alt text or in nearby text so that users who rely on assistive technologies can access the information. Additionally, pay careful attention to color contrast of the text in the image. Learn more about color contrast.
Example 1: Providing the same visible content as alt text
In the example below, three images are used to convey important text content about different login options. The alt text for each image is the visible text. (ie. the alt text for the first image is "Go to your Student Center in the student tab, then click on "M3 - My Student Account").
Example 2: Providing a text alternative nearby
In this example, a slideshow image with text has a text alternative provided nearby as plain text. If the image cannot be viewed, the same text provided beneath the slideshow image will be available.
Decorative images are visuals that serve a purely aesthetic purpose and do not convey meaningful information or support the content. Because they do not add informational value, decorative images should be identified as decorative so that assistive technologies can ignore them (e.g. using a null value for alt - alt=" ").
Example: The image at the top of this webpage serves no purpose other than visual decoration is marked as decorative. NOTE: It provides no informational value or additional context to the content.
WCAG Success Criteria
Meeting all of the above requirements (must statements) ensures that images are in compliance with WCAG 2.1 (AA) as they relate to the following:
Further, meeting all of the above recommendations (should statements) ensures that images are aligned with best practices as they relate to the following: