HTML to Create Tabs That Work for Keyboard Navigation

Question

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.

* TEXT TAB 1
* TEXT TAB 2

CONTENT OF TAB 1

CONTENT OF TAB 2

agarciagenel · Accepted Answer

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:

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

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

TEXT TAB 1

TEXT TAB 2

CONTENT OF TAB 1
CONTENT OF TAB 2

seanbeirnes · Accepted Answer

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 (), 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

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