The Instructure Community will enter a read-only state on November 22, 2025 as we prepare to migrate to our new Community platform in early December.
Read our blog post for more info about this change.
Found this content helpful? Log in or sign up to leave a like!
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.
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.
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.
Appreciate the response DrNufer! Yeah, if you could petition to the developers to expand the allowlist to include tabindex that would be amazing. You know I would support that petition haha.
I think the Flip Cards are such a great interactive feature for users. I'll continue to search for possible work arounds and will update this thread if I find something. I think as long as a screenreader can interpret the flip cards, then I should be fine. Thanks for taking the time to comment though.
Community helpTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign inTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in