Make Visuals Accessible

Accessible Visuals

UBC Best Practices

  • Categorize visuals – Determine which visuals convey essential course content and which are purely decorative and could be removed without affecting comprehension. This categorization guides the appropriate accessibility measures needed for each visual.
  • Describe key visuals – For visuals that convey key course content, add alternative text to describe the visual’s content and purpose. This text will be read in place of the visual by students using screen readers. You can leave out phrases like “image of”, as screen readers will automatically note when they reach an image.
  • Designate decorative visuals – For visuals that are decorative, do not add alternative text; instead, specifically designate each visual as decorative in the application or text editor where you are including it. A decorative designation lets the visual be ignored by students using screen readers.
  • Communicate beyond colour – When using a visual like a bar chart to convey meaning, differentiate the data with a non-colour indicator like a background pattern, shape, or text label. Using non-colour indicators in place of—or in addition to—colour indicators allows students with colour blindness to correctly interpret the information.

Step-by-step help for accessible visuals

Select the source below where you creating or editing content to find help for applying the accessibility best practices to your visuals. You can also explore the general UBC accessibility FAQs for more guidance.

 

Add alternative text to a key visual in Canvas

  1. Go to the Page, Discussion, Assignment or Quiz Question containing your visual, and click  the Edit button at the top of the page.
  2. Click the image and then click the Image Options button that appears on the image. This will open a sidebar on the right of your screen.
  3. Type a description of the visual in the Alt Text field at the top of the sidebar.
  4. When you are finished adding the alternative text, click the Done button at the bottom of the sidebar.
  5. When you have finished adding alternative text to all your images on the page, click the Save button below the editor to save your changes.

Designate a visual as decorative in Canvas

  1. Go to the page containing your visual and click the Edit button at the top of the page.
  2. Click the image and then click the Image Options button that appears on the image. This will open a sidebar on the right of your screen.
  3. Click the Decorative Image option in the sidebar.
  4. Click the Done button at the bottom of the sidebar.
  5. Click the Save button below the editor to save your changes.

Add alternative text to a key visual in Excel

  1. Open the Excel file in the Excel desktop application.
  2. Select the visual and click the Review tab at the top.
  3. Mac users: click the arrow icon beside the Check Accessibility button, and select Alt Text. Windows users: click the Check Accessibility text below the icon and select Alt Text.
  4. Add the text and repeat as needed for other visuals, then save the file.

Add patterns to a graph made in Excel

  1. Open the Excel file in the Excel desktop application.
  2. Right-click any data series visualization (e.g., a bar line) and select Format Data Series.
  3. Click the paint bucket icon, select Pattern fill, and customize the style details.
  4. Repeat as needed for other data series, then save the file.

Add alternative text to a key visual in Excel Online

  1. Open the file in the online version of Excel.
  2. Right click (Windows) or control+click (Mac) any visual and select Alt Text. This should open an Alternative Text window.
  3. Enter text in the Title area. If needed, you can add longer, more descriptive text in the Description area.
  4. Click the OK button, then save the file.

Edit contrast of a graph made in Excel Online

The online version of Excel does not support patterns for data series, which are recommended for accessibility. If possible, open your file in the Excel desktop application and follow the instructions on the Excel tab to create a graph with patterns. If you do not have access to the Excel desktop application, choosing strong colour contrasts is the next best alternative.

  1. Open the file in the online version of Excel.
  2. Right click (Windows) or control+click (Mac) any data series visualization (e.g., a bar) and select Format.
  3. Click the paint bucket icon, select a colour that has strong contrast with your background.
  4. Repeat as needed for other data series, then save the file.

Add alternative text to a key visual in a PDF

Mac

  1. Open the PDF in Adobe Acrobat Pro. All UBC faculty and staff can access Adobe Acrobat Pro for a yearly subscription fee.
  2. Under “All Tools” in the left sidebar, click View more, then click Prepare for accessibility.
  3. Select Add alternate text and add the text where prompted.
  4. When you are done with all the visuals, click Save & Close to save the PDF.

Windows

  1. Open the PDF in Adobe Acrobat Pro. All UBC faculty and staff can access Adobe Acrobat Pro for a yearly subscription fee.
  2. You will first need to add the Accessibility menu item to the sidebar. Click More Tools in the right sidebar, then click Add under the Accessibility option. The Accessibility menu will now be available to use.
  3. In the right sidebar, click Accessibility.
  4. Click Set Alternate Text and add the text where prompted.
  5. When you are done adding alternative text to all the visuals, click Save & Close to save the PDF.

Designate a visual as decorative in a PDF

