Accessibility Checkers

As you enhance your HTML Content, please keep accessibility in mind always. There are lots of tools and tricks available to you, but not all of them allow accessible access to the content you're creating. As you create content in Canvas be sure that you are simultaneously using the Accessibility Checkers built into the Canvas Rich Content Editor in order to ensure that your enhancements are inherently accessible. The information that we've provided on this page (and everywhere, we hope) will give you accessible results!

Working with HTML

For all the 'hacks' below, you'll be working with the html code for a Canvas page / assignment / discussion. You can access the html by clicking the </> button on the bottom right corner of the content editor.

⚠ Note: Many of the features below will not show up unless you are viewing the page outside of the editor (tabs, buttons, accordions), so we recommend working on a copy of the page you're working on before you play with these hacks!

📂 Tabs

Tabbed pages allow you to layer more content into the individual page of the module. Students may be new to tabbed pages, so it's helpful to build in some reminders about clicking into each tab before navigating "Next" in your module.

Why use tabs?
Are they accessible?
Any other tips / tricks to using them?

Tabs are a great way to shorten a page and make it look less daunting to a student. Rather than have to scroll through a lot of content, or see a module with a lot of pages, tabs can make the same about of text feel like a breeze. And you can insert any content (text, image, video, etc) into a tab - making it a pretty powerful device to organize a Canvas page.

This aligns with the CVC-OEI Course Design Rubric element A6: Page-Level Chunking. If you'd like to learn more about this element of the rubric, check out the MOST Toolkit In Practice page for A6.

Tabs are treated as a list for a screen reader, making them an accessible way to chunk content.

📱 On mobile, the tabs are treated as headings with the content for each tab right underneath the tab title. So content would appear like this:

Tab 1 Title

Tab 1 content here...

Tab 2 Title

Tab 2 content here...

As mentioned above, including a reminder to students to click on each tab is useful, especially with the accessible choice of not changing the background and font color to highlight the tabs. If you find any issues after editing your tabs, you will want to check that each tab content starts with a <div> tag and ends with a </div>.

Want the HTML for the warning below? Grab it here.

<div style="background: #30769b;">
<p style="text-align: right; color: #ffffff;">Before you click "Next" please read through all of tabbed pages.</p>
</div>

Before you move on, please read through all of tabbed pages.

Template HTML to copy/paste for tabs in Canvas.

Want to level-up your tabs?! Creating customized tabs in Canvas

Want the Tabs HTML? Grab it here.

<ul>

<li><a href="#tab-1">Tab One Title here</a></li>

<li><a href="#tab-2">Tab Two Title here</a></li>

<li><a href="#tab-3">Tab Three Title here</a></li>

<li><a href="#tab-4">Tab Four Title here</a></li>

</ul>

<h2>Topic 1</h2>

<p>Add all of the Tab One content here.</p>

</div>

<h2>Topic 2</h2>

<p>Add all of the Tab Two content here. </p>

</div>

<h2>Topic 3</h2>

<p>Add all of the Tab Three content here. </p>

</div>

<h2>Topic 4</h2>

<p>Add all of the Tab Four content here.</p>

</div>

</div>

🔵 Buttons

Buttons can help to bring attention to some of the more prominent links on your home page (or any page in Canvas). For example:

San Diego Mesa College

⚙️MOST Toolkit (you can add emojis to your buttons with emojis from Emojipedia!)

LOFT FIGs

SDCCD

Canvas Guides

SDCCD Online Learning Pathways

Button How-To

Here's how to create a button accessibly in Canvas.

CSS codes for each of the different color Canvas buttons:

class="Button" >> [This will give you a gray button.]
class="Button Button--primary" >> [This will give you a blue button.]
class="Button Button--secondary" >> {This will give you a dark gray button.}
class="Button Button--success" >> {This will give you a green button.]
class="Button Button--warning" >> {This will give you an orange button.]
class="Button Button--danger" >> [This will give you a red button.]

A bit more on buttons

You can't customize your own button color. To create accessible buttons in Canvas, you need to use the predefined classes (colors) above.
Tools that create buttons that are images, such as dabuttonfactory.com, are not accessible.

Want the Button HTML? Grab it here.

You'll find all the different button styles below, along with the code snippet to create them to the right.

insert Title <a class="Button" title="insert Title" href="URL">insert Title</a>

insert Title<a class="Button Button--primary" title="insert Title" href="insert URL">insert Title</a>

insert Title<a class="Button Button--secondary" title="insert Title" href="insert URL">insert Title</a>

insert Title<a class="Button Button--success" title="insert Title" href="insert URL">insert Title</a>

insert Title<a class="Button Button--warning" title="insert Title" href="insert URL">insert Title</a>

insert Title<a class="Button Button--danger" title="insert Title" href="insert URL">insert Title</a>

💡A Callout Box w/ Emoji

This is an example of a Callout Box. We think they partner well with emojis. Do you? Here's our favorite spot to find emojis: Emojipedia

🎁 Callout Boxes

Callouts allow you to bring attention to specific text by setting it apart from the rest. There's a great video and HTML snippets here: Ready to Beautify Your Canvas Pages? Here's How... These can serve multiple functions, but overall they are a nice way to provide another layer of engagement to your content.

Want the Callout Box HTML? Grab it here.

<div style="float: right; width: 30%; margin: 50px; background-color: #cccccc;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #ffffff; border: 2px solid #cccccc;">
<h3>A Callout Box</h3>
<p>Any content you'd like - but we aware that images and videos may overflow the box unless you fix its size, which can be problematic with students on mobile, so be sure to resize your window and check the Canvas app to see how your callout box is displayed.</p>
</div>
</div>

🧾 Accordion Menus

Accordion menus allow you to keep a chunk of text hidden. The user clicks the arrow to reveal the text.

How would I use an Accordion? (click to reveal)

We can put any content (text, images, videos, etc) here to make the page shorter!

It's a great way to provide support materials for students who need extra help or background information OR provide some material to extend a topic for those curious to learn more.

Kelly uses them to hide video and written answers to formative assessments within Canvas pages.

Are they accessible? (click to reveal)

They seem to be. They pass the accessibility checker.

📱 And they work on mobile!

Want the Accordion HTML? Grab it here.

<details>
    <summary><strong>1. </strong><span style="font-size: 14pt;"> Insert Title </span></summary>
    <p>Insert Content for item 1</p>
</details>
<details>
    <summary><strong>2. </strong><span style="font-size: 14pt;"> Insert Title </span></summary>
    <p>Insert Content for item 2</p>
</details>

Page Separations

There's great information on Page Separations on this How To Canvas: Page Separations resource.

More HTML Code Snippets

HTML Coding Snippets
More HTML Code Snippets for Canvas from Loma Linda University
We'll add more as we come across them!