Instructional Content

Learning Objective

1. Identify three accessibility strategies that should be used for images when creating online content.

2. Define each strategy and explain its importance for users with disabilities.

3. Identify examples of inaccessible image use in real-world web content, with recommendations on how to fix it.

Learning Content

When users cannot see an image that is an important part of your material, whether because they are blind or on a device that has limited connectivity, it is critical you provide them with the information needed to understand the thing they cannot see. Designers have several strategies they can employ to ensure their images are usable by everyone.

Alt Text

Alt text is a tag you place in the HTML, or markup, of your page. It provides a simple but meaningful description of what the image contains. A good example is "A green aloe vera plant sitting in a terra-cotta pot on a kitchen table." It tells the user what the image contains and gives them the context they are missing. Alt text is critical for accessibility, but it's useful for everyone. It's shown to users any time an image cannot load properly, meaning that even when there is poor internet service, your site is still usable.

Avoid using images to display text

If you are a sighted learner, it may seem that there’s little difference between standard text and a picture of text. They both appear readable. However, for blind users or those who rely on assistive technologies like screen readers, images of text are not accessible. Screen readers cannot interpret text embedded in images unless additional steps are taken, and even then, the results are often unreliable. While technologies such as optical character recognition (OCR) can help computers extract text from images, these methods are not always accurate or complete.

To ensure that all users—including those with disabilities—can access your content, always present important information as actual text in your HTML or document, not as an image.  Avoid using image file formats like .jpeg, .png, .svg, or flat .pdf files to display text unless you provide a fully accessible alternative, such as plain text or properly tagged content.

Provide Captions for Complex Images

Complex images, especially those that contain data like charts, graphs, and detailed technical illustrations need more support than simple ALT tags. The best practice is to provide detailed captions that fully explain the data being displayed. This additional context will be necessary for your learners to be able to understand and apply the information in the images. This context will enhance the learning experience of all users, but are essential for users who use screen readers. Additionally, formatting your captions correctly, using semantic HTML tags like <figure> or <caption> can help screen readers properly interpret and communicate your captions.

Video Content Best Practices

Videos are a powerful method of communicating with your audience, but as a designer you need to ensure they are accessible to all your users, regardless of their ability to see, hear, or use other senses. Including captions is one step a designer can take to make video content more accessible. You can also include audio description for your visual content when it will be helpful. 

Audio Content Best Practices

When creating audio content, like podcasts, it's important to pay attention to the details. Taking steps like ensuring high audio quality will help people engage with your content. Use a good-quality microphone and record in a quiet room. Ensure you use an accessible media player to give users control, even if they can't use a mouse. Write descriptive show notes and summaries and include a transcript of the episode. See the podcast example below. The platform, Podbean, includes controls, a transcript, and a detailed episode description.

Audio Example

Using proper accessibility methods with images in your content design ensures your work is usable by people of all abilities. As a designer, your success depends on recognizing and employing best image-handling practices for good accessibility.

Instructions:

1. Find three different websites that display images—a blog, storefront, personal webpage, etc.

2. Identify one example of poor image accessibility design on each site.

3. For each identified violation, complete the following:

   • The website URL

   • The accessibility problem with the image

   • A recommendation for how this problem could be remedied.

Example:

1. https://www.raisingroberts.com/ 

2. None of the images of the trip to St. Louis have semantic alt text

3. I would recommend adding an alt tag that describes what's happening in the picture—like “Jr.'s enjoys the big hotel bed.”