Dropdown Menus in Nav are NOT Keyboard Accessible

[switchboard]

Hi friends, we have users with disabilities who aren’t able to access dropdown nav items via their keyboard. When you tab/focus through the buttons on your keyboard, you’ll see it skips the dropdowns altogether.

Resource Training & Solutions | Central Minnesota Service Cooperative

https://preview.webflow.com/preview/resourcetraining?utm_source=resourcetraining&preview=80e3b1ceb624120dc926ed89810f4187

There’s a slight urgency to fixing this issue as government agencies and large businesses in Minnesota are starting to be sued for not being ADA compliant.

I’ll take any insights you’ve got! If it can be done without custom code, obviously that would be magical… but at this point I’m open to any option.

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[mistercreate (Micah Johnson)]

Hi @switchboard,

Thanks for posting, and there may be a few community members that may help you with becoming ADA compliant:

Need help with ADA compliance

Anyone in the U.S available for hire? I responded to two of the previous replies- both were in India, and both completely flaked… Looking to hire someone IMMEDIATELY who can help to ensure my various websites are ADA compliant. I’ve done all the basic and novice work, but I have a number of small, but more expert, challenges to solve here in Webflow. Please hit me up asap

Perhaps, @PixelPanda, @andy1, or @Devflow could help

[switchboard]

Thanks for the resource!
I still want to throw it out to the rest of the community: has anyone solved this issue within the Webflow product? Thanks, all.

[CuriousChip]

ADA compliance and accessibility is not something that should be treated as a special case that requires a consultant to be hired to deal with (at least for basic designing issues). Webflow should be doing more to ensure that their pre-built components do not present accessibility issues, and, at the very least, if they do people should be warned about that and advised on alternative options. Accessibility should be treated as a standard part of the design process.

[mistercreate (Micah Johnson)]

I completely agree. We know that to make it easier to design websites & democratize the web - ADA compliance is important. We also support Web Content Accessibility Guidelines

At the moment Webflow does not have any certification for being ADA compliant, however our goal is to make Webflow accessible for all, but we do not have any specific features that address ADA compliance in place at the moment.

You can improve your site’s accessibility by structuring the design and content in a way that’s friendly to screen readers and other assistive software. These steps make it easier for visitors with vision and movement impairments to access your content.

Though we can’t provide advice about making your site compliant with specific web accessibility laws or acts, we do understand the importance.

Though I myself have not used the following resource, the following URL may be helpful: https://www.boia.org/free-ada-website-accessibility-report

[switchboard]

Hey all, I came up with a simple solution to THIS specific issue. You’ll see that you can now tab through all the nav links, including the dropdowns: https://www.resourcecoop-mn.gov/

My solution:

1. When you first insert a dropdown item into your nav, it defaults to a plain text link header.
2. Swap out this plain text with an actual, live text-link from the left-hand panel, making it instantly accessible to someone tabbing through nav links with a keyboard.
3. Link it to an interstitial page that lays out the options in the dropdown menu. It’s an extra step for keyboard users, but it works!

[Siton_Systems (Ezra Siton)]

@mistercreate webflow team can change attribute (by code) like w--open the aria-expanded="true" & false (very simple). The only complex thing her is the keyboard control (Other ideas solved by simple markup).

@switchboard You set as forum solution not Accessible dropdown (Your answer) + what about drop-downs open on hover. Of course its better than nothing.

This example:
https://www.resourcecoop-mn.gov/
Is not fully Accessible (Maybe its ok only beacuse in this site under “About” page you find links for all dropdown pages - but in 99% of the sites this is not the case + a lot of times the dropdown toggle is not clickable).

For such solution you can use “tabindex” (set the logo to index 0, navitem1 to 1, navitem2 to 2 and so on).
https://www.w3schools.com/tags/att_global_tabindex.asp

[switchboard]

Thanks for the reply. Yup, this was definitely a workaround that seems sufficient for this particular scenario (where there are only a few subpages I need to represent for each dropdown).

I can’t figure out how to open the dropdown using only the keyboard, even when using “tabindex” to allow a user to focus on it. It would be great to have it built into the default Webflow elements.

[Siton_Systems (Ezra Siton)]

Its hard to solve this. I am also trying to solve this - but its only by custom JS code (Its not just enter but also up/bottom buttons + focus handle + close on esc + aria labels).

Webflow team really can solve this (30-50 lines of code). Its harder to manipulate component

[jbleroux (Jeremy)]

just for clarification are you changing the class or subclass to tabindex?

This is definitely a frustrating point for webflow dropdown menu’s I’ve tried different workarounds. I’ll have to try these two next time.

thank you
Jeremy

[jbleroux (Jeremy)]

Anyone found a solution for this? The interstitial page will work but it’s an extra page for no reason. That in my case would have no content on it.

I’ve tried adding attributes to the webflow components but that does not seem to work. I’m expanding the dropdown menu further on a project and would like to be able to have it be accessible. Without creating 3 interstitial pages. @Siton_Systems did you come up with a js workaround?

Jeremy

[Siton_Systems (Ezra Siton)]

For some client i made custom code.

See her:

Webflow - accessible dropdown

Accessible is very important issue. DEMO 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 …

Demo:
http://bg-153eaa.webflow.io/dropdown-accessibility

Not working well on firefox.

[jbleroux (Jeremy)]

Thank you.

I’m trying this button method without code. I’m pretty much there I just need to make sure my labels are correct. It’s inelegant and not sure about doing a multilayered one. But my result is keyboard accessibly with tabs but not arrows. I would think that webflow would be able to fix this quickly but I guess the problem lies in being able to manipulate all of the webflow pieces and then be able to break them. It kind of looks like the solution lies in replacing the dropdown icon with a button though.

https://www.w3.org/WAI/tutorials/menus/flyout/

always
Jeremy

[Siton_Systems (Ezra Siton)]

Sorry no way to solve this (This is very long mission). I hope my code (In “beta”) will solve “all” webflow dropdowns.

No way to solve this without code.

[jbleroux (Jeremy)]

Ah i see Ezra there is now way to have the tabbed menu toggle. Even if building a button trigger. It will open the menu but it won’t be able to be accessed without code

Thanks I have a clearer picture now.

Do you have the preview link available so I can see the code?

always
Jeremy

[Siton_Systems (Ezra Siton)]

The code - is her:

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

Open by tab, by enter, by arrow down/button, close by esc and so on.

The code related to webflow dropdown component (Not for any dropdown).