Streaming live at 10am (PST)

How to build an accessible dropdown in Webflow with custom code

Web accessibility is very important issue.

DEMO (Use tabs)
http://bg-153eaa.webflow.io/dropdown-accessibility

My code solve this missing features of Webflow dropdowns (Just Copy-Paste “before body”):

Keyboard Support

  • Tab key - Dropdown Toggle and Dropdown Links tabindex = 0 (Otherwise No way to tab/focus the dropdown)
  • Open/Close dropdown by enter
  • If Up Arrow or Down Arrow is pressed, the previous or next option is scrolled into view
  • Esc Button Close dropdown
  • home button (Select first dropdown link)
  • end button (Select last dropdown link)

Aria

  • aria-haspopup - for the dropdown button
  • toggle aria-expanded when show/hide dropdown

“The Problem”

This is “middle solution” (custom code) - VS webflow core solution - more lines of code // more complex + Hard to get support (If webflow overtime change navbar structure maybe this code will break + Not all users know JS).

Anyway - for now no other solution :frowning:

Bugs

Please add her any bug you find. Thanks

Wishlist related:

https://wishlist.webflow.com/ideas/WEBFLOW-I-862
In my opnion to broad wishlist topic (Its better to solve each component).

Solve all the ideas her:
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

codepen

https://codepen.io/ezra_siton/pen/KLMaJb?editors=1111

4 Likes

Github

CDN
https://cdn.jsdelivr.net/gh/Ezra-Siton-UIX/wb-dropdown-accessibility/dropdown-accessibility-siton.js

copy-paste before body (No need to add any class or id under webflow site tree).

<!-- Webflow - accessible dropdown - Ezra Siton -->
<script src="https://cdn.jsdelivr.net/gh/Ezra-Siton-UIX/wb-dropdown-accessibility/dropdown-accessibility-siton.min.js"></script>
7 Likes

Way cool! Thank you for sharing!

Thank you so much for sharing this code. We tried amending the html and css, but never quite got there, and your solution is so easy to add.

I’ve been talking to @cyberdave and looks like there’s lots of WCAG accessibility activity going on at Webflow right now, and Dave is aware of the drop-down issue.

When I first added your JS to a site the webflow.js was quite old and it worked fine. I tried the JS on an exported site yesterday and it no longer worked. The menus dropped then got stuck. So I just copied up the old webflow.js to this site and all was fine again. Might be useful if anyone else has issues.

Anyway - this is fantastic. You might have saved my skin!

1 Like

Hi @Siton_Systems

Further to my post a couple of days ago, I noticed in post: (https://forum.webflow.com/t/dropdown-menus-in-nav-are-not-keyboard-accessible/79263/6) that you mentioned an issue with Firefox (May 12). Was any solution to this found? I noticed in my testing that the first menu opens in Firefox, then tabbing continues down the page leaving the menu open and not continuing in the drop-down. IE11, Edge, Chrome and Opera all seem to work fine.

Any help or advice would be much appreciated. Thanks.

Webflow dropdowns actually are keyboard operable now, but it’s almost useless, since there’s no way to add a focus state to the dropdown without either ruining the look of the navbar for everyone else who is using a mouse, or rendering it inoperable with a keyboard. If you add a focus state via the states panel, the focus state you add becomes visible when you hover over the dropdown, and remains visible when you hover off the dropdown. (I hope my explanation is clear enough!) Or, you can add “tabindex”=0, which gives you the browser’s focus state, but then the dropdown will no longer open by hitting return, defeating the purpose. This is maddening. I’ve been hoping someone has a solution to this problem.

Hi @CuriousChip
A law has just been passed in the UK that all public sector websites, published after 23 Sept 2018, must be WCAG2.1AA. We had zero days notice of this. All sites published before 23 Sept 2018 must be compliant by 23 Sept 2020. So I’ve asked @cyberdave if this can be looked at as an emergency update. Surely can’t be more than a days coding and testing. For now the JS above works fine (except for Firefox - for some reason). I saved as a .js file then called just before the </body> tag and is good to go.

1 Like

In general my code again is more complex (More DOM manipulation VS "solution by webflow team directly to dropdowns code).

If someone finds a problem in this code please let me know (Or open issue under Github). I guess this is the issue her (Looks like firefox keyboards keys diff from chrome)

I hope to fix this later on :slight_smile:

1 Like

That would be fantastic, thank you :grinning:. I probably could have got away with a mention in the accessibility statement on my sites, saying not to use Firefox, but great to avoid where possible.

Can you give me list of bugs you find in firefox? (I find problem only with the tab key idea).

Thanks, @pnewest. Accessibility in Webflow’s components is, and has been, a big issue, and it does urgently need to be addressed. It’s not just the navbar – things like the sliders need to be workable with a keyboard too, and they are not. We shouldn’t be having to fiddle with code embeds for such basic functionality. I’m currently rebuilding a site for a nonprofit, and Webflow’s lack of built-in accessibility in their components is turning out to be a real problem.

I couldn’t agree more @CuriousChip. We export, then break to SSI templates, but a consistent export is so much better than bodge as you go approach. I didn’t realise sliders also had the same issue. We don’t use sliders at present, but good to know to avoid for now.

It would be good if the dropdown function could be looked at generally. A softer dropdown interaction on desktop dropdowns as standard (like it does from the hamburger mobile dropdown) and maybe able to add images would be good.

Here’s hoping the newly appointed accessibility manager has some good news for us soon :slightly_smiling_face:

1 Like

Update September 19:

LOOKS LIKE webflow change the code/structure of the dropdown Sorry - you should write to webflow support to to solve the problem (Webflow core should add this idea).

** No way for me each time to update the code + In my opnion in general the core-dropdown not working well on firefox

Many thanks for looking a this, I really appreciate your help. In the example site I sent I’m using a older version of webflow.js and it’s working fine with all browsers except Firefox. Has something other that webflow.js been changed by Webflow to cause the Firefox issue then?