Streaming live at 10am (PST)

How to build an accessible dropdown in Webflow with custom code

Update Juny 2020.
Webflow improves the dropdown (and other components):

Now, no need for the code below :slight_smile:

codepen

5 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://discourse.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:

2 Likes

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?

Update Juny 2020.
Webflow improves the dropdown (and other components):

It’s ok to “remove” my code CDN now (And use webflow code).

Hi Ezra
Hope all’s well with you. Many thanks for letting me know. That’s really good of you.

I saw the post from Webflow yesterday so exported a site to try out, but for some reason the keyboard doesn’t drive the dropdowns with the [Tab], it still skips over. So I emailed support with some example links. Hopefully will hear soon.

All the best.
Mike

1 Like

What’s also interesting is that the Webflow Accessibility promotion page page dropdown doesn’t seem to work using the keyboard. I tried the [Tab] key after page load and it jumps from ‘Webflow’ to ‘Blog’ and completely ignores the dropdowns.

That’s said, I’d love to know how this dropdown is written. Especially the ‘Resources’ dropdown. We’re using the standard dropdown with a vertical list of page links.

Maybe @brjohnson might want to comment on why keyboard access doesn’t seem to be working in case I’m missing the point :slight_smile:

Good catch - we’re actually in the process of building out a new keyboard accessible navigation as we speak. As for our current nav, you can see an example that’s similar for how it’s built.

1 Like

Hi Barrett

Ah, that solves the mystery, and thank you for coming back on the post. We’ll wait with baited breath for the update.

Regarding the nav. I can see it’s similar but couldn’t find a way to see it in the Webflow Desktop. However I’m not sure this version would help too much as it’s not mobile friendly. If there’s any way, perhaps, just the drop down on the Webflow Accessibility promotion page could be made available I’d really appreciate it. I’m going to be out until Aug 10th so no rush at all.

1 Like

Hi @brjohnson
Is there an ETA for keyboard accessibility for the drop-down navigation?