Let me preface this by referencing the endeared tabbed interaction that so many people use. I've created my own videos and blog posts showing people how to customize their tabs. However, this interaction is based on old code that is no longer actively supported, and today I encourage my faculty and course designers to eschew tabs and instead utilize the new <details> disclosure element, which I tell them is an accordion menu.
The premise of this element is that the information is visible when the widget is expanded or toggled to an "open state". Very similar to the concept of the tabbed interaction. The details element will have a <summary> element, which is typically going to be a term or a label of sorts. After the <summary> will be the content, which could be a definition, an image, a video (perhaps a rickroll?), or whatever content you want displayed in the expanded form. Below is an example of an accordion, followed by the code used.
Data [click here]
What a baby computer calls its father
<details>
<summary>Data</summary>
What a baby computer calls its father
</details>
You can also change the cursor to a pointer so that when students hover the <summary> then the cursor becomes a hand with a pointed finger. This can be useful as it helps students know that the element is interactive and clickable. Simply replace <summary> with this line:
<summary style="cursor: pointer;">
In terms of accessibility, it seems students with visual impairments who use screen readers should be able to access the <details> and <summary> without ARIA "out of the box", though some legacy browsers may benefit from the ARIA. Most academic institutions to encourage students to update their browsers regularly - especially those who seek reasonable accommodation.
For those interested in seeing how to create <detail> accordion menus from scratch:
And if you've explored the basic options and are looking for a multitude of options and inspiration for fully customizing your accordions, then check out the more advanced tutorial:
Again, I do lament that we are no longer able to use the tabbed interaction, but I fully support the developers looking to make sure our Canvas content is secure, up-to-date, fully functional, mobile responsive, and (very importantly) accessible to all users. In the meantime, I have had a lot of fun using the <detail> element to create glossaries, information boxes, and a host of fun and interactive content for my students and course designers.
