A6 - Page Chunking - Tabs (semi-advanced)

Let's Chat!

Image

The Chat tool in Canvas allows students and teachers to interact in real time.

Read the "What Is Chat? Links to an external site." Canvas Guide to get you started.

Please be sure to view all four tabs before clicking Next.

 

How to Use This Page

  1. Copy the code below. 
  2. Open the appropriate Canvas page in your course and toggle the HTML Editor (below the page editor) so you're in the HTML area of the page. (The Rich Content Editor toolbar will no longer show.)
    HTML toggle option below page editor 
  3. Paste the code.
  4. Toggle back to the Rich Content Editor view.
  5. Replace what's shown as bolded/colored text below with your own section titles and text. [NOTE: the bold/color won't show on your page--that would have added unwanted formatting to your text ;-)]


ACCESSIBILITY: Because a screen reader device may only "view" content on the first tab (unless the student knows to look for additional content), it's best practice to include an alert above the tabs or above the Next button saying something like "Be sure to view all four tabs before moving to the next page." This helps sighted students too!

Even sighted students may miss the additional tabs on a page so I've started adding a colored background and making the tab titles 14pt font to draw the eye. The code below is just a standard white background but if you want to add color, replace the <ul> code (in the second line below) with this: <ul style="background-color: #fffff0;">. You can use another six-digit hexadecimal code if you want to coordinate with your course colors. Just be sure it has enough contrast against the light blue link text (or whatever color your school's links are).

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1"> TITLE OF TAB 1 </a></li>
<li><a href="#fragment-2"> TITLE OF TAB 2 </a></li>
<li><a href="#fragment-3"> TITLE OF TAB 3 </a></li>
<li><a href="#fragment-4"> TITLE OF TAB 4 </a></li>
</ul>
<div id="fragment-1">

<h2>Heading for Tab 1</h2>

<p> Paste Tab 1 content here </p>

</div>
<div id="fragment-2">

<h2>Heading for Tab 2</h2>

<p> Paste Tab 2 content here </p>

</div>
<div id="fragment-3">

<h2>Heading for Tab 3</h2>

<p> Paste Tab 3 content here </p>

</div>
<div id="fragment-4">

<h2>Heading for Tab 4</h2>

<p> Paste Tab 4 content here </p>

</div>
</div>

<p style="text-align: right;">Please be sure to view all four tabs before clicking <em>Next.</em></p>