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

3 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>
5 Likes

Way cool! Thank you for sharing!