Images & Alternate Text

Photograph of a gallery by Raychan from Unsplash.com.  For images of any kind, the primary concern is their accessibility to people with low vision.  If an image is decorative -- meaning, it is not part of the instruction -- we recommend marking the image as decorative (the method to do so is unique to each application and we will explain in detail below).  By marking an image as decorative, screen reader applications will skip over the images entirely when vocalizing the content of the page. 

If an image is informational, useful or critical to a student's understanding of the course material, or it includes material that a student will be assessed on, a textual description must be included with the image. This is most commonly included as a "alt text" description, the implementation of which we will also elaborate on below.  Please note that the image file name never serves as a meaningful alt text description. An example of good alt text is "A beachfront bungalow surrounded by trees". An example of bad alt text is "beachfront_bungalow1.jpg".

For complex images (e.g., graphs, charts, data visualizations, etc.), we recommend inclusion of brief alt text description, plus a longer, detailed textual description of the image in paragraph form directly above the image, as part of your content.

The rest of this page contains guidance for creating and modifying image content so that it is optimally accessible.  To jump to a specific section of this page, please click one of the menu items below.

Contents

  1. Canvas
  2. Microsoft Office (Word, PowerPoint, and Excel)
  3. Adobe Acrobat PDF
  4. Complex Graphs or Charts

Canvas

Upload an Accessible Image to Canvas

We'll begin first with the basic process of uploading an image.  To start, begin by editing your Canvas page, and then clicking the "Embed Image" button in the rich text editor toolbar:

The toolbar of the rich text editor in Canvas.

A new pop-up window will appear.  Select the "Choose an Image" button (1) toward the top of that small window. This will display a standard file selection window. Browse to the folder containing your image, select it, and then select the "Open" button. Back in Canvas, your image will appear in the center of the pop-up window. Select the white "Select All" button just below the image (2), or crop your selection, if you wish by clicking and dragging the corner anchors of the blue selection box. Make any other adjustments you feel are necessary, and when you are finished, select the "Crop & Resize Image" button (3).

Screen capture showing the Upload/Embed Image pop-up window in Canvas.

To complete the task of inserting an image in your web page, select the "Upload and Embed" button at the bottom right corner of the pop-up window (4).

Screen capture of Canvas showing second step of image upload pop-up window.

Now, we want to modify the image options in order to add our alternate text. Select the image in the rich text editor window. This should display an "Image Options" pop-up menu option (5).  Please select that option.

Screen capture of Canvas rich text editor window, containing a selected image.

Helpful tips & tricks!Alternate Text is best written as a brief descriptive sentence or two.  File names, however descriptive, are not appropriate, as they frequently contain special characters and sometimes lack spacing between words, so a screen reader application may fail to correctly read the information.  Likewise, long descriptions (paragraph length) are also not ideal.  If your image requires a long description, it is best to include it in the body of your web page or document either directly above or below the image.

This will open the Image Options menu on the right side of your browser window. Here, you have the option to enter in your alt text (6) or identify the image as purely decorative by selecting the checkbox marked "Decorative Image" (7).  Choose one or the other. If the image is marked as decorative, a screen reader will bypass it entirely. When you are done modifying your image options, select the "Done" button (8) at the bottom of the menu.

Screen capture of Canvas showing Image Options right-side menu.

Congratulations!  Your uploaded image is now accessible to a screen reader!  

Go to top

Make an Existing Image in Canvas Accessible

If you wish to remediate an image you have already uploaded, first select the image in the rich text editor window. This should display an "Image Options" pop-up menu option (1).  Please select that option.

Screen capture of Canvas rich text editor window, containing a selected image.

This will open the image properties window, which is identical to the one displayed upon first uploading an image.  Here, we recommend you either (1) enter a brief description of the image into the "Alt text" textbox, if the image is a useful or necessary part of the instruction, or (2) check the "Decorative Image" checkbox, if the image is purely ornamental. 

Helpful tips & tricks!Alternate Text is best written as a brief descriptive sentence or two.  File names, however descriptive, are not appropriate, as they frequently contain special characters and sometimes lack spacing between words, so a screen reader application may fail to correctly read the information.  Likewise, long descriptions (paragraph length) are also not ideal.  If your image requires a long description, it is best to include it in the body of your web page or document either directly above or below the image.

This will open the Image Options menu on the right side of your browser window. Here, you have the option to enter in your alt text (2) or identify the image as purely decorative by selecting the checkbox marked "Decorative Image" (3).  Choose one or the other. If the image is marked as decorative, a screen reader will bypass it entirely. When you are done modifying your image options, select the "Done" button (4) at the bottom of the menu.

Screen capture of the Canvas Image Options right-side menu.

Congratulations!  Your image is now accessible!

Go to top

Microsoft Office (Word, PowerPoint, Excel, etc.)

Insert an Accessible Image in Office

