Foundational Knowledge
Introduction
Images play a crucial role in enhancing web content, serving both functional and aesthetic purposes that enhance user experience, communicate information effectively, and support learning. However, the visual nature of images presents significant accessibility challenges for users with disabilities, particularly those who are blind or have low vision, as well as individuals using assistive technologies like screen readers. Creating accessible image content requires understanding how to properly implement alternative text, choose appropriate image formats, and consider the broader context in which images appear. This micro-development explores the fundamental principles of image accessibility, examining both the technical requirements mandated by web accessibility guidelines and the practical strategies for ensuring that visual content remains meaningful and usable for all users, regardless of their abilities or the technologies they employ to access web content.
Role of Images
Using images in web content can be highly beneficial when done thoughtfully. Images often make information easier to understand, break up large blocks of text, and engage readers by providing visual interest. They can also illustrate concepts that are difficult to explain through words alone, such as data visualizations, step-by-step processes, or real-world examples.
However, the decision to use images should be intentional. Not all content benefits from visuals, and unnecessary images can distract users or increase cognitive load. For individuals relying on assistive technologies, an image without a clear purpose or proper accessibility features, such as alternative text, can create barriers rather than support understanding.
The key is to use images when they add value to the content and to ensure they are accessible to all users. When images are thoughtfully chosen, appropriately described, and placed with care, they enhance the learning experience and make digital content more inclusive and effective.
Deciding Whether to Use an Image
Here is a quick checklist when deciding whether or not to use an image:
- Purpose
- Does the image add meaning, clarify a concept, or provide information not easily conveyed through text?
- Is it essential for understanding the content, or is it purely decorative?
- Audience
- Will the image help users with different learning preferences or abilities engage with the content?
- Could it create barriers for users relying on assistive technologies if not properly described?
- Accessibility
- Can you provide accurate and meaningful alternative text (alt text) or descriptions for the image?
- Is the image compatible with accessibility guidelines from WCAG?
- Relevance
- Does the image directly support the message or purpose of the page?
- Will it reduce cognitive load rather than add unnecessary complexity?
- Quality and Design
- Is the image clear, appropriately sized, and optimized for different devices?
- Does it maintain visual consistency with other elements on the page?
Decision:
- ✅ Use the image if it is purposeful, relevant, and can be made accessible.
- ❌ Avoid the image if it is decorative without context, confusing, or difficult to make accessible.
Animated Images
Animated images, such as GIFs, looping videos, or interactive graphics, can bring energy and visual interest to web content. They can demonstrate processes, highlight key ideas, or capture attention in ways static images cannot. When used thoughtfully, animations can enhance understanding by breaking down complex concepts into smaller, visual steps.
However, animated images also come with accessibility considerations and potential drawbacks. Rapid flashing or high-contrast movements can trigger seizures in individuals with photosensitive epilepsy, while constant motion may distract or overwhelm users with attention-related or cognitive disabilities. Animations that loop indefinitely can interfere with screen readers or prevent users from focusing on surrounding content.
To ensure accessibility, animations should:
- Avoid flashing content that exceeds recommended thresholds (e.g., more than three flashes per second).
- Provide controls so users can pause, stop, or hide the animation.
- Limit looping to a reasonable duration or allow the user to replay on demand.
- Include alternative descriptions for users who cannot perceive or interact with the animation.
When used sparingly and designed with accessibility in mind, animated images can enhance user experience without creating unnecessary barriers.
Design Considerations
The three main purposes of images are generally:
- Informational – Images that convey information or clarify meaning, such as diagrams, charts, or instructional visuals. They support understanding by presenting data or processes visually.
- Functional – Images used as interactive elements, like buttons, links, or icons, that help users navigate or perform actions.
- Decorative – Images used purely for visual appeal or branding without adding essential meaning to the content. These should be marked as decorative so they don’t distract users of assistive technologies.
When choosing images, keep the following in mind:
- Clarity and Simplicity
- Choose images that are easy to interpret and avoid unnecessary visual complexity.
- Limit the use of text embedded within images; use real text whenever possible for better accessibility.
- If text must be part of an image (e.g., for branding), ensure it has high contrast, uses clear fonts, and is large enough to read across devices.
- Color and Contrast
- Ensure adequate contrast between text and background in images.
- Avoid relying solely on color to convey meaning (e.g., red for “stop”).
- Backgrounds
- Use simple, uncluttered backgrounds so the main subject remains clear and readable.
- Ensure sufficient contrast between any text overlay and the background image.
- Avoid overly bright or patterned backgrounds that can reduce legibility or cause distraction.
- Texture and Visual Effects
- Limit heavy textures or filters that make images visually busy or hard to interpret.
- Ensure textures don’t interfere with text overlays or important visual details.
- Consider users with visual processing difficulties; subtle, consistent textures are easier to process than busy or high-contrast ones.
- Cultural and Contextual Sensitivity
- Select images that are inclusive and culturally appropriate.
- Avoid stereotypes or visuals that could be misinterpreted by diverse audiences.
- Testing Images
- Test images with real users, including those who rely on assistive technologies, to ensure they’re meaningful and accessible.
- Use accessibility checkers and browser tools to verify color contrast and alternative text.
- View images on multiple devices and screen sizes to confirm responsiveness and clarity.
Alternative Text (alt text)
Alternative text, commonly known as alt text, is a short written description of an image that conveys its meaning or purpose for users who cannot see it. Screen readers read the alt text aloud, allowing people with visual impairments or other disabilities to understand the image’s content. Alt text also appears in place of images when they fail to load, supporting both accessibility and usability.
Why Alt Text Is Important
- Accessibility: Provides equal access to information for people using assistive technologies.
- Search Engine Optimization (SEO) Benefits: Search engines use alt text to index images, improving site visibility.
- Usability: Helps users with slow connections or text-only browsers understand image content.
Best Practices for Writing Alt Text
- Be Concise and Descriptive:
- Describe only what’s necessary to understand the image in its context. Generally, keep alt text under approximately 125 characters; otherwise, screen readers may shorten it.
- Example: “Bar chart showing sales growth from 2020 to 2023.”
- Reflect the Purpose:
- If the image is functional (e.g., a button or link), describe the action it performs.
- Example: “Search button” instead of “Magnifying glass icon.”
- Avoid Redundancy:
- Don’t repeat information already provided in nearby text.
- Skip Decorative Images:
- Mark purely decorative images as decorative so screen readers skip them.
- Complex Images:
- For charts, infographics, or diagrams, provide a brief alt text and link to a longer text description if needed.
Remember, the main goal of alt text is to convey the same information or function that the image provides to sighted users. If you’re unsure, think about how you would describe the image over the phone to someone who can’t see it.
Examples of Alt Text
- Informative Image: “Photo of a red apple on a wooden table.”
- Functional Image: “Submit form button.”
- Decorative Image: Marked as decorative in HTML (empty alt attribute: alt=””).
Deciding What to Say
Alt text is not a full description of an image. It is a written replacement of an image. Consider how you would say or describe an image when talking to someone on an audio call. Here are a few questions to keep in mind:
- How can you say it in a short and precise manner?
- Does it make sense to include the image? Or can you do without it?
- Is it redundant to the surrounding text?
Generative Artificial Intelligence (GenAI) tools can analyze images and suggest descriptive alt text automatically, saving time for content creators. These tools can provide a first draft of the description by identifying objects, text, and context within the image. While AI can speed up the process, human review is essential to ensure accuracy, appropriateness, and alignment with the image’s purpose. Combining AI-generated suggestions with human oversight helps maintain accessibility standards and ensures descriptions are meaningful for all users. Arizona State University (ASU) EdPlus has created an Image Accessibility Creator. This tool can aid you in generating alt text. Remember, just like with any other tool, make sure you review it for accuracy and alignment with your image.
Long Description
While most images only require short alt text, some visuals, such as complex charts, infographics, maps, or detailed diagrams, convey information that cannot be fully described in a single sentence. In these cases, a long description provides the necessary detail to ensure all users, including those using screen readers, can access the full meaning of the image.
When to Use a Long Description
- Data-heavy images: Charts, graphs, or tables with multiple data points.
- Process diagrams: Flowcharts or decision trees.
- Maps: Especially those with multiple labeled points or regions.
- Infographics: Containing text, numbers, and layered information.
How to Provide a Long Description
- Within the page: Place a detailed description directly in the text near the image, labeled clearly (e.g., “Figure 1 description”).
- On a separate page: Link to a dedicated page with the full description using a phrase like “View full description.”
Best Practices
- Keep the alt text brief (e.g., “Bar chart of sales growth; full description follows”).
- Provide all essential information from the image, including data labels, trends, and key takeaways.
- Organize the long description with headings or lists for clarity.
Example
- Alt text: “Line chart of monthly sales, detailed description below.”
- Long description:
The chart shows monthly sales for 2023. Sales start at $10,000 in January, rise steadily to $25,000 in June, peak at $40,000 in September, then decline to $30,000 in December.
Just like with alt text, GenAI can analyze complex images such as charts, maps, or infographics and automatically generate draft long descriptions that summarize key details like labels, data trends, or relationships between elements. This can save significant time for content creators, especially when working with data-heavy visuals. Remember to double-check and edit the output! ASU’s Image Accessibility Creator can also generate long descriptions.
For Science, Technology, Engineering, and Math (STEM) images, check out the Guidelines for describing STEM images. Pay special attention to their Table of Contents; it has links to best practices for several types of images, including bar charts, line graphs, Venn diagrams, scatter plots, pie charts, flowcharts, standard diagrams or illustrations, and complex diagrams or illustrations.
Summary
Alt text provides a short, meaningful description of an image so users with visual impairments or those using screen readers can understand its purpose and content. It should be concise, context-specific, and omitted for purely decorative images. For complex visuals, such as charts, maps, or infographics, a longer description may be necessary to fully convey detailed information. Long descriptions can appear on the same page or be linked separately, offering structured explanations of data, trends, or relationships within the image. Together, alt text and long descriptions ensure images are accessible, informative, and inclusive for all users.
Resources
(2006). WebAIM: Alternative Text.