0

We have this top bar on the page and the menu is on the left

We have this top bar on the page and the menu is on the left. Every page has lots of content within it (could have 100+ tabbable elements).

For screen users, they have shortcuts to invoke the navigation.

But for motor disability users or people who want to use keyboard only, it's very inefficient to navigate between pages, as when they are done with a page they might be at the bottom of the page and have to use shift + tab to go all the way to the top to go to another page.

Anyone has seen any webpage has a quick way to open the navigation menu by keyboard no matter where you are on the page? I know pressing 'Home + End' to the top or bottom of the page, however, the focus remains at where you were previously, so when you tab again it jumps back to the next item you were on. I'm reluctant to introduce custom keys as that might conflict with screen reader/browser or system shortcuts.

This is not a programming question, not related to coding. I'm looking for a good practice suggestion.

closed as off-topic by Shreyas Tripathy, Michael Lai Apr 26 at 22:46

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Shreyas Tripathy, Michael Lai
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Hello and welcome to this site. If I understand correctly, your question is about how keyboard focus can be implemented programmatically and is thus not for this community. In fact, a similar one has already been answered on StackOverflow. I've also proposed that your question is moved there by admins. Please, do clarify in comments if I misunderstood anything. – mapto Apr 24 at 8:00
  • Not really, I want to see if there is a common accessibility practice to handle this. – Nicola Guo Apr 24 at 12:12
  • Could you please give a sample scenario of the behaviour. To me it seems that you are unnecessarily bringing together keyboard focus and window scrolling. It is browser default behaviour that focus is at the first element when you load the page. When you select something, it is also default behaviour that the focus stays there. As far as I can tell, this is invariant of your scrolling, given that you don't do a deliberate action to change the focus. Please clarify. – mapto Apr 24 at 13:42
  • Maybe somewhere here - didn't find this particular key function immediately: w3.org/TR/wai-aria-practices/#kbd_common_conventions – virtualnobi Apr 26 at 9:16
2

I think that kind of question needs more technical answers, but I read about this a lot of times where researching about UX in forms in a previous design, so here is my thoughts.

More than a convention or a solution, there are some attributes in HTML5 like tab-index and autofocus which can serve the purpose you're looking for. You have to think the best way to exploit this because you can change your web into some kind of unusable experience very quickly.

Good practices in a11y advice in having an easy flux with the tabs because some people with motor skills use only the keyboard (for an example). Another case could be blind people with screen readers.

You can read about how to technically use this here.

I hope it helps!

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