Accessible Images

Often when creating materials, instructors choose to include images. Content creators need to add alternative text (alt text) to images to ensure that everyone has access to the content.

Images tend to be one of two types. Those that are for decoration and those that convey content.

Decorative images need to be identified as decorative. How you identify that an image is decorative varies from program to program. Here are some common examples:

MS Word and PPT Decorative Images: Right click on a graphic. Select "Format Picture" at the bottom on the context menu. A Format Picture pane will open on the right side of the screen. Click on the third icon (a box with arrows). Select Alt Text and add your description to the Description area. The Title box can be left blank. Type the word "decorative" in the Description area.

D2L (eLearn) Decorative Images: When inserting a picture, you will be prompted to add alternative text OR to check the box labeled "This image is decorative". Check the box.

HTML Decorative Images: The alt text should be alt="" (double-quote, double-quote). See the HTML alt text example provided by W3schools.

Example:

Images that convey content need to be given a descriptive alt text. The alt text should explain function or the point of the image. Sometimes this can be accomplished in a short description. How you add alt text varies from program to program. Here are some common examples:

MS Word and PPT Images: Right click on a graphic. Select "Format Picture" at the bottom on the context menu. A Format Picture pane will open on the right side of the screen. Click on the third icon (a box with arrows). Select Alt Text and add your description to the Description area. The Title box can be left blank.

D2L (eLearn) Images: When inserting a picture, you will be prompted to add alternative text OR to check the box labeled "This image is decorative". Type the description into the box for alternative text. Note: D2L has a 200 character maximum.

HTML Images: The alt text should be alt="write a description here". See the HTML alt text example provided by W3schools.

Example:

Alt text should be short. While there is no set length 125 characters is recommended. In Higher Education it is common to have complex images that can't be described in 125 characters or less. In those cases, consider describing your image in the surrounding text. This has the advantage of explaining the complex image to all of your students, not just the ones with a visual disability. Alternatively, you could write a longer description on a different webpage and just provide a link to that description.

Note: Words in an image are not accessible, be sure to repeat any text in the image in the alt text.

Example: Description of Bloom's Taxonomy

While it is easy to explain where to write alt text, it is harder to explain how to write good descriptions for your alt text. Here are some additional resources to help you write effective alt text:

• Guidelines for Describing STEM (Science Technology Engineering and Math) Images

• Diagram Center's Accessible Image Sample Book

• Writing Visual Descriptions for Art

While writing alt text can be difficult it has several great returns on the time investment. Writing alt text will make images accessible to all students. It will also cause you to purposefully consider why you have included an image and what you hope students will get out of the image. Your image choices should be a valuable addition to your instructional materials.

#Accessible #Images