tabindex="0" for HTML/CSS Flip Cards in Canvas
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
I'm currently building a course in Canvas that contains HTML/CSS Flip Cards. I learned the code for this from Dr.Nufer's "How to Canvas" website (S/o to the GOAT), which you can find in this link here: https://www.howtocanvas.com/theme-editor/flipcard
The Flip Cards look great, but I'm struggling to make them keyboard accessible. I've tried adding tabindex="0" to the HTML, but every time I save the page, the tabindex disappears. When I use inspect on Google Chrome though and enter it into the HTML, the tabindex feature works.
I'm wondering if the Canvas LMS doesn't support tabindex? I looked at the Canvas HTML Editor Allowlist page, but I didn't see the tabindex attribute, so I'm assuming this is the case.
Does anyone have any thoughts or ideas on how to troubleshoot this?
Any and all feedback is greatly appreciated.
Thanks!
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I don't think I have any good news regarding how to make that interaction accessible. I looked into whether there is any way to set the tabindex using internal css, but my suspicion was confirmed that it's not an attribute that can be manipulated by css. Someone on stackoverflow offered some vanilla javascript, but it seemed complicated and susceptible to breaking.
The allowlist was last updated some 3 years ago and I may petition that the developers expand that, as it seems a great many interactions I would like to build in Canvas are whitewashed and I try to keep my tinkering with internal css to a minimum.
