HTML Hacks for Canvas

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.

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 Links to an external site..

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

Template HTML to copy/paste for tabs in Canvas. Links to an external site.

Want to level-up your tabs?! Creating customized tabs in Canvas Links to an external site.

Want the Tabs HTML? Grab it here.

<div class="enhanceable_content tabs">

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

<div id="tab-1">

<h2>Topic 1</h2>

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

</div>

<div id="tab-2">

<h2>Topic 2</h2>

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

</div>

<div id="tab-3">

<h2>Topic 3</h2>

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

</div>

<div id="tab-4">

<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 Links to an external site.

⚙️MOST Toolkit Links to an external site. (you can add emojis to your buttons with emojis from Emojipedia Links to an external site.!)

LOFT FIGs Links to an external site.

SDCCD Links to an external site.

Canvas Guides Links to an external site.

SDCCD Online Learning Pathways Links to an external site.

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 Links to an external site.

🎁 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.

🦋Emojis

Our go-to spot for Emojis is Emojipedia Links to an external site.. You can search and copy from there, and paste into anywhere you can place your cursor. Note that your emojis will appear differently depending on which program they are viewed from. 

More HTML Code Snippets