Accessibility in APSC

Students with disabilities deserve equal access to education. Therefore, prioritizing accessibility is extremely important, especially when roughly half of students with disabilities do not report having any.1 Students fear stigma and may feel uncomfortable receiving accommodations, even when they are necessary for their learning. To avoid disadvantaging these students, accessibility should be an ongoing effort with students in mind, rather than a mandatory last-minute change.

Negative attitudes towards students with differing needs are cited as the largest barrier for people with disabilities pursuing a career in STEM.2 Making these tweaks and adjustments in your learning content can have an extremely positive effect on these students, increasing feelings of belonging and fostering a more inclusive environment for all students and faculty.


In considering accessibility for your students and in your teaching, we have created a downloadable checklist for you to use. For more detailed information about the items found in this checklist, please continue exploring below. We encourage you to consult the checklist when reviewing your content to highlight your successes and any possible areas of improvement in accessibility.

There are two versions of the checklist. The ‘visual checklist’ uses symbols to denote the ease of implementation of each suggestion and has a more succinct organization. In contrast, the ‘text checklist’ has screen-reader-friendly formatting, using subheadings to denote the effort required in each suggestion. The content itself is identical, so use whichever version suits your needs best.

Please feel free to download, store, and distribute the checklist to suit your own educational needs.


Definitions of accessibility vary across individuals and content. The following non-comprehensive set of basic tips can serve as a starting point in improving accessibility. It is important to have an understanding of these guidelines to be able to apply them with the help of tools like accessibility checkers found on Canvas and Microsoft platforms.

For further information, consult the Centre for Accessibility‘s post ‘Accommodating students with disabilities‘ or UBC’s OER Accessibility Toolkit. UBC CTLT also offers accessibility workshops and drop-in sessions where you can receive specific advice on improving accessibility in your class and course content. 


When creating or adapting text-based content, consider the needs of students with dyslexia, ADHD, and those who may be visually impaired. Incorporating the following tips below will make text more readable for all students.

Regular text has particular formatting requirements to improve accessibility for readers;

  • Body text should be in 12pt font or larger. Footnotes and endnotes can be smaller, at a minimum of 9pt.
  • Use left-aligned, 1.5-spaced text.
  • Avoid underlining regular text as it may appear to be a link to students with colourblindness. Use bold to signify importance in text instead.
  • Content and text should be scalable to 200% on websites to assist students with low vision.3
    • To test this, resize your text drastically. If the text changes size, it is scalable. If not, it may have a fixed unit size, or be a part of an image.
  • Paragraphs should be shorter with space between blocks of text. This makes the content more digestible for everyone, especially students who may have dyslexia or other learning difficulties.
  • Use sans-serif fonts for readability. Calibri and Helvetica are common examples.
    • Avoid fonts with varying line weight and minimal padding as these can be especially confusing for students with dyslexia. See the images below for an example of how inaccessible fonts may appear to a student with dyslexia.

An example of inaccessible fonts. From top to bottom: the first font has uneven line weight, the second has insufficient spacing between letters, and the last has serif features.


This is how students with dyslexia may see these fonts. Letters appear squished together and the words are difficult to make out.

Images from Microsoft’s guide to designing slides for people with dyslexia. 


Headings can give meaningful indications of content sections and improve readability.4 They should be specifically formatted as headings within the platform used, instead of bolded and underlined. Additionally, headings should be placed consecutively, without skipping levels, when decreasing in heading hierarchy.

For example, using h1, h2, and h3 then back to h1 in that order is fine, but not h1, h3, h6, then back to h1 as this can cause confusion.

Similarly, try to format lists as lists within the platform used. Screen readers cannot identify lists organized by dashes or symbols to separate items.5 Do so by manually selecting the bullet/list option to create a list. On specific platforms, such as Word or Google Docs, writing a dash ‘-‘ or a ‘1.’ and pressing space will automatically create a formatted list.

Check if your list is correctly formatted by pressing enter. If a new bullet is automatically generated, the list is correctly classified.


