Center for Learning, Experimentation, Application, and Research

Images & Alternate Text

Photograph of a gallery by Anna Dickson 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 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 can never serve as a meaningful alt text description.  For complicated 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 Canvas tab (1) toward the top of that small window, select the target folder in the middle of the window (2), and then click the "Upload Image" button (3):

Image upload

Select an image file from your computer, then select the "Open" button, or other appropriate button to initiate the file upload.  Once the image has completed uploading, either (4) 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 (5) 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.

Make any optional adjustments you feel are necessary to the image size (6), and finish by clicking the "Update" button (7) at the bottom right corner of the window:

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 to edit the Canvas page, locate the image you wish you remediate and click it once (or select it by other means).  Then, select the "Embed Image" button in the Canvas rich text editor toolbar:

The toolbar of the rich text editor in Canvas.

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.

Make any optional adjustments you feel are necessary to the image size (3), and finish by clicking the "Update" button (4) at the bottom right corner of the window:

Screen capture of the Canvas image properties pop-up window.

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, 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