How to build an accessible dropdown in Webflow with custom code

Siton_Systems · May 12, 2019, 1:30am

Update Juny 2020.
Webflow improves the dropdown (and other components):
https://webflow.com/feature/most-commonly-used-elements-now-keyboard-and-screen-reader-accessible

Now, no need for the code below

codepen

Siton_Systems · May 12, 2019, 2:42am

Github

github.com

Ezra-Siton-UIX/wb-dropdown-accessibility/blob/master/dropdown-accessibility-siton.js

const ENTER_KEY_CODE = 13;
const DOWN_ARROW_KEY_CODE = 40;
const UP_ARROW_KEY_CODE = 38;
const ESCAPE_KEY_CODE = 27;
const TAB_KEY_CODE = 9;
const SHIFT_KEY_CODE = 16;
const KEYCODE_MOVE_END = 35;
const KEYCODE_MOVE_HOME = 36;

$(".w-dropdown-toggle").each(function() {
  /* Keyboards Event Part 1 of 2 */
  /* Click events for the "dropdown toggle button" */
  $(this).keydown(function(e) {
    /* IF enter click (toogle menu) */
    if (e.which == ENTER_KEY_CODE) {
      console.log("1");
      toggleAccessibilityDropdown(this);
      toggledAriaExpanded();
    }
    /* IF click on TAB_KEY_CODE & menu not open ==> Open Menu */

This file has been truncated. show original

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>

Noah-R · May 26, 2019, 6:49am

Way cool! Thank you for sharing!

pnewest · September 24, 2019, 2:59pm

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!

pnewest · September 26, 2019, 8:44am

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.

CuriousChip · September 26, 2019, 10:03am

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.

pnewest · September 26, 2019, 10:17am

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.

Siton_Systems · September 26, 2019, 10:27am

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)
https://stackoverflow.com/questions/38844412/key-down-event-of-are-not-working-in-firefox-but-working-in-chrome

I hope to fix this later on

pnewest · September 26, 2019, 10:40am

That would be fantastic, thank you . 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.

Siton_Systems · September 26, 2019, 10:46am

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

CuriousChip · September 26, 2019, 10:54am

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.

pnewest · September 26, 2019, 12:36pm

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

Siton_Systems · September 26, 2019, 12:44pm

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

pnewest · September 26, 2019, 12:52pm

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?

Siton_Systems · July 25, 2020, 4:45pm

Update Juny 2020.
Webflow improves the dropdown (and other components):
https://webflow.com/feature/most-commonly-used-elements-now-keyboard-and-screen-reader-accessible

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

pnewest · July 25, 2020, 4:55pm

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

pnewest · July 26, 2020, 5:18pm

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

brjohnson · July 27, 2020, 1:38pm

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.

pnewest · July 27, 2020, 2:14pm

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.

pnewest · August 14, 2020, 3:20pm

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