Navigation challenges  

One of the most important parts of a website is the navigation. People need to find the pages they want and most will use a mouse.

Have a look at the simple example on the right.

The 'About Us' page has sub-pages underneath, shown by the triangle next to it.

The sub-pages all appear below, you move your mouse down, it changes colour on the page you want. You click on it and you are away. Easy.

Mouse-less challenges

Let’s say you can’t use a mouse.

What then?

Some people can’t use one because they’re visually impaired.

Others struggle with fine motor control.

In both cases, they use a keyboard instead.

I’m clumsy and I’ve been using computers since before mice were invented. I will take keyboard shortcuts any day.

Using a keyboard

So how do you navigate a website with a keyboard?

It comes down to just 2 keys that you can test this yourself next time you are on a website.

The Tab key and the Enter key.

The Tab key is used to navigate and the Enter key is used to perform an action.

Stay focussed!

Do you remember how the page link turned blue when the mouse hovered over it?

Well, when you use a keyboard, you may often not see that happen, it is great when you do, though.

However, a lot of neurodivergent people have issues seeing certain colours, so what you should always also see is some kind of outline, so you know where your focus is.

I hit the Tab Key once and I know where I am

Focus is what gets selected when you press Enter. 

Here, the focus is on the About Us page. 

With a mouse, the sub-pages appear when you hover. 

With a keyboard, you just tab along the top and press Enter to open a sub-page.

Now I pressed the Tab Key a couple of times and we are over the page we want. We hit Enter to select.

Tab to navigate, Enter to action, whether that is opening further sub-pages or selecting the page.

This is generally accepted as best practice.

Previously it was accepted wisdom that you can just use the Tab key and it will go through every page and sub-page in turn.

However, as menus get bigger and longer, it gets very tiring to have to do that each time, so Tab and Enter is the better way.

Remember, the dashed outline usually only appears if you are using a keyboard, not a mouse.

If you are able to navigate a website as easily with a keyboard as you can with a mouse, you will see long-term benefits to you in terms of customer loyalty and their spend with you!

This is because you have made it easier for them to navigate around your website!

Obviously really....

Related posts  

Clive interviewed on Vectis Radio

Ban Cookie Banners

Some inaccessibility stats