HTML to Create Tabs That Work for Keyboard Navigation

[whitney_clay]

If I make tabs with the code below and then save the page and try tabbing through it, the first tab does not highlight. That means I can't see I am on that tab. If I know I am on the first tab, I can then move between the tabs by using the arrow keys.

Does anyone know what needs to be added to this code to make the first tab highlight when you navigate to it with a keyboard? My school does not have Cidilabs, so I need to use code to make tabs.

<div class="enhanceable_content tabs">

<ul>

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

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

</ul>

<div id="fragment-1">CONTENT OF TAB 1</div>

<div id="fragment-2">CONTENT OF TAB 2</div>

<div></div>

</div>

[agarciagenel · Accepted solution]

Hi! I was curious about your question and I actually asked ChatGPT. This is what I got: 

Here’s how you can adjust your code for the Canvas environment:

1. Add role="tablist" to the <ul> element.
2. Add role="tab" and tabindex="0" to the first <li> element (the first tab) and tabindex="-1" to the other tabs so that only the active tab is initially focusable.
3. Use aria-selected="true" for the first active tab and aria-selected="false" for inactive ones.
4. Use aria-controls to associate tabs with their respective panels.

Here’s the updated code that you can paste into the Canvas HTML editor:

<div class="enhanceable_content tabs">
<ul role="tablist">
<li role="tab" tabindex="0" aria-selected="true" aria-controls="fragment-1">
<a href="#fragment-1"><span>TEXT TAB 1</span></a>
</li>
<li role="tab" tabindex="-1" aria-selected="false" aria-controls="fragment-2">
<a href="#fragment-2"><span>TEXT TAB 2</span></a>
</li>
</ul>

<div id="fragment-1" role="tabpanel" aria-labelledby="fragment-1" tabindex="0">CONTENT OF TAB 1</div>
<div id="fragment-2" role="tabpanel" aria-labelledby="fragment-2" tabindex="0">CONTENT OF TAB 2</div>
</div>

[agarciagenel · Accepted solution]

Hi! I was curious about your question and I actually asked ChatGPT. This is what I got: 

Here’s how you can adjust your code for the Canvas environment:

1. Add role="tablist" to the <ul> element.
2. Add role="tab" and tabindex="0" to the first <li> element (the first tab) and tabindex="-1" to the other tabs so that only the active tab is initially focusable.
3. Use aria-selected="true" for the first active tab and aria-selected="false" for inactive ones.
4. Use aria-controls to associate tabs with their respective panels.

Here’s the updated code that you can paste into the Canvas HTML editor:

<div class="enhanceable_content tabs">
<ul role="tablist">
<li role="tab" tabindex="0" aria-selected="true" aria-controls="fragment-1">
<a href="#fragment-1"><span>TEXT TAB 1</span></a>
</li>
<li role="tab" tabindex="-1" aria-selected="false" aria-controls="fragment-2">
<a href="#fragment-2"><span>TEXT TAB 2</span></a>
</li>
</ul>

<div id="fragment-1" role="tabpanel" aria-labelledby="fragment-1" tabindex="0">CONTENT OF TAB 1</div>
<div id="fragment-2" role="tabpanel" aria-labelledby="fragment-2" tabindex="0">CONTENT OF TAB 2</div>
</div>

[Chris_Hofer]

@agarciagenel ...

I tested out this code that you had generated from Chat GPT, but when the page is saved, it actually strips out the "tabindex" element, and it did not work for me.  I can hold down the TAB key on my keyboard all day, and it will rapidly cycle through all parts of the browser and Canvas interface except the tabs.

If you were to paste that generated HTML into the Rich Content Editor of Canvas, save the page, then edit the page to look at the HTML, you'll see that some code has been stripped out.

Check out the HTML allow list documentation: Canvas HTML Editor Allowlist

Thanks.

[whitney_clay]

Thank you for your replies, @agarciagenel and @Chris_Hofer. The HTML allow list is helpful, and I'll be talking with our district Canvas admin next week to continue playing around to see if we can find a solution. If we do, I'll come back and post.

You may find this of interest. The "ChatGPT code" remained in the HTML when I tried it, but it behaved the same as the original code I had posted. With both of those, however, the tabs DO highlight when I'm logged into Canvas and viewing as an instructor, but they DO NOT highlight if I "View as Student," while logged in or if I view it when not logged and viewing in an Incognito window (I made the course public so I could test that). Here's a video showing what happens: Tabs in Canvas. (FYI to anyone reading later, this video created 10/9/24 is hosted in Panopto and will auto-delete after one year if it hasn't had any views.)

[seanbeirnes · Accepted solution]

I hate to be the bearer of bad news, but the "enhanceable_content" tabs solution is no longer officially supported by Instructure. These tabs widgets rely on jQuery, which has been a long-used JavaScript library for aspects of the Canvas user interface. Instructure announced several years ago that they were moving away from jQuery for the user interface and will eventually remove it. For now these still work, but they will eventually be removed once the remainder of the Canvas UI no longer depends on jQuery. Most of the UI now depends on React instead.

Besides that, the "enhanceable_content" tabs are not compatible with the Canvas mobile apps and they do not follow the recommended W3 recommended tabs pattern for accessibility compliance.

One recommended alternative is for your Canvas administrator to add custom JavaScript to your Canvas instance to enable an accessible tabs widget. The W3 website has some good starter code, but because the Rich Content Editor forbids the button tag (<button></button>), you will need to add additional code to parse some sort of allowable HTML structure in the RCE, like unordered lists, to convert those to tab buttons and tabs panels. The code will also need a mutation observer to ensure that it runs after all of the page elements are rendered by React.

A more simple alternative is to use the HTML <details> and <summary> tags to create a sort of "collapsible tab." These are native HTML tags, so you do not need to worry about adding custom code to Canvas, worry about accessibility compliance, etc. These also work in the mobile app too.

Best wishes on making your Canvas pages look better!

[katrina_raciak]

Here is the html code I used to create tabs on pages that can be customized

[seanbeirnes]

Hi @katrina_raciak,

I see that your example uses the "enhanceable_content" CSS class. This invokes the jQuery library implementation of tabs. Please see my prior post above for more information, but the short version is that the "tabs" you will get from this do not comply with accessibility guidelines, they will not work in the Canvas mobile app, and they will use jQuery, a JavaScript library that Instructure recommends not using because they are moving away from using it in the Canvas codebase.

That being said, the upcoming Block Editor may be a solution for this. It is currently in beta testing now, but it does include a built-in tabs widget that does not need any extra code. It's a simple drag-and-drop interface and I like the direction Instructure is going with it. We will see what happens.

Happy Canvas-ing!

[Chris_Hofer]

Hi there, @katrina_raciak ...

In addition to the other postings you've received recently about the code you are using, I wanted to let you know that there's another product that integrates with Canvas called DesignPLUS from Cidi Labs.  It's a paid add-on (external tool) to Canvas, and so your school's Canvas administrator would need to know if there was budget money available for such a product.  DesignPLUS is much more than just a tool to create a tabbed interface in Canvas pages, though.  There are so many different tools in the DesignPLUS sidebar that can make your course pages shine.  I'd encourage you to take a look at these couple websites for more information:

• DesignPLUS for Canvas | Cidi Labs
• cidilabs – showcase - a bunch of examples from other schools who use DesignPLUS to create their course content
• Webinars | Cidi Labs - webinar videos near the bottom of this page

I hope these resources will be of some help to you.  Good luck as you continue to explore the use of tabs in your course(s)!

[katrina_raciak]

Awesome.  Thank you so much