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.
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 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.
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.
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.
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:
When you first insert a dropdown item into your nav, it defaults to a plain text link header.
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.
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!
@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).
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.
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
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?
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.
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?