How to handle images in an accessible way ?

Inspired by a post by Crystal Scott, CPWA let's dive a little deeper in the subject of images and accessibility ...

There are several strategies for handling images in the context of accessibility, depending on the role and purpose of the image. Here are the main strategies, along with explanations of when to use alt text and when to hide images from screen readers:

1. Informative images (use alt text)

• When to use: If the image contains crucial information that is not present elsewhere in the text.
• Example: Charts, diagrams, maps, product photos, etc.
• Alt text strategy: Ensure that the alt text provides a clear, descriptive summary of the information presented by the image.
• Example alt text: "Line chart showing the increase in sales from 2019 to 2023."

Why: Screen readers cannot 'see' the image, so the alt text should provide enough information for blind or visually impaired users to understand the visual content.

2. Decorative images (hide from screen readers)

• When to use: If the image is purely decorative and does not add any information to the content. It has no impact on the message or functionality of the page.
• Example: Background images, icons without functionality, graphical fillers, etc.
• Alt text strategy: Use an empty alt attribute (alt="") to hide the image from screen readers.
• Example alt text: <img src="decorative-image.jpg" alt="" />

Why: Decorative images do not add information and would only create noise for screen reader users.

3. Images with links (use alt text)

• When to use: If the image itself is a link and describes the action or destination of the link.
• Example: A company logo linking to the homepage.
• Alt text strategy: The alt text should describe the function or destination of the link.
• Example alt text: "Go to homepage" or "LinkedIn profile of [company name]"

Why: Screen readers need to know what will happen if the image is clicked.

4. Images with text (use alt text or duplicate the text)

• When to use: If the image contains text that is crucial to the content.
• Example: A banner with a slogan or an image of a flyer with important information.
• Alt text strategy: The alt text should contain the exact text on the image. If the image contains a lot of text, it might be better to also include that text elsewhere on the page to ensure accessibility.
• Example alt text: "Slogan: 'Make your dreams come true with our financial solutions.'"

Why: Screen readers cannot read text within images, so that text must be made accessible in the alt text or elsewhere in the content.

5. Complex images (accessible description outside the alt text)

• When to use: If an image contains complex information, such as infographics, charts, or maps with many details.
• Example: A complex infographic with multiple data points and visual layers.
• Alt text strategy: Use short alt text to identify the image and refer to a longer, detailed description available elsewhere on the page or via a link.
• Example alt text: "Infographic about global CO2 emissions in 2023. Full description below."

Why: Alt text is limited in length, so a detailed description elsewhere on the page can provide the full information without making the alt text unnecessarily long.

6. Functional images (use alt text)

• When to use: If the image represents a function or action, such as a button or input element.
• Example: An image of a magnifying glass representing a search button.
• Alt text strategy: Describe the function of the image when clicked.
• Example alt text: "Search" or "Submit form"

Why: Screen reader users need to understand what happens when they click on an image representing an action.

7. Avoid images of text

• When to use: When possible, avoid using images that consist solely of text, as text in images is not scalable or customizable for users with visual impairments.
• Solution: Use actual HTML text instead of images to ensure the content is accessible.

Summary:

• Use alt text: For informative images, functional images, images with text, and linked images.
• Hide images from screen readers: For decorative images with no informational value.
• Provide extended descriptions: For complex images containing detailed information.
• Avoid images of text: Where possible, use real text to ensure accessibility.

By applying these strategies, you ensure that your images are accessible to all users, including those with visual impairments or other disabilities.

#Accessible #Accessibility #Inclusive