Library Guides: Open Educational Resources and Zero-Cost Learning: How to create accessible images (alternative text)

Accessibility Information on Images

General Information

Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content." - World Wide Web Consortiums' Web Accessibility Initiative. Don't shy away from using images!

Why using alternative text (alt-text) is important

To make images and graphics "visible" to all users is one of the first principles of web accessibility.
Alternative text provides a textual alternative to non-text content in web pages.
People using screen readers: The text alternative can be read aloud or rendered as Braille
People using speech input software: Users can put the focus onto a button or linked image with a single voice command
People browsing speech-enabled websites: The text alternative can be read aloud
Mobile web users: Images can be turned off, especially for data-roaming
Search engine optimization: Images become indexed by search engines

Note: Removing images from websites (so-called “text-only versions”) make them less accessible and functional for these users and situations.

Basic principles:

Every image must have an Alternative text (alt-text)
Alt-text can be provided in the "alt attribute" or in the surrounding context of the image.
Appropriate alternative text depends heavily on the image's context.
Decorative images still need an alt attribute, but it should be null alt="".
Alternative text should present the CONTENT and FUNCTION of the image.
Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
Alternative text should be succinct and not contain the phrases "images of..." or "graphic of..."

How to create good alt-text?

Remember that context matters when creating alt-text.
Always ask yourself “What is the context and purpose of this image/graphic?“ and make sure the text alternatives convey the purpose or function of an image to provide an equivalent user experience.
- Alt-text should convey the purpose of an image. For example, alt-text for a search button would be “search” rather than “magnifying lens”.
Create alt-text which provides a textual alternative to non-text content.
Describe the content and function represented by the image/graphic.

Detailed Examples

Created by World Wide Web Consortium

NOTE: All links will open up in a new tab or window

Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Decorative images: Provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
Complex images such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

Video showing accessible images

Demonstration/Comparison

Here is a video showing the difference between how a screen reader reads aloud a web page which has inaccessible images versus one with accessible images. In the first instance you will hear the file name of the image. Many times if you leave an image without alt-text, screen readers will read aloud the file name of the image, which usually is not accessible information.

Pro Tips

Place a “.” period at the end of your alt-text, this notifies screen readers the alt-text is done and pauses a bit longer before moving on to the text on the page and/or next image.
Don't use the words like "image of, picture of, photo of etc." it is redundant. Assistive technology already announces the item is an image.
Make your email and social media posts accessible by adding alt-text to images you use or post.

Specific Platform Instructions for creating accessible images

When adding an image look to the image settings in the Block options to add alt-text (alternative text)

screengrab showing where to add alt-text in wordpress gutenberg.

In WordPress classic editor there are several ways to add alt-text to images to your site.

You can add "default" alt-text to an image so that each time you reuse the image its default alt-text will be attached.
- This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)
- You can edit this "default" alt-text on individual pages (option four)

Option 1: Adding Default Alt-text to Image via Media Button

Select <Add Media> button from within a page or post
In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select)
1. If you need to upload an image first then, select upload files tab, upload your image and then do step 2.
Once an image is selected you will see the "Attachment Details" box on the right hand side of your window.
Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing the add media button

Screen grab showing add media window with atachment details

Option 2: Adding Default Alt-text to Image via "Media" left side-bar option & "Add New" button

Select "Media" on the left side-bar
Click on the <Add New> button located in the "Media Library" window
Drag & drop image or search computer to upload image
Once an image is uploaded, select it (you will see a check-mark next to the image you select)
Once an image is selected you will see the "Attachment Details" box.
Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing selecting Media then Add New Item button

Option 3: Adding Default Alt-text to Image via left side-bar option "Media" - "Add New"

Select on "Media" on the left side-bar to open up drop down menu
Click on "Add New", located under "Media" and "Library".
Drag & drop image or search computer to upload image.
As your image is being uploaded you will see a progress bar saying "crunching".
After image is uploaded, click on the work "Edit" (located on the bottom right)
A new window will open, an "Edit Media" window.
Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing how to upload new media and add alt-text.

Option 4: Customizing Alt-text of images on individual pages or posts

Click <Add Media> button from within a page or post
In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select).
Click on <Insert into page> button.
Once back on the page or post, click on the image you just uploaded.
A new editing bar will pop-up
Click on the pencil "edit" icon
An "Image Details" page will pop-up.
Here you can edit the alt-text without changing the "default" alt-text of the image.

Screen grab showing how to edit an image's default alt-text from within a page or post.

There are a few things to keep in mind when including visuals such as images, charts, or graphs in your Blackboard site:

Do not overcrowd a page with too many visuals
Be sure your readers can see your image, chart, or graph by formatting it in an appropriately large size, and by maintaining contrast with the background.
Include Alt Text for all visuals

Alternative text (Alt Text) for images is important to include for anyone accessing your document using a screen reader. That said, you do not need to add Alt Text for purely decorative images but only for those that include important information. You can also include a text-only alternative page with descriptions of the imagery and data.

To add Alt Text, click on the image and then click on the insert image icon. Under “Image Description,” you can insert details describing the visual. Be sure to explain what are the most important elements of the image, graph, or chart. You do not need to enter in a title.

In LibGuides there are several ways to add alt-text to images.

You can add "default" alt-text to an image by using the "Image Manager" to upload the image.
- Each time you reuse an image its default alt-text will be attached.
- This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)
You can also add /change alt-text when you add an image in a Rich Text/HTML.

How to add default alt-text to an image via the Image Manager:

Go to Content in top menu bar
Click on Image Manager in drop down menu

Screen grab showing how to access image map from top menu under content

In the Image Manager window, upload a new image, then click on the thumbnail or and/ click on the thumbnail of image already uploaded to add default alt-text. (Make sure to click on the actual image and not link icon.)

Image Manager view properties

In the Edit Image Properties window, enter your alt-text into the Alternative Text field.
Click the Save button.

How to add alt-text to an image you add via the Rich Text/HTML box:

Select "Add Rich Text/ HTML"

Rich Text/HTML screen image

Select "Image" icon

Image selection icon

In the "Image Properties" window type in the alt-text in the "Alternative Text" field.

Image Properties pop-up window image showing where to type in alternative text

When adding images to a word document add alt-text so all your users can appreciate and experience the images. There are slightly different instructions on how to access the area where you can add alt-text depending on your version of word. Go to the specific link for your version of word to see exactly how to add alt-text in your documents.

Across the board word alt-text instructions:

Enter the alt-text only in the Description field, NOT the Title field.

When an image is tagged as a figure, the alternative text will appear in a black box in the upper-left corner of the image. If it has no alternative text, the caption will read "Figure - No alternate text exists."

adobe acrobat figure to show image with no alternative text.

To add or edit alternative text, right click on the image and select Edit Alternate Text.

Facebook also uses object recognition technology to provide automatic alt text. You can replace this text to provide a better description of a photo by editing the description. Keep in mind that this description will only be read if someone is using a screen reader to access Facebook.

In November 2018, Instagram announced accessibility improvements to their site in a post titled "Creating a More Accessible Instagram"

In the post Instagram introduced two new features, the first being automatic alternative text which uses object recognition technology to automatically create alt-text for images. It does this by “scanning” your image and “guessing” what is on your photo and then writes an alt-text for you. The second new feature is custom alternative text which allows users to create and add their own custom, more accurate descriptions of their images and would be what I would recommend you use to create alt-text for your Instagram posts.