Table of Contents

Designing for Accessible Canvas Courses

Jason Carroll Updated by Jason Carroll

Accessibility in 8675309

The pages included in 8675309 are accessible. The font schemes chosen by CSG and our Web Developer, Danny Friere, are accessible in size and color, and images that appear across our courses (i.e., course logo, faculty headshots, etc.) are built according to their accessibility needs. Please be sure to use these vetted pages when building Canvas content.

Formatting Text

For students who are sighted, they are able to easily scan a page at a glance and get a birds’ eye view of the structure. They can easily jump from one section to the next using their vision alone. We can provide students using screen readers or other assistive technologies a similar experience of being able to quickly navigate through sections of content easily: through formatting our content in correct semantic headers.

Semantic styles include: Heading 1, Heading 2, Heading 3, Paragraph, Code, Preformatted, bulleted lists, ordered lists, etc. When we consistently use these defined styles, students can easily navigate through using a keyboard or other input device.

Use the following considerations when formatting text. These examples are also documented with the correct HTML in 8675309.

Descriptive text Use appropriate semantic headers — h1, h2, h3 — and in the correct order. The way our Canvas pages are laid out, H2s are reserved for the page title, and H3s should be used for subsections. Do not use font styling to denote sections. You can set the semantic structure easily using the rich content editor: select paragraph, heading

For example:

This works:

<h3>Discussion Topic</h3>

But avoid:

<p style="font-size: 14pt;"><strong>Discussion Topic</strong></p>

  • To create whitespace, use the CSS padding attributes of HTML elements to create the visual look you desire; do not use empty paragraph texts or excessive line breaks. For example:

This works:

…which we will cover in the next section. </p>

<h3 style="padding-top: 1em;">The next section</h3>

But avoid:

…which we will cover in the next section.</p>

<p></p>

<h3>The next section</h3>

  • Information that is structured in a list format should be in the HTML format for bulleted lists, <ul> or <ol>.

  • Tables should not be used for visual layouts. Use CSS — padding, margins, divs, etc. — to layout text on a page visually and to create the whitespace you need.

Images, Alt Text, and Long Descriptions

When it comes to images in courses, consider what information is being conveyed. Is it essential to a learner’s understanding of the course material, or is it serving more of a decorative function? If it conveys vital information, is the image the only way we offer that information, or do we refer to what’s in the image in the text on page as well?

  • If essential information is only being conveyed in the image, Alt text is essential for those who can’t see images, for example, those using screen readers, or living in rural areas with low internet connectivity. 

  • If the image is sufficiently complex, e.g., a bar graph or chart, alt text alone may not suffice — there is a limit of 250 characters. Instead, a long description and/or providing a data table may be needed to convey the information. See this article for more information about alt text and long descriptions.

    An image’s alt text or long description should be designed during course development.

  • If the image serves more of a decorative purpose, for example, the course thumbnail, it can be marked as decorative in Canvas, which will also tag the alt .

  • In the case of faculty headshots, alt text is not needed as the text on that page also includes the faculty’s name.

Tables

When tables are used in Canvas courses, there are a few items to keep in mind. Most importantly, tables should be reserved for organizing data, but they are not to be used for text layout. If you need help planning layout of text, consult among your team or see the examples in 8765309 <under development>.

When tables are used, note that scope must be assigned, and a header column and header row must be created. Table captions are also necessary to ensure they’re fully accessible to our users. See this article for more information about building accessible tables.

Our standard practice is to avoid using live links to external content due to the risk of them becoming outdated or edited by third parties, which could lead to errors in our courses. When you've got approval to include a live link (for example, a short-term executive master's course) and when linking to files stored on S3, please follow these guidelines for hyperlinks:

  • Links should be descriptive, meaning the link describes the destination it takes the student to. The website’s title can be used easily in copy:

This works:

“Refer to the study, Scholarly Article Title.” or, if the study has been referenced already on the page, “Refer to the study.”

But avoid:

“Refer to https://www.jstor.org/ for the study’s findings.” or “Refer here for the study’s findings.” or “Click here for the study’s findings.” 

  • Avoid using raw URLs. URLs get read aloud by screen readers — and they all start the same: “http://www…” This causes excess mental work for students to listen through all links.

  • There are cases where there is a strong case to keep the URL in the content, mainly if the goal is for students to take note of the URL for future reference. In this case, use a shortened URL instead. So:

This works:

“Refer to NumPy.org for complete documentation.”

But avoid:

“Refer to http://www.numpy.org for complete documentation.” 

Designing Layouts Through HTML

In all cases, visual layout should be accomplished through appropriate HTML, which can often be done using the rich content editor in Canvas, not by manually creating larger text, bold text, making lists or line breaks manually, or by using a table to layout text, among other things. To help accomplish common layout goals, many sample pages are included in the Unique Custom Pages module of 8675309: these pages have been built to account for accessibility needs, and are meant to be a resource for designers. A few examples of these pages include: 

H5P Considerations

When considering including H5P content in a course, there are a few things to keep in mind. In general, remember that any H5P content will not appear in the course transcript, and students will instead be told that the content couldn’t be rendered in the course transcript and that they should complete the activity in the course. Additionally, be sure that the H5P content you’re including is accessible, as not all h5p activities are.

  • See this article for more information about accessible H5P content, including a complete list of activities and their accessibility.

Using Ally and Built-In Rich Content Editor Checker for Accessibility Checking

While building course pages in Canvas, be sure to check and resolve/account for any accessibility issues that are flagged via the built-in accessibility checker in the rich content editor as well as with Ally as you go along. Click on the accessibility checker (pictured below) on each page in Canvas from the edit screen in order to check accessibility items. 

Do not rely solely on the accessibility checker; for instance, pages that use tables for layout are not necessarily flagged as having accessibility issues, and images may be flagged as needing alt text when they are truly decorative.  

Known Accessibility Flags in Canvas

In addition to anything that the Canvas accessibility checker flags for your attention, pay particular attention to the following elements: 

  • Skipped headings on faculty bios on Homepages and Thank You and Farewell

  • Table captions on multi-vid playlist tool — it won’t display as a table once the page loads

  • Be cognizant that some items flagged are actually fine, and that others not flagged may need attention. For example, Canvas can’t see an image in context to know if the text surrounding it gives a sufficient explanation, and it won’t know if the content in your table is data or just text.

    • If you’re unsure about an accessibility flag you’re seeing, post a question in the #accessibility channel in Slack.

Addressing Accessibility After Launch

If an issue related to accessibility in Canvas comes up after course launch, the first objective is to make sure the live content is made accessible to students for whom a barrier currently exists as quickly as possible. Depending on the need, this can be accomplished in many ways, not all of which require an elegant or ongoing technological solution. Work with your IDD to find solutions to the immediate need. 

If an update to the -M version of a course is needed to meet this accessibility need moving forward, use this form to file a product maintenance ticket. Be sure to explain the solution used in the live section, as applicable, as well as the next date this course runs in Canvas to help with prioritization of this task.

How did we do?

Studio Accessibility

Contact