Course Details Tabs
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello Community,
I am an instructional designer at my institution, developing a training course for faculty. I'm wondering if it's possible to create a tabbed interaction like the one that appears on the Details/Certificates page in Catalog.
I'm familiar with the "enhanceable content tabs" method used by many others. However, I also know that is expected to be deprecated. For this reason and for accessibility, I'd like to use the design that appears in Catalog Details. From what I can tell by using the inspect tool and through manual accessibility testing, the tabs on this page in Catalog rely on different code. This interaction has an accessible color scheme (albeit exactly at the minimum necessary 3:1 for UI) unlike enhanceable content tabs (1.6:1). With enhanceable tabs, I cannot change the border color that appears around the active tab (unless I create a static border, which then doesn't indicate which is active except by color alone) or change the color scheme of active/inactive tabs if I want to keep the hover effect. The Details tabs also maintain the default browser focus indicator unlike enhanceable content tabs, and the keyboard functionality is as it should be for these types of interactions. So, this tab interaction is far superior.
Will or has Canvas shared this code at all so we can use it, or are my only options to (1) work with my admin on custom CSS or (2) abandon tabs altogether? I know there are some good cases against them, but I also think they can be implemented well in certain instances.
Thanks in advance!
