cancel
Showing results for 
Search instead for 
Did you mean: 
sulbert
Surveyor

Using Tabs in Your Canvas Course

Jump to solution

Using Tabs in Your Canvas Course

Video Link - http://screencast.com/t/y8kKgBuGOWT8

Utilizing tabs in your course may be a good idea for a variety or reasons.

  • Aesthetics – Tabs can improve your course design by making your course more visually appealing and look more organized.
  • You may be looking for a way to avoid using multiple pages for chunked content
  • Tabs can help keep similar content together without creating a longer page that looks overwhelming to students

The benefits of using headers within your tabs / fragments -

  • Design – Using headers within your tabs helps to visually organize and separate your content, and can improve the overall look of your page, especially if you have a large number of tabs.
  • Accessibility – visually impaired students who use screen readers can more easily select a desired section of the content, without having to wait for their reader to read through an entire page, which could be very long and inefficient.
  • It is important to repeat the title/header of the tab with the <h2> html code and also use the <h3> html code for sub headers within the tabs / fragments

I’ve included some example HTLM code. You can simply copy and paste this code into your HTLM editor. To make editing it easier, I’ve bolded the areas you would want to replace with your own content. You can also add additional tabs by duplicating the relevant coding, or delete any extra tabs, or content by removing the corresponding code.

To show you exactly how I added these tabs, you can follow along in the video

Thank you for watching.

______________________________

Tabs - HTML Code

<div class="enhanceable_content tabs">

<ul>

<li><a href="#fragment-1"><span>TAB 1 NAME</span></a></li>

<li><a href="#fragment-2"><span>TAB 2 NAME</span></a></li>

<li><a href="#fragment-3"><span>TAB 3 NAME</span></a></li>

<li><a href="#fragment-4"><span>TAB 4 NAME</span></a></li>

<li><a href="#fragment-5"><span>TAB 5 NAME</span></a></li>

</ul>

<div id="fragment-1">

<p><em>

Intro to what is presented in the tabs:

</em><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">Section Name in "Heading 3" for Accessibility</span></h3>

<ul>

<li><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></li>

<li>

Embed YouTubes within Tabs:


</li>

<ul>

<li><a class="" href="

https://youtu.be/kOjOr1ionic">https://youtu.be/kOjOr1ionic

</a> </li>

</ul>

<li>

<p>

Resource:

<a id="" class="" title=""

href="http://oei.onefortraining.org/videos/

" target="_blank">Captions for Videos</a></p>

</li>

</ul>

<h2><span style="color: #800000;"><span lang="EN"></span></span></h2>

<p> </p>

 </div>

<div id="fragment-2">

<h2><span style="color: #800000;">TAB 2 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/DrqIm31TE40" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<hr />

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<br />

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<ul>

<li><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></li>

</ul>

<p><strong>

Links to Related Articles

</strong></p>

<ul>

<li><a title="

Formatting Text (On webpage/LMS)

" href="

http://oei.onefortraining.org/text/">Formatting Text (on webpage/LMS)

</a></li>

</ul>

<p class="">

Resource:

<a id="" class="" title="" href="

http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/

" target="_blank">

Formatting Text (Word and PowerPoint)

</a> </p>

</div>

<div id="fragment-3">

<h2><span style="color: #800000;">TAB 3 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/ZrbiqsqtStY" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<p><span>Resources:</span></p>

<ul>

<li><a id="" class="" title=""

href="http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/" target="_blank">Formatting Text (Word and PowerPoint)

</a></li>

<li><a id="" class="" title=""

href="http://oei.onefortraining.org/videos/

" target="_blank">

Captions for Videos

</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/formatting-images-webpage-lms/

" target="_blank">

Formatting Images </a>(Webpage/LMS)

</li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/color-contrast/

" target="_blank">Color Contrast</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/link-text-associated-with-a-universal-resource-locator-url/

" target="_blank">

URL Link Text

</a></li>

</ul>

<p class="p1"> </p>

</div>

<div id="fragment-4">

