Images
Images are more than just decorative elements; they convey information, meaning, and context. In this chapter, you’ll learn how to make images accessible to all users, including those who rely on screen readers or cannot see images clearly. We’ll cover techniques for writing meaningful alt text, handling decorative images, and ensuring that visual content enhances understanding rather than creating barriers.
)
Want to learn more about AudioEye?
Share Course
What Makes an Image Accessible?
The core concept of accessible images is to provide meaningful text alternatives for images that convey important information. The purpose is to ensure that the information presented visually in an image is also available to users who cannot see the image, such as those using screen readers. This includes charts, graphs, and images that contain text.
How Do Images Impact Accessibility?
Accessible images are essential for ensuring that everyone, regardless of their abilities, can effectively use digital content and tools.
For people with visual disabilities, text alternatives (like alt text) allow assistive technologies, such as screen readers, to interpret and convey the content of an image. Without appropriate text alternatives, crucial information presented in images would be inaccessible.
Furthermore, not relying solely on color to convey meaning is vital for users with visual disabilities or color blindness, as they may not perceive color differences.
What are accessible images, and why do they matter?
Hint: Think about someone who uses a screen reader or is completely blind. How would they interact with an image?
What WCAG Success Criteria are Relevant for Images?
The Web Content Accessibility Guidelines (WCAG) provide international standards for creating accessible digital content. Key WCAG success criteria relevant to images include:
• WCAG Success Criterion 1.1.1 Non-text Content: This criterion mandates that all non-text content must have a text alternative that serves the equivalent purpose. This directly applies to images that convey information.
• WCAG Success Criterion 1.4.1 Use of Color: This criterion states that information conveyed by color must also be available without color. This means that if color is used to indicate meaning (e.g., in a chart), there must be another way to discern that meaning that does not rely on color alone.
According to WCAG, what should be done with images that are purely decorative and do not convey any information?
Hint: How would you tell a screen reader that an image is not important?
Which WCAG success criterion states that information conveyed by color must also be available without color?
Hint: Which one of these applies specifically to color?
How Do I Maximize Accessibility When I Code Images?
Making images accessible isn’t just about adding alt text; it’s ensuring every user can access the information and meaning behind your visuals. Below are a few ways to enhance image accessibility during the development process:
Provide Meaningful Text Alternatives (Alt Text)
For images that convey important information, add descriptive text to the alt attribute. This text should describe the image's content and purpose.
Remember, the goal is to communicate the purpose of the image, not just its appearance.
Example: For an image of a “Buy Now” button, write alt=“Buy Now” rather than alt=“Blue button with text.”
Avoid Text in Images
Wherever possible, use real HTML text instead of putting words inside an image. If text must be part of an image, ensure that important text is also included in the alt attribute or is provided nearby in the content. Because screen readers can’t read text that’s baked into an image, this practice ensures users don’t miss out on valuable context.
Handle Decorative Images
For images that are purely decorative (e.g., like a background flourish or spacer) and do not convey any meaningful information, use an empty alt attribute (alt=""). This signals to screen readers to ignore the image and reduces noise.
Charts and Graphs
For complex visual information like charts and graphs, provide comprehensive text descriptions or data tables that convey the same information as the visual representation. For example:
Add a concise summary in the alt text.
Provide a longer text description nearby on the page.
Include a data table if possible, so users can review the numbers themselves.
Do Not Rely Solely on Color
When conveying information, color cannot be the only indication of different meanings. For example, avoid using red to denote an error or green for success without additional explanation. Always provide an additional visual cue or text alternative so users with color vision deficiencies can still understand the message.
Why should you avoid putting text inside images wherever possible?
Hint: Think about assistive technology users. How would they access words that are part of an image.
What is the correct alt attribute value for a purely decorative image?
Hint: You want screen readers to skip decorative images entirely to avoid distracting or confusing users.
Which of these is the best way to make a chart or graph accessible?
Hint: Accessibility means giving users equal access to the information, not just the visual.
What is the primary purpose of providing text alternatives for images?
Hint: What would non-sighted users need to know to get the same information contained in an image as everyone else?
How Do I Test the Accessibility of Images?
To ensure images are accessible, consider the following testing methods:
Screen Reader Testing
Activate a screen reader (e.g., VoiceOver on Mac or NVDA on Windows).
Navigate through the page, specifically testing how meaningful images are announced. Listen for the alt text to ensure it accurately and sufficiently describes the image's content and purpose.
Verify that decorative or meaningless graphics are skipped by the screen reader, confirming they have empty alt attributes.
Visual Inspection for Color
Manually review content to ensure that information conveyed by color is also available without color (e.g., through text labels, patterns, or other visual indicators).
How Can I Learn More About Accessible Images?
Incorporate screen readers (such as VoiceOver or NVDA) into your regular workflow to deepen your understanding and implementation of accessibility. This hands-on practice helps bridge the gap between understanding guidelines and effectively implementing them.
If you are new to accessibility, start by focusing on meeting all guidelines for a single type of element, like images, before moving on to more complex components.
Keep Learning
Move to the next chapter: Color Contrast.
)
)