Navigating with the keyboard

·

3 min read

Did you know it was possible to navigate the web using only the keyboard? You're probably familiar with using the up and down keys scroll up and down. Page up and page down do the same thing, a page at a time. You can also scroll down a whole page using the spacebar. And up again using Shift+Space.

These are useful to know because if you have some JavaScript that does something when a key is pressed, then depending on the key, it might also do something else.

But the keyboard can do more than that. If you press tab on a website it will go to the next (first if you haven't done anything on it yet) selectable element. That will be a link, button, form input etc. If you keep pressing tab it keeps taking you to the next one. To go back, it's Shift+Tab.

Once something is selected you can then type in the input box or go to the link/press the button using the Enter key.

Which could be useful if you already have your hands on the keyboard and don't want to go all the way over to the mouse. But there are also some people who can't use a mouse, so this is how they navigate everything on their computer.

Which means that if something on your page is selectable with the mouse, it should be selectable with the keyboard too. HTML is pretty good and if you have a button element it'll work with the mouse and the keyboard, you don't have to do anything extra. But if you just have a div and a JS listener for it being clicked that's not going to help anyone with a keyboard.

The selectable elements should also be in an order that makes sense. Say you have all your social links at the very top of the page, followed by the navigation, then a hero image, then your content. Where are people going to want to go first?

What if you have a user with a small screen, or their browser set to a small width and the menu has collapsed to a hamburger. Can they open that? Or are they going to be stuck on the home page forever?

These are all accessibility things to think about when creating pages for the web.