Unit 3: Images & UDL


Media & UDL | Unit 1: Universal Design for Learning | Unit 2: Videos & UDL | Unit 3: Images & UDL | Unit 4: Docs & UDL | Concluding Thoughts
Unit 3 Performance Objectives:

  • Learner will add to their growing list of resources and online communities with image-related items
  • Learner will identify three instances of missing or inappropriate alternative text on popular websites
  • Learner will discuss the ways in which the use of visuals aligns with a UDL strategy

What You'll Do:

  1. Read "Creating Accessible Images"
  2. Complete the activities
  3. Explore some of the resources included at the end of the module

Mini-Lecture: Creating Accessible Images

Section #1: Learn from a Student

Like many individuals in Penn State's diverse student body, JooYoung Seo came from another country to pursue the myriad educational and professional opportunities the United States has to offer. Even before he made the decision to uproot his life in South Korea and study abroad, however, he faced a series of unique challenges along the road to his graduate career at Penn State. As JooYoung explained in an interview from 2015:

"It is highly competitive to enter a college or university located in Seoul, Korea, which is the capital and largest city, and the entrance exam requires a lot of preparation time. Most Korean high school students, therefore, go to private (extracurricular) academy cram schools, called hagwon, to make up their weak points in some subjects and learn more to get better grades on their exams.

I wasn’t able to go to those profit schools because they didn’t provide me with any alternative materials or alternative texts; they target mainstream students, which did not include me as a participant. That’s why I used online courses a lot for my university entrance exams" (Hicks, 2015).

Following his acceptance into Penn State, JooYoung got involved with the Office of Disability Services, which advocated on his behalf for specific features that would make it possible for this skilled student to excel in his classes.

When asked what teachers could do to prevent students from experiencing the frustration and exclusion that JooYoung encountered at the hagwon, he recommends that they pay special attention to images, and ensuring that image files can be read by screen reader software that visually impaired students use to "read" digital information.

So how do images sound to students like JooYoung? Check out this YouTube video to gain further insight into how a student would "hear" a website.

Section #2: Images & UDL

In what way could the use of images align with the principles of UDL?

Multiple means of representation:

  • The use of images allows instructors to present the same information included in text and lecture-based instruction in a new way
  • The use of images may help students who are not fully familiar with the language spoken in their school to make sense of the content of a lesson

Multiple means of expression:

  • Having learners represent what they have learned by creating an image may allow them to clarify their understanding of content relationships, categories, and structures

In what way could the use of images pose a problem?

As JooYoung's story demonstrates, learners with visual impairments could be left out of the learning experience completely if images are not accompanied by appropriate alternative text

Section #3: More to Chew On

Purpose of the Image

While you may be inclined to read JooYoung's story and apply alternative text to every image file you encounter for the rest of your professional career, it is important to consider the role that the image plays in the larger context of the webpage, document, etc. In some cases, an image may be purely decorative. If the image was added for purely aesthetic reasons and does not communicate any meaningful information, it should not contain any type of alternative text at all. In fact, what is referred to as "empty" alt text should be inserted so that screen readers know to skip over the image entirely rather than reading out the name of the file (e.g. "_MG_2876") (Penn State).


How you add alt text (or in the case of decorative images, empty alt text) will depend on the platform you are using to communicate your lesson. If you are working in Microsoft Word, for example, the process of adding alternative text involves a few quick clicks. When uploading an image to your blog through a CMS like Wordpress, on the other hand, you may need to add alt tags to the HTML of the webpage. Thankfully, a quick Google search (e.g. "alt text, Blackboard") can produce a wealth of information on how to add alternative text to image files.

Meaning and Specificity

There is no point in adding alt text at all if it does not evoke a comparable meaning as the image file itself. To ensure that the alternative text you include is both meaningful and specific, reflect on why you are including the image to begin with. Once you have a clear idea of what you are trying to communicate to students with the visuals, it should be fairly easy to translate the same message to text. Again, this would not apply if the image is purely decorative (Penn State). Penn State's Accessibility site has a useful list of alt text do's and don’ts to use as a reference.

Captions vs ALT Text

Captions are the visible text included near image files (usually directly underneath) to provide additional information to the reader. This could mean an extra chunk of text that lists copyright information, for instance. Alternative text is added to provide the same information communicated by the image file (Penn State).

Unit 3 Activities

Knowledge Base Activity

In this activity, you will make your second contribution to the course knowledge base. Your mission is to search the Web for two image creation resources and add them to the knowledge base.

What counts as a "image creation resource?"
An appropriate resource would be any web-based content open to the public (aka available without subscription or membership) that could be used as a reference when creating images.

Examples of resources include:

  • A video outlining the difference between image file formats.
  • A downloadable handbook on posting images through Wordpress.

Scavenger Hunt Activity

Locate three instances of missing or inappropriate alternative text for images posted online and add them to the scavenger hunt page. Using previous entries to the page as examples, note the accessibility error you have identified, and explain what you would do to fix the error. If possible, try to determine the type of tool you would need to make the appropriate edits.

Quiz Activities

In this activity, you will take the online quiz under "Context is Everything" within WebAIM's article on alternative text to test your understanding of image accessibility. Use the quiz results to direct your further studies into creating accessible images.

Unit 3 Extra Resources

Alt Decision Tree

Judging by the list of considerations above, your decision on when and how to use alternative text will vary on a case-by-case basis. Even though there is no one strategy for making images accessible, there are concrete yes/no questions you can answer ahead of time that will help you determine which option is best for the visuals you seek to include as part of your lesson. With that in mind, W3C's Web Accessibility Initiative has created an alt decision tree for use in the decision-making process.

How Tos

References and Resources