<h2><span style="color: #800000;">TAB 4 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/p9yszeopMZU" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></div>

<div></div>

<div></div>

<div id="fragment-5">

<h2><span style="color: #800000;">TAB 5 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/jTogzQ9bsTY" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<p>

Resources:

</p>

<ul>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/

" target="_blank">Formatting Text (Word and PowerPoint)</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/videos/

" target="_blank">

Captions for Videos

</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/formatting-images-webpage-lms/

" target="_blank">Formatting Images </a>(Webpage/LMS)</li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/color-contrast/

" target="_blank">Color Contrast</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/link-text-associated-with-a-universal-resource-locator-url/

" target="_blank">

URL Link Text

</a></li>

</ul>

<p class="p1"></p>

</div>

</div>

1 Solution

Accepted Solutions
caitlin_stiles
Community Member

 @sulbert ​ thank you for this information. From what I can see, you can only have one page with additional tabs, is this correct? In otherwords, you can't have multiple pages with multiple tabs, is this right? From what I can see Canvas only provides the option to have on 'page'.

Appreciate your help.

View solution in original post

66 Replies
Renee_Carney
Community Team
Community Team

 @sulbert ​

This looks like a great resource for Canvas users!  To help people find it I am going to move it to the Instructional Designers​ group. 

caitlin_stiles
Community Member

 @sulbert ​ thank you for this information. From what I can see, you can only have one page with additional tabs, is this correct? In otherwords, you can't have multiple pages with multiple tabs, is this right? From what I can see Canvas only provides the option to have on 'page'.

Appreciate your help.

View solution in original post

lhenning
Community Member

I love this idea!  I do have a question, however...

I have just been reminded of the ADA complications (text readers, etc) in using tables for design of Pages; do you know if creating tabs cause similar issues?

Thanks,

Lindsay

The author says the following above. However, I would want to test this feature first to ensure that Canvas-supported screen readers do work. See Accessibility in Canvas.

  • Accessibility – visually impaired students who use screen readers can more easily select a desired section of the content, without having to wait for their reader to read through an entire page, which could be very long and inefficient.

--Stephanie J

Hi Caitlin, I'm might be answering the wrong question . . . I created a test module with three pages and copied and pasted the HTML code into each page. Each page had tabs.

stephanie_johns
Community Member

Thanks for sharing this! I also have concerns about screen-reading success. Can JAWS and NVDA parse this layout? If so, then it opens up a wonderful course organization and design option.

--Stephanie J

kmatson
Learner II

Thank you for sharing this code.

Karen Matson

eliams
Community Member

Thanks for sharing! This is incredibly helpful for organizing information. I appreciate it.

Best,

Sheryl

Using NVDA to read tabbed pages in Canvas

I did some minimal research into and testing of the accessibility of tabbed pages in Canvas.

In general, if coded correctly, tabs are an accessible "widget," to use the technical term. See W3C: Accessible Rich Internet Applications (WAI-ARIA) 1.0. Note that the home page of NV Access​ features a tabbed section.

Process

  1. I downloaded the free screenreader from nvda.org.
  2. I created a Canvas test page in my sandbox account and ran the NVDA screenreader using Chrome, my default browser.
  3. I ran the NVDA screenreader using Firefox.
  4. I ran the NVDA screenreader using IE/Microsoft Edge.

Results

  • Chrome: NVDA did not read the tabs.
  • Firefox: Read the tabs and page content correctly.
  • IE/Microsoft Edge: Read the tab title PLUS the full URL of each tabbed page (h-t-t-p-colon-blackslash-etc.). Bug?

Caveats

  • I did not try to configure any of the browsers in any way, and I don't know (too lazy) which browser versions I'm using.
  • I did not try to configure NVDA. I downloaded it and immediately let it talk. I had never used it before.
  • I "tested" only on a Windows 8 PC.

Implications

  • Students can use only Firefox if running NVDA? This might be too much of a limitation if true.
  • More rigorous and detailed testing of this feature is required across OSs and browser combinations if you want to ensure accessibility.


Download NVDA screenreader