Colour should not be the only indicator of significance within content. For example, if there is a graph or chart which distinguishes sections based on colour, increase its accessibility by incorporating textures or increasing the colour contrast (see images below).6 To test whether your images or content is accessible for students with colourblindness, try viewing them in black and white to assess if all the necessary context is still present.7

A pie chart in color and black and white. Only colors are used to distinguish the slices, it is hard to understand in black and white.

Inaccessible chart:

Students with full or partial colour blindness cannot understand the chart as it lacks colour contrast and texture.


Accessible chart:

Regardless of their ability to see colour, all students can understand the chart as colour, as well as texture and contrast, distinguish each segment.

Text requires a high level of contrast to be visible, especially for students with vision impairments or colourblindness. The recommended guideline by Open UBC’s accessibility toolkit is a contrast ratio of 7:1 or more. Use ACART Communication’s contrast checker to double-check the contrast ratio of your content compared to accessibility standards. 


It may be helpful to view your content in greyscale or with a filter simulating colour blindness to ensure an accessible use of colour. Follow this guide to accessing a greyscale filter on Mac

On Windows, open the ease of access settings by pressing the Windows key + U. Then, select Colour Filters and turn colour filters on. Then, select which type of colourblind filter you would like to use, or view your content in greyscale to simulate complete colourblindness.8


When including links in your content, aim to follow the below guidelines adapted from BC Campus’ Checklist for Accessibility

  1. Name links with the title of the resource, not just ‘click here’ or a URL. Screen reading software navigates through links by reading them aloud, so non-descriptive titles and URL links are unhelpful.
  2. Links should describe what will happen when clicked. For example, what format is being linked to (e.g. [PDF], [Excel]), and any actions associated with the link (e.g. [New Tab], [Inline]).
    • You can also use screen-reader friendly icons to indicate this – see above link to ‘Checklist for Accessibility’ for ‘NewTab’ icon
  3. Underline links to signify their location. Do not rely only on blue colour to distinguish them from other text.

Students with ADHD or dyslexia benefit from the meaningful use of images in content. Images are helpful for breaking down long text into an explanatory graphic or driving home a point with an example. However, they can be a barrier to accessibility for other students, if not formatted correctly.

Visually impaired students or those with poor internet connections may not be able to access images in content. To prepare for these situations, alternative text (ALT text) should be available to substitute the meaning of the image. The use of ALT text depends on the context of the image in the content.

See the categories below for details on what type of descriptions are required for the different contexts of an image.

Functional Images
OpenClose

Relatively simple, functional (non-decorative) images should use ALT text to explain their context and meaning. The ALT text should be an informative description of the image, one to two sentences in length.9 Descriptions should not entail every visual aspect of the image, only the explicitly necessary and relevant content. Avoid using redundant phrases like “This image shows…”, or “In this picture..”, as screen readers will automatically dictate that it is ALT text for an image.10


If it is not clear whether an image needs ALT text, consult the Web Accessibility Initiative’s ALT text decision tree

Decorative Images
OpenClose

Some images appear purely for decoration with no real implication to the course content. These images do not need ALT text as no context is missing without them. They should be marked as decorative whenever possible.


Some examples of decorative images as provided by the Web Accessibility Initiative are: 

  1. An image that is a part of page design. For example, a divider line or a purely decorative graphic.
  2. An image that is part of, or describing, a link. For example, an image of the WordPress logo next to a link to a WordPress site.
  3. An image with adjacent text already describing it. For an example, see these two images used in this page.
  4. An image used for aesthetics, purely to draw a viewer’s eye. See below for an example from the Web Accessibility Initiative.
Aesthetic photo of tropical fronds.

Note that because the context of this page requires knowledge of the style of the image, ALT text is included, even though this example would not require alternative text. Whether an image is decorative or not is determined by the context and meaning it provides, not the image itself.

Complex Images
OpenClose
Complex bar graph. See text for link to example long description.

