Accessible Navigation

Community resources Show & Tell
#1

Hi guys,

I’ve been working hard on creating an accessible navigation within Webflow. Hopefully they update the native one soon!

The requirements I set myself were:

  • User can skip navigation with a “Skip nav” link
  • User can tab through the nav and any dropdowns, mobile navs that appear
  • Aria labelling makes sense

What I couldn’t do was to make the mobile nav menu an overlay as there currently isn’t a crossbrowser friendly solution for disabling background scroll when opened. Instead I’ve opted for a relatively positioned nav menu.

Take a look and let me know your thoughts!

http://nbc-ui-kit.webflow.io/

#2

What I couldn’t do was to make the mobile nav menu an overlay as there currently isn’t a crossbrowser friendly solution for disabling background scroll when opened. Instead I’ve opted for a relatively positioned nav menu.

Not sure what your talking about with the whole skip nav, but for the menu overlay prevent scroll you are incorrect you can do that with very little effort.

#3

Hey @Poliigon,

Unfortunately that doesn’t work on iOS. There is a jquery plugin called body scroll lock. This article explains the issue:

Let me know if you manage to implement it!

#4

And this is an article about Skip Links: https://www.nomensa.com/blog/2004/what-are-skip-links

Basically allow a user skip to the main content of the site without having to tab through the navigation.

#5

@JoeDigital works on IOS11, IOS 10, IOS 9, for me… The skip nav is designed primarily for for screen reading devices.