Mac

  1. Open the PDF in Adobe Acrobat Pro. All UBC faculty and staff can access Adobe Acrobat Pro for a yearly subscription fee.
  2. Under “All Tools” in the left sidebar, click View more, then click Prepare for accessibility.
  3. Select Add Alternate text, but rather than adding text for these visuals, check the Decorative figure box.
  4. When you are done designating visuals as decorative, click Save & Close to save the PDF.

Windows

  1. Open the PDF in Adobe Acrobat Pro. All UBC faculty and staff can access Adobe Acrobat Pro for a yearly subscription fee.
  2. You will first need to add the Accessibility menu item to the sidebar. Click More Tools in the right sidebar, then click Add under the Accessibility option. The Accessibility menu will now be available to use.
  3. In the right sidebar, click Accessibility.
  4. Select Add Alternate text, but rather than adding text for these visuals, check the Decorative figure box.
  5. When you are done designating visuals as decorative, click Save & Close to save the PDF.

Add alternative text to a key visual in PowerPoint

  1. Open the PowerPoint file in the PowerPoint desktop application.
  2. Right-click (Windows) or control-click (Mac) any visual and select View Alt Text.
  3. Add the text and repeat as needed for other visuals, then save the file.

Designate a visual as decorative in PowerPoint

  1. Open the PowerPoint file in the PowerPoint desktop application.
  2. Right-click (Windows) or control-click (Mac) any visual and select View Alt Text.
  3. Rather than adding text for these visuals, check the Mark as decorative box and leave the alternative text box blank.
  4. Repeat as needed for other visuals, then save the file.

Add patterns to a chart made in PowerPoint

  1. Open the PowerPoint file in the PowerPoint desktop application.
  2. Right-click (Windows) or control-click (Mac) any data series visualization (e.g., a bar line) and select Format Data Series (or Plot Series).
  3. Click the paint bucket icon, select Pattern fill under the “Fill” options, and customize the style details.
  4. Repeat as needed for other data series, then save the file.

Add alternative text to a key visual in PowerPoint Online

  1. Open the file in the online version of PowerPoint.
  2. Click any visual and select Alt Text from the “Picture” tab that appears near the top of the screen.
  3. Add or modify the descriptive text in the Alt Text Description box at the bottom of the Format Picture sidebar that appears on the right of the screen.

Designate a visual as decorative in PowerPoint Online

  1. Open the file in the online version of PowerPoint.
  2. Click any visual and select Alt Text from the “Picture” tab that appears near the top of the screen.
  3. Add or modify the descriptive text in the Alt Text Description box at the bottom of the Format Picture sidebar that appears on the right of the screen.

Add patterns to a graph made in PowerPoint

Graphs cannot be edited in the online version of PowerPoint. If possible, open the PowerPoint file in the desktop application and follow the instructions on the PowerPoint tab to create a graph with patterns. If you used Excel to create your graph, you can also use Excel to edit your graph.

Add alternative text to a key visual in Word

  1. Open the Word file in the Word desktop application.
  2. Right-click (Windows) or control-click (Mac) any visual and select View Alt Text/Edit Alt Text.
  3. Add the text and repeat as needed for other visuals, then save the file.

Designate a visual as decorative in Word

  1. Open the Word file in the Word desktop application.
  2. Right-click (Windows) or control-click (Mac) any visual and select View Alt Text.
  3. Rather than adding text for these visuals, check the Mark as decorative box and leave the alternative text box blank.
  4. Repeat as needed for other visuals, then save the file.

Add patterns to a chart made in Word

  1. Open the Word file in the Word desktop application.
  2. Right-click (Windows) or control-click (Mac) any data series visualization (e.g., a bar line) and select Format Data Series/Plot series.
  3. Click the paint bucket icon, select Pattern fill under the “Fill” options, and customize the style details.
  4. Repeat as needed for other data series, then save the file.

Add alternative text to a key visual in Word Online

  1. Open the file in the online version of Word.
  2. Click any visual and select Alt Text from the Picture tab that appears near the top of the screen. This should open the Format Picture sidebar on the right.
  3. Add descriptive text in the Alt Text Description box at the bottom of the sidebar.

Designate a visual as decorative in Word Online

  1. Open the file in the online version of Word.
  2. Click any visual and select Alt Text from the Picture tab that appears near the top of the screen.
  3. Confirm the Alt Text Description box at the bottom of the Format Picture sidebar is empty (i.e. there is no descriptive text).

Add patterns to a graph in Word Online

Graphs cannot be edited in the online version of Word. If possible, open the file in the desktop application and follow the instructions on the Word tab to create a graph with patterns. If you used Excel to create your graph, you can also use Excel to edit your graph.

Back to overview