An example of a complex image from the Web Accessibility Initiative. See their long description for this graph as an example of how to summarize complex visual data into tables and text. 




On Canvas, adding ALT text and long descriptions can be very simple. See the guides below for more:

How to add ALT text to New and Existing Images

  1. When uploading an image, there will be an ‘Alt Text‘ box to enter the image description.
  2. If the image is decorative, do not include any ALT text. Instead, click the ‘Decorative Image‘ check box.
  1. Click on the image, and then click on the ‘Image Options‘ pop-up.
  2. In the pop-up, you can write the ALT text or select the image to be decorative.

How to add a Long Description

There are two ways to add long descriptions: an embedded link to a separate document or a drop-down below the image.

Follow the steps below:

  1. Write the long description in a Word document (Word is easier for screen readers to dictate than PDFs). Name the document with a descriptive title.
  2. Upload the Word document to the Canvas course and link it under the image. For instructions on how to do this, consult the page How do I link to a file in a Canvas text box? by Tufts University. 
  3. In link options, select ‘Preview Inline.’
  4. Make sure the ALT text of the image includes instructions on how to access the long description.

This method works well in an exam environment when you do not want students to exit the window or open new documents. It requires minimal </> HTML editing.

  • Navigate to the page you would like to include a long description on. Go to the HTML editor of the Canvas page by clicking on the “</>” button at the bottom right of the text box.
  • Paste the code below into the HTML editor.
<figure style="margin: 2.5rem auto; width: 80%;">
    <img src="ImageLink" alt="Short description of the image" style="width: 100%; border: 1px solid #000000;" />
    <figcaption>
        <details style="border: 1px solid #444444; padding: 15px;">
            <summary>Image Caption Text Description</summary>
            <p>Full description of the image. </p>
        </details>
    </figcaption>
</figure>
  • Replace “ImageLink” in the code with a link to the image you want to display.
  • Switch back to the Rich Content Editor in Canvas by clicking the “</>” button again.
  • Now you can edit the text contents of the image caption and long description.
  • Ensure the image also has descriptive alt text, including where to find the long description.

Instructions adapted from Penn State’s Instructure post Adding a Long Description.


For all students, an intuitive and simple Canvas setup is beneficial. However, it is especially helpful for students with learning or attention disabilities such as ADHD. To accommodate these students and improve everyone’s experience in a Canvas course, consider these steps:

  • Remove all unnecessary links from the course navigation menu. One clear path to a resource is better than several.
  • Place key course information on the front page. Here, list information such as instructor emails, office hours, and links to the syllabus and modules.
  • Organize all content using modules, including assignments, discussions, and quizzes. A well-thought-out modules tab ensures students do not need to separately access the assignments, discussions, or quizzes tabs.
  • Use descriptive titles. Whether naming a file, a unit, or an assessment, descriptive titles can help students more easily locate content and navigate the course.12

For more information, read Hildi Pardo’s advice on bringing clarity to your Canvas course navigation



While this page focuses on accessibility in learning technologies, it is equally important to create an environment where students feel comfortable participating regardless of any disability or identity. Prioritize student safety and privacy when it comes to any accommodations they may require. Consult the resources below to learn more about improving inclusion and creating a positive space for all students:



Consult the guidelines below for content-specific accessibility and consider incorporating the tips most relevant to your teaching and content.

PowerPoints and Slides

PowerPoints presented or distributed to classes have specific accessibility standards recommended to be met.

  • Each slide should include a unique title describing its contents and formatted as a title or header.
  • The font size should be 18pt or larger.
  • Slides should not have excessive text. Instead, write scripts into ‘Notes’ on PowerPoint and ‘Speaker Notes’ on Google Slides, which students can access if the presentation is shared with them.13
  • The reading order for slides should be set in a logical order for students with screen readers. Consult Microsoft’s guide on creating slides with an accessible reading order for  steps on how to do this.
  • Slides should have high contrast between backgrounds and text. However, avoid stark white backgrounds as they cause glare when presented.14 Instead, opt for a slightly off-white background.
  • Avoid slide transitions or flashing GIFs and videos. These can be very disorientating for students and dangerous for those with photosensitive epilepsy.
  • Whenever possible, distribute slides and in-class content before class. Use this guide on saving presentations in a different format to easily convert PowerPoint slides to handouts for your students.

