0

This is a question about the interaction between navigation via keyboard (tabbing) and initially-hidden navigation items. I’m asking from both a UX and accessibility perspective.

My site has a slide-out menu at ‘mobile’ viewports (slides out from the left when triggered by a hamburger button). So, my question is:

What would your expected behaviour be if/when the tab sequence reaches the navigation menu WITHOUT the user having explicitly revealed the menu via the hamburger? Would you expect it to:

  1. Reveal/open the navigation menu and place focus on the first menu item (essentially the same action as if they’d triggered the hamburger)? or
  2. Skip the nav menu entirely and go straight to the page content?

Currently I’ve yet to implement either option, which means that users can tab into the nav menu but not have it revealed, which of course is terrible (leaving them tabbing around in the dark, so to speak).

(Between the hamburger and the navigation menu — in the source order — there is also a ‘skip navigation’ link (hidden until focused) which adds extra decision-routing complications, but in the interest of keeping this to a single question let’s ignore that for now).

2
  • If the navigation is skipped, how would users who are keyboard-only access it? – Izquierdo Mar 12 at 15:57
  • Tab to the hamburger, press enter to trigger it, menu opens. The scenario I'm exploring is when people tab PAST the hamburger and reach the menu whilst it's closed. – RickL Mar 12 at 16:00
0

Option 2 is expected behaviour. It would be unexpected for the menu to open if a user decided not to click the button to open it (as otherwise why have a button at all?)

Also having a "skip navigation" link between the menu button and the menu on mobile makes no sense (as not opening the menu is the way of skipping the navigation) so make sure you add display: none to it on the mobile variation of the site.

I would also examine whether "skip navigation" is needed on the desktop version of the site in it's current location, or whether this should be moved before all other content and changed to a "skip to main content" link instead, but without seeing it that is hard to say (just something to consider).

4
  • Thanks! I had considered moving the 'skip' link as you suggested; jury's still out on that one. Regarding your question "why have a hamburger button at all?", well, the question talks about tabbing through the page but of course that's less available on a phone (no tab key) so users will still need a way of triggering the menu. It could be argued that phone users don't 'navigate by keyboard' in the same way that desktop users can, but phone-based assistive tech might provide the means(?). I guess in this scenario I'm mainly catering to people using a regular keyboard but on a small screen. – RickL Mar 12 at 13:52
  • So on a mobile there are several ways people navigate, one popular way is by swiping left / right to jump from item to item (so they will discover your menu button & as long as it is properly marked up they will know they can interact with it). That is very similar to tabbing with a keyboard so the principles are very similar. The other popular way of navigating is "scanning" where a usre runs the finger over the screen and it tells them what is beneath their finger. Obviously in that scenario you have no way of triggering the menu popping out automatically so it is less relevant. – Graham Ritchie Mar 12 at 14:01
  • Graham, are you describing navigation techniques (swipe to jump items, scanning with the finger) made available by accessibility features on the phone? Or in general? – RickL Mar 12 at 16:07
  • These are phone specific (or should I say touch screen specific). However the general rule of focus order applies to both using the tab key and swiping left and right to focus next and previous items on a touch device. And yes, they are accessibility features (screen readers) that use this functionality. youtu.be/qDm7GiKra28?t=68 shows how VoiceOver is used and both navigation techniques within about 2 minutes, the same principles apply on a web page. This is obviously a very simplified explanation as there are things like the rotor to account for etc. but should give you an idea. – Graham Ritchie Mar 12 at 16:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.