Streaming live at 10am (PST)

Keyboard accessibilty to navbar with dropdown


#1

I am trying to be a little more cognoscente of accessibility issues when i design. This particular aspect I am trying to figure out is how to make the navigation menu accessible by keyboard. Using “tabindex” I can make that work for the top level. But I am not seeming to be able to use the enter key to open the sub menu so it can be selected. Has anyone accomplished this?

https://preview.webflow.com/preview/bhlfcpa?preview=dbc6c24b137564c1016141d933ad7908
Share link,

I am testing it at the bottom of the styleguide page with a blank Nav

always
Jeremy


#2

Hi @jbleroux!

One of the possible ways to make this is by adding custom code to your project. There are several ways to add custom code, depending on which level code will be available (https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site).

I have created a simple project to try to solve your problem and come up, with such solution. It is needed to add next one custom code in the page section “Custom code”:

If you need this code to work on the whole website - add it in the dashboard custom code section.
If you do not want other dropdowns to close on opening another dropdown, remove these two lines from the custom code provided above:
$('.w-dropdown-toggle').removeClass(opened);
$('.w-dropdown-list').removeClass(opened);


#3

Thank you, I was trying to use custom code. Did you test on a nav bar with a dropdown in webflow? Can I see the webflow project ? So this method is not relying on aria roles? So the code is working on the webflow dropdown toggle not the list. Interesting. I’ll give it a try later thank you very much.


#4

@frontendgirl that doesn’t seem to work with the webflow compnents. I’m not testing anything fancy simply a navbar with a dropdown in it. In theory a few of the code snippets I have tried should work. unfortunately it does not seem to be the case. I’m not sure if the built in navbar script conflicts with it. I may just have to build from scratch but it’s kind of a pain as the mobile menu is already somewhat styled and setup in the nav component.


#5

Thank you, I was trying to use custom code. Did you test on a nav bar with a dropdown in webflow? Can I see the webflow project ? So this method is not relying on aria roles
Read more Toi Ly Son


#6

I have not been able to figure it out yet actually. Though haven’t looked ta it in a while.


#7

Do you have a working prototype of this for a webflow menu? I understand how to use custom code but wasn’t able to get that working. Have you created a dropdown menu that it works with?


#8

Just to throw my hat in the ring. I would also be very interested in a solution for this as we’re getting more pressure to comply with WCAG 2.0 design principles that insist we provide a means to use a keyboard instead of a mouse, so that needs to include drop-down menus.

I also tried the js code on an exported site placed before the ending head tag, but it didn’t work on the drop-down options, just the top level menu (which it did anyway).

If anyone does have any ideas I’d love to hear.

@cyberdave have you come across this issue?

Many thanks

Mike