PDFs

PDF formatting determines how the document’s content can be dictated by screen reading technology. Ideally, export PDFs directly from a platform like Word. This will ensure that the PDF is ‘searchable’, and has a text component that can interact with screen readers.


On Microsoft platforms (Excel, Word, etc.) follow these steps for creating accessible PDFs that will maintain document structure tags like headings. Make sure to use the ‘Save As‘ function, instead of the ‘Print to PDF‘ function. Keep in mind that a Word doc is more accessible than a PDF.

Students with visual disabilities who rely on screen readers need well-formatted and searchable PDFs to be able to access the content. PDF content being read aloud can also benefit students with learning disorders like ADHD or dyslexia.


For Google products (such as Google Docs and Google Sheets), the PDF will not save in an accessible way. Formatting will be lost and the document will not keep structure tags. To save accessible Google Doc PDFs, consider the following steps:

  1. Export from Google Docs to a Microsoft Word .doc, which will maintain the accessible formatting.
  2. Open the newly exported file through MS Word.
  3. Export it out of MS Word as a PDF.

For more information and alternate methods, consult the LinkedIn post How to get an accessible PDF out of Google Docs .


Image-based PDFs with no searchable functions are not accessible to screen readers. However, using Adobe Acrobat and following these instructions on how to make a PDF file searchable will make them more accessible. Made-searchable PDFs will have more errors than original text-based documents, so it is preferred that PDFs are initially exported in a tagged searchable format.

Check PDF accessibility using the Adobe Acrobat X Pro Accessibility Checker [PDF]. It can check for issues like document structure, reading order, and whether or not the PDF is searchable.


Videos

Closed captions can be helpful for students who are deaf or hard of hearing, students who do not have access to audio, or students who are not native speakers of the language in the video. Included captions should describe both dialogue and non-speech audio. To distinguish between these two, non-speech audio should be presented in square brackets.15 For example, [cheerful background music] or [Alice knocks on the door]. Some users may find captions distracting, so ensure that they know of their ability to toggle captions on and off.


There are multiple ways to create captions for your video content:

  1. Request captions in Kaltura and manually edit them for accuracy.
  2. Use YouTube to automatically caption your videos and then edit the captions.
  3. Manually add or import captions from a file in Camtasia.

Other students may also require audio descriptions of visual content in a video. To avoid having to include a separate audio transcript, it is best to describe visual content verbally throughout your video.16 For more information, consult UBC’s OER Accessibility Toolkit (see Best Practices 4: Video and Multimedia).


Live Content

Zoom has a useful list of tips to host more accessible meetings.  For a summarized version, read below.

  • Use Zoom’s closed captioning features. This can be done manually, by assigning a participant to write the caption or using automatic captioning with live transcription.
  • Use an accessible and non-distracting virtual background. Backgrounds with excessive movement can negatively affect students with ADHD, motion sickness, dyslexia, epilepsy, or migraines.
  • Provide participants with materials ahead of time, so they can review them at their own pace.
  • Remind students of the Multi-Pin feature to avoid rapidly changing speaker views which can be distracting or confusing to some students.
  • Mute participants on entry. This decreases distraction for neurodivergent students and noise clutter for students who rely on screen readers.
  • Verbally describe visuals appearing on the screen.
  • Ensure the Zoom chat is not cluttered with messages as a screen reader may dictate them all.
    • To do this, tell students to use private messaging instead of public messaging and read out any relevant comments.
  • Encourage students and hosts to identify themselves as they begin speaking.
  • Use a sign language interpreter and Zoom’s spotlight feature to ensure the interpreter stays on the screen for the duration of the meeting.
  • Dictate any visuals that may appear on the screen for students who rely on sign language interpreters who cannot always see the main screen.
  • Include dial-in numbers on Zoom invites for deaf users who use Video Relay Services.

