Skip to main content

CUNY LIBRARIES ARE OPEN ONLINE! We are open online for reference & instruction. E-resources are fully available. Library buildings remain closed.

Support Students Impacted by Coronavirus Crisis Donate Now

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 windowexternal link.

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.


Attribution: Normandale Community College [2012, Mar.19] Accessible vs. Inaccessible - Can you Hear the Difference? - Normandale Community College. Retrieved from https://youtu.be/5TNU_t-9w1A

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

  1. Select <Add Media> button from within a page or post
  2. 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.
  3. Once an image is selected you will see the "Attachment Details" box on the right hand side of your window.
  4. 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

  1. Select "Media" on the left side-bar
  2. Click on the <Add New> button located in the "Media Library" window
  3. Drag & drop image or search computer to upload image
  4. Once an image is uploaded, select it (you will see a check-mark next to the image you select)
  5. Once an image is selected you will see the "Attachment Details" box.
  6. 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"

  1. Select on "Media" on the left side-bar to open up drop down menu
  2. Click on "Add New", located under "Media" and "Library".
  3. Drag & drop image or search computer to upload image.
  4. As your image is being uploaded you will see a progress bar saying "crunching".
  5. After image is uploaded, click on the work "Edit" (located on the bottom right) 
  6. A new window will open, an "Edit Media" window.
  7. 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

  1. Click <Add Media> button from within a page or post
  2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select).
  3. Click on <Insert into page> button.
  4. Once back on the page or post, click on the image you just uploaded.
  5. A new editing bar will pop-up
  6. Click on the pencil "edit" icon
  7. An "Image Details" page will pop-up.
  8. 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:

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

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

 

  1. 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

 

  1. In the Edit Image Properties window, enter your alt-text into the Alternative Text field.
  2. 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

 

showing where to add alt-text in word.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" external link.

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.


Attribution: [Techboomers] (2019, June. 11) How to Add Alt Text to Instagram Posts 2019. Retrieved from https://youtu.be/NJR0SNn_evQ

Attribution: [AMI: Accessible Media Inc.] (Feb 28, 2019) How To Add Alt Text to Twitter. Retrieved from: https://youtu.be/6B008Xi73QQ