I have a teacher creating a homepage with a table. On the left hand column of the table is a list of links. She would like to be able to hover over the links and get a drop down menu of choices to click OR be able to click on the choices and get a drop down list to choose from without switching pages.
Could anyone provide some HTML for this or share some homepages with may have some features like this?
Thanks in advance for the help!
I was very excited to find this post and then less so to hear it does not work in the app. We have a template that we are using that is super user friendly but the Mobile version is less so - a dropdown menu would totally fix that. If I work anything out I will let you know.
Has anyone had a chance to check how this works in the Canvas apps? I have a slight tweak of the code running fine in browsers, but it is completely non functional in the app.
Here is my altered code:
<h3 id="index2" style="font-size: 14pt; font-weight: bold; color: #b31b1b;"><a class="element_toggler" role="button" aria-controls="index2pt1" aria-expanded="false" href="#"><i class="icon-arrow-open-right"></i>Clickable Dropdown Text</a></h3>
<ol id="index2pt1" style="background-color: #ffffff; display: none; font-size: 14px;">
Anyone have any ideas how to get it to work in the app?
I haven't had the time to dig into making the toggle solution I posted up-thread accessible, but in theory, you would create eight of those code blocks (a vertical stack of eight toggle menus); you can also put them in flexbox divs. I'm discontinuing their use for non-staff/faculty pages until we figure out the accessibility piece, though.
That @tft article looks like a good place to start.
This is probably the best resource I can recommend to get started.
As I wrote in Aria-controls Is Poop, the aria-controls attribute, intended to help screen reader users navigate from a controlling element to a controlled element, is only supported in the JAWS screen reader. So you simply can’t rely on it.
I'm just starting to tackle this concept too, because our instructional designers aren't web developers either.
I ordered Heydon's book last week, it comes with a PDF and code. There's also an ebook for less.
Not yet--I work at a very small institution and we don't have any accessibility experts or web developers I can tap. I was hoping that because this came from Canvas's own style guide, it would be accessible by default. I will make a project looking into how to retrofit this. (Found a promising article here that I'll start working from.)
Would love to hear from someone more knowledgeable if they know how to fix it!