Like Zoom, Panopto offers live captioning and transcription. This article describes how to use live captioning during a Panopto stream. Panopto also allows users to add audio descriptions to an already published video


Tables

  • Format row and column headers appropriately, so screen readers can dictate table content in a logical order. Specifically, headings should be categorized as table headings and should have a set scope.
  • Provide table captions and/or titles.
  • Avoid merging or splitting cells. This can confuse screen reading software on which cells are associated with which headings.
  • Do not leave the first cell (top left corner) empty. This is the first cell screen readers will dictate and it can be used to helpfully describe the table.
  • Cells need enough padding around text. Otherwise, overcrowded tables can be difficult for students with dyslexia to read.
  • Avoid using tables to format a page. Only use tables for data and other kinds of tabular information.

Consult these resources for step-by-step guides on how to make accessible tables on different platforms:

Students using screen readers to substitute visual content will hear the table read aloud cell by cell, as well as the associated heading for context. With no indication of which heading relates to which cell, a poorly formatted table with no headings will be extremely confusing and hard to understand for these students.


Formulas and Equations

To ensure equations and formulas are compatible with screen readers, use accessible coding languages to write scalable math. MathML is recommended for creating accessible math. For more information, consult Penn State’s page on MathML and MathJax. MathML code is useful because it can be pasted into HTML platforms like Canvas’ rich text editor, which allows screen readers to dictate complex math in plain English. Alternatively, providing your own audio recordings can be beneficial for students who need to hear equations aloud. Images with ALT text should be avoided to format equations as they can be pixelated or blurry under high magnification.17

There are some intuitive ways of creating accessible math in Canvas and across platforms. See the tabs below for more details:

Canvas Math Editor
OpenClose

In Canvas, formulas and equations can be written using the Canvas Math Editor. The formula will display in a scalable format and will have ALT text. The ALT text includes LaTeX code describing the equation and automatically generated MathML code. This allows a screen reader to dictate the formula in a clearly understandable way.

There are two ways to access the Canvas Math Editor:

  1. Access it by clicking “Insert” at the top of the page, then by going to “Equation” and using the provided tools to type in the formula.
  2. Access it by clicking the three dots in the top right corner of the text editor. The Canvas toolbar will expand to include a dropdown that has an insert formula icon (the square root of x).

For more information on Canvas Math Editor, consult Penn State’s Canvas Math Editor and Accessibility page.

Microsoft Equations
OpenClose

Use the Microsoft Equation Editor found across the Microsoft suite of products to easily create accessible equations. To use it, either insert an equation, or use the keyboard short cut ‘Alt‘ and ‘=‘. MSU Denver has a detailed step by step guide to creating accessible math documents [PDF] in Word with more information on using this tool.


There are also some guidelines to follow when using the equation editor, as adapted from Learning and Teaching’s page on Accessible Math

  1. Use the Equation editor to write all math content, including shorter inline content in word problems.
  2. Do not insert equations and symbols using the character map.
  3. The equations editor should be used for superscripts and subscripts, instead of keyboard shortcuts.

Emma Cliff’s video guide on Microsoft Equations  is extremely useful for becoming familiar with the equations editor on Word. The transcript, PowerPoint, and document of keyboard shortcuts and tips she refers to can be foundon her website .
WebWork
OpenClose


Canvas has a built-in accessibility checker that can be used when creating pages, quizzes, or tests. Find it using the steps below:

  1. Create a new Quiz, Assignment, or Canvas page, or edit a current one.
  2. Find the accessibility symbol in the bottom right corner of a text box. It is an icon of a stick figure in a circle.
  3. Click on the icon. A pop-up will appear with information on whether there are any accessibility issues on the page.
  4. The pop-up will walk you through anything it has flagged as not accessible and prompt you with ways to resolve these issues.
  5. Make sure you are also manually checking your content as these trackers can only pick up on basic issues. Ensure you are also familiar with the basics of best practices in accessibility.

