IMAGES
And other visual content
Let’s make sure those with visual impairments have access to the images you use. This includes all visual content you may be using, such as pictures, icons, shapes, graphics, and even charts.
There may be items on this page that are inaccessible for individuals with some forms of disability. These items are necessary for illustrating differences between accessible and inaccessible content. If you have any questions or concerns, please contact Shelby@thada.org
LET’S LEARN ABOUT
INFORMATIVE VS. DECORATIVE IMAGES
Before you learn to apply best practices to the visual content (e.g., images) in your document or webpage, you first want to identify whether the images are informative or decorative.
Informative
An informative image, chart, icon, etc. is content that is essential to understanding other information or the purpose of the other information on the document or webpage.
Ask yourself, will the information (the text) on your page or slide still make sense to a student without the image? If not, this may be a sign that the image is informative.
Example: Chart. Below is an informative chart that I’ve embedded into a PowerPoint slide as picture file (.jpg). The chart is an informative image because the information in the chart (this picture) is important for students to understand in order to understand my lecture.
Decorative
A decorative image, chart, icon, etc. is content that is non-essential to understanding other information or the purpose of the other information on the document or webpage.
Example: Icon. Below is a decorative icon that I’ve embedded into my course shell next to the header text, “Do Your Best Work”. This icon is a decorative image because the icon is not important for students to see in order to understand the content of this page.
Other examples of decorative images include page dividers, or shapes and icons in PowerPoint that are just there for creativity.
WRITING ALTERNATIVE (ALT) TEXT
What if the visual content is informative?
This type of visual content requires the use of alternative text (also known as “alt tags” and “alt descriptions”). This text helps screen reading tools describe visual content to visually impaired students.
What if the visual content is decorative?
This type of visual content should be marked as decorative (when the option is available; if not available, then leave the alt text blank). When an image is marked as decorative (or the alt text is blank), that cues a screen reader to skip over it rather than reading it’s alternative text.
What is alternative (alt) text?
Also referred to as “alt text”, this is text associated with an image that can be read aloud by a screen reader. Any software you use that allows you to embed visual content should have the option of adding alt text to that content (see our other self-training guides for specifics on how to add alt text to various platforms, e.g., PowerPoint). If the software you are using does not allow for adding alt text – ditch that software.
Benefits of adding alt text to visual content.
- Alt text enables students relying on assistive technology to access information about that image.
- Alt text helps search engines index your image.
- The alt text is what displays on a page if your image fails to load (see example below). Without alt text, the file name displays instead (see section on “Naming Photo Files“).
How to properly write alternative (alt) text.
- First, alt text is not needed if it is going to repeat information that is already on the document or webpage. In which case, treat it like a decorative image.
- Alt text should convey “why” the image relates to the other content of the document or webpage.
- Keep it short, like a tweet.
- Be specific, and succinct – think how you’d briefly describe the image over the phone.
- Never start your alt text with “Image of” or “Photo of”. An individual using assistive technology to access alt text will already know that it is an image or photo. However, it is good to explain the type of image, e.g., headshot, chart, illustration, etc.
- If text is part of the image, be sure to transcribe that as part of your alt text description.
NAMING PHOTO FILES
Before you add an image to your instructional material(s), check the file name. Sometimes we save files as arbitrary names, (ex. image001.jpg). Best practice – rename the file to something meaningful, (ex. Image of President Roosevelt). The file name of your images automatically populates as the alt text (for many platforms), so if your file name is already descriptive, this will save you time in writing or editing alternative text.