Tabs

2 min read

Canvas can convert simple lists into interactive tabbed panels using its legacy enhanceable content system. When the page loads, Canvas runs JavaScript that looks for elements with enhanceable_content tabs and turns them into tabs.

This behaviour depends on Canvas' own JavaScript and CSS. It cannot be recreated with inline styles alone — the examples below work only because Canvas enhances the markup for you.

Useful references

In this guide, ARIA attributes are not added manually to the tab markup. Canvas manages the interactive behaviour internally, and manually adding partial ARIA patterns could conflict with or duplicate what Canvas injects.

Canvas-enhanced tabs example

The structure below shows the minimum HTML needed for Canvas to create tabs. A list of links defines the tab labels, and each link points to a corresponding panel by ID.

Overview

Use this tab for a short summary or introduction. Canvas will show this panel when the page first loads.

Details

Place more detailed information here — for example, step-by-step instructions or criteria.

Further support

This tab can be used for links to help, FAQs, or related resources without cluttering the main content.

<div class="enhanceable_content tabs">
  <ul>
    <li><a href="#tab-one">Overview</a></li>
    <li><a href="#tab-two">Details</a></li>
    <li><a href="#tab-three">Further support</a></li>
  </ul>

  <div id="tab-one">
    <h4>Overview</h4>
    <p>Use this tab for a short summary or introduction.</p>
  </div>

  <div id="tab-two">
    <h4>Details</h4>
    <p>Place more detailed information here — for example, steps or criteria.</p>
  </div>

  <div id="tab-three">
    <h4>Further support</h4>
    <p>Use this tab for links to help, FAQs, or related resources.</p>
  </div>
</div>

Accessibility notes

  • The tab behaviour and ARIA attributes are handled by Canvas' own scripts. The raw HTML will appear as a list of links and sections if enhancement fails.
  • Avoid adding your own role="tab", role="tablist", or related attributes unless you are building a fully custom tabs pattern outside Canvas' enhancement system.
  • Ensure that important instructions are not hidden only in a non-default tab; some learners may miss them if they do not explore all tabs.
  • For simpler show/hide content that does not require tabbed navigation, consider native <details> / <summary> instead, as shown on the Typography page.