The accessibility checker across the Microsoft suite of products is useful for checking if there are any basic non-accessible formatting. It checks for three things, as explained in the rules for the Microsoft accessibility checker

  • Errors make the document extremely difficult to understand for people with disabilities.
  • Warnings would make the document difficult to understand for people with disabilities, but not in all cases.
  • Tips to improve the document for people with disabilities, though the document would still be readable if unused.

It also provides ‘Intelligent Services’, utilizing artificial intelligence to suggest alternative text. This can be a good starting point but should be manually edited and reviewed to ensure that the context is accurate.

  1. On Excel, PowerPoint, and Word, navigate to the ‘Review‘ tab.
  2. Then select ‘Check Accessibility‘.
  3. An Accessibility Checker pop-up will open on the left of the screen. Navigate through the errors, warnings, and tips, applying the advice wherever possible.

Consult Microsoft’s instructions on using the accessibility checker for more platform-specific instructions on using the accessibility checker for Windows, macOS, and the Web version.



Footnotes

  1. “Accessibility,” Queen’s University, n.d. https://www.queensu.ca/ctl/resources/accessibility. ↩︎
  2. “STEM and People with Disabilities.” DO-IT, n.d. https://www.washington.edu/doit/videos/index.php?vid=53. ↩︎
  3. “OER Accessibility Toolkit,” Open UBC, August 24, 2021. https://open.ubc.ca/oer-accessibility-toolkit. ↩︎
  4. “Creating Accessible Documents,” National Center on Accessible Education Materials, n.d. https://aem.cast.org/create/creating-accessible-documents. ↩︎
  5. “OER Accessibility Toolkit,” https://open.ubc.ca/oer-accessibility-toolkit. ↩︎
  6. “Creating Accessible Content,” https://www.pcc.edu/instructional-support/accessibility/#color. ↩︎
  7. “OER Accessibility Toolkit,” https://open.ubc.ca/oer-accessibility-toolkit. ↩︎
  8. Nikhar K “Microsoft Community”, August 11, 2021 https://answers.microsoft.com/en-us/windows/forum/all/changing-my-display-from-black-and-white/f0f39872-414a-4e84-98e3-0a1c3cac5692 ↩︎
  9. “Creating Accessible STEM Materials,” National Center on Accessible Education Materials, n.d., https://aem.cast.org/create/accessible-stem-materials. ↩︎
  10. “Using Graphics and Alt Text,” Province of British Columbia, n.d., https://www2.gov.bc.ca/gov/content/home/accessible-government/toolkit/accessible-digital-content/graphics. ↩︎
  11. “Creating Accessible Content,” Portland Community College, n.d. https://www.pcc.edu/instructional-support/accessibility/#alternative-text. ↩︎
  12. “Accessibility Online,” Faculty of Applied Science Centre for Instructional Support, n.d. https://applied-science-cisdev.sites.olt.ubc.ca/accessibility-online. ↩︎
  13. “Creating Accessible Microsoft PowerPoint Presentations,” Province of British Columbia, n.d., https://www2.gov.bc.ca/gov/content/home/accessible-government/toolkit/documents/microsoft-powerpoint. ↩︎
  14. “Use Accessible Colors and Styles in Slides,” Microsoft, n.d., https://support.microsoft.com/en-us/office/video-use-more-accessible-colors-and-styles-in-slides-65c8c964-9449-4b5f-88ea-e226abd68337. ↩︎
  15. “OER Accessibility Toolkit,” https://open.ubc.ca/oer-accessibility-toolkit/. ↩︎
  16. “OER Accessibility Toolkit,” https://open.ubc.ca/oer-accessibility-toolkit/. ↩︎
  17. “Equation Format and Accessibility” Portland Community College, n.d. https://accessibility.psu.edu/math/equations/ ↩︎

Back to Top