We'll begin first with the basic process of inserting an image into your document or presentation.  The process is the same for Microsoft Word and PowerPoint.  Start by clicking in your document/presentation so that the blinking cursor appears in the place you wish to insert the image.  Select "Insert" from the ribbon menu at the top of your Office Application (1), and then select the "Pictures" button directly below (2).

Screen capture of Microsoft Word's Insert ribbon menu.  Screen capture of Microsoft PowerPoint's ribbon menu, showing the location of the Insert menu and Picture button.

For Microsoft Excel, there is an extra step.  Start by selecting the cell in your spreadsheet into which you wish to insert an image.  Next, (1) select "Insert" from the ribbon menu at the top of your Office Application. Then, (2) select "Illustrations" from the menu, followed by the "Pictures" button directly below.

Screen capture of Microsoft Excel, showing the location of the Insert menu, Illustrations button, and Pictures option.

The remaining steps are identical across Microsoft Word, PowerPoint, and Excel.  Browse to the folder containing the image you wish to insert, select it (3), and then select the "Insert" button at the bottom of the window (4):

Screen capture of file selection window.

Next, right-click the image, or open this context menu by the means available to you (5), and select "Edit Alt Text..." from the menu (6).

Screen capture of image in Microsoft Word and the right-click menu.

This will open the Alt Text pane on the right side of the window, as pictured below.  From here, we recommend either (7) entering a brief description of the image into the textbox in the Alt Text pane, if the image is a useful or necessary part of the instruction, or (8) check the "Mark as decorative" checkbox, if the image is purely ornamental.  When you are finished applying your accessibility settings, you may click the "X" in top right corner of the Alt Text pane to close it.

Helpful tips & tricks!Alternate Text is best written as a brief descriptive sentence or two.  File names, however descriptive, are not appropriate, as they frequently contain special characters and sometimes lack spacing between words, so a screen reader application may fail to correctly read the information.  Likewise, long descriptions (paragraph length) are also not ideal.  If your image requires a long description, it is best to include it in the body of your web page or document either directly above or below the image.

Also, please note that every image, no matter how small and seemingly insignificant, either needs to be marked as "decorative," or needs explanatory alternate text.  This includes graphical lines, boxes, and all other graphical design elements.

Screen capture of the Alt Text pane in Microsoft Word.

Congratulations!  You have inserted an accessible image in Microsoft Office!

Go to top

Make an Existing Image in Office Accessible

Right-click the exiting image in your document/presentation/spreadsheet, or open this "right-click" context menu by whatever means are available to you (1).  Then, select "Edit Alt Text..." from the menu (2).

Screen capture of an image in a slide in Microsoft PowerPoint, and the right-click menu.

This will open the Alt Text pane on the right side of the window, as pictured below.  From here, we recommend either (3) entering a brief description of the image into the textbox in the Alt Text pane, if the image is a useful or necessary part of the instruction, or (4) check the "Mark as decorative" checkbox, if the image is purely ornamental. 

Helpful tips & tricks!Alternate Text is best written as a brief descriptive sentence or two.  File names, however descriptive, are not appropriate, as they frequently contain special characters and sometimes lack spacing between words, so a screen reader application may fail to correctly read the information.  Likewise, long descriptions (paragraph length) are also not ideal.  If your image requires a long description, it is best to include it in the body of your web page or document either directly above or below the image.

When you are finished applying your accessibility settings, you may click the "X" in top right corner of the Alt Text pane to close it.

Screen capture of the Alt Text pane in Microsoft PowerPoint.

Congratulations!  You have made your image in Microsoft Office accessible!

Go to top

Adobe Acrobat PDF

Guidance for adding alternate text to images ("figures") in Adobe Acrobat can be found at our Fixing Image Alternate Text section of our Checking & Fixing PDFs in Adobe Acrobat page.

Go to top

Complex Graphs or Charts

Complicated graphs, charts, and other images will require more information than a brief description that is suitable for Alt Text.  The best practice in these cases is to provide both a brief Alt Text description, e.g., "An XY chart about the unemployment rate in the United States", plus a detailed textual description of the graph before it appears on the page.  An example of this is below:

The graph below is a XY Chart, entitled "My Charts and Graphs Are."  The chart contains a left-to-right "X" axis and an up-to-down "Y" axis, which intersect one another at the center, forming a cross.  At the left of the X axis is the word "Boring," and at the right is the word "Fascinating," representing opposites, with the space in-between representing gradients between these two polar opposite perceptions or moods.  The top of the "Y" axis is labelled "Easy to comprehend," and the bottom of the axis is labelled "Hard to comprehend."  Toward the top right of the graph, at the point representing a strong combination of "Easy to Comprehend" and "Fascinating" is a plotted red dot labelled "My perception."  At the bottom left corner, representing a strong combination of "Boring" and "Hard to comprehend," is a second plotted dot in green labelled "Everyone else."

An XY Chart visualizing how the author's charts are perceived by himself and everyone else.

Source: TowardsDataScience.com, by Payman Taei

Go to top