Imagine you’re browsing a website on your computer.
[the website is all about cats]
I bet you’re pretty reliant on your mouse for clicking on things. I know I am!
But what if you couldn’t use a mouse… How would that work?
Like this!
[the website now has a red highlight box, over the first interactive element on the page]
This is keyboard navigation, sometimes called “tabbed browsing”.
The Tab key steps through every part of the page that can be clicked on, and the Enter key acts as a left mouse click.
Sounds simple, right? It can be, if the site is designed with this type of user in mind.
Here’s a common problem:
[the Tab key is pressed repeatedly, but the cat website has no visible highlight box]
Can you tell where we are on the page?
[The Enter key is pressed, and we see a webpage full of dogs. Nothing but dogs.]
Well I wasn’t expecting that!
The box around the clickable item should be obvious, so that users who are navigating your site using their keyboard can see where they are.
[we now see a very bright red highlight box on the page]
Now, you may be thinking: that box is UGLEH! It does NOT go with my site design!
Do not worry. It will never be seen by anyone who doesn’t need it.
… It’s true!
When you move your mouse over an element, you get the hover state. You’ve probably seen this a lot.
But that highlighting box isn’t hover, it’s FOCUS. You can only see the focus state and that highlight box if you Tab to it using your keyboard.
Hover and focus are separate, and can be set to be completely different in your website’s code. So make sure your focus state is really obvious with a bright contrasting colour. It won’t change what you mouse-using visitors will see, but it will make your site a lot more friendly to those who are using their keyboard.
Everyone deserves access to the internet. If you need help getting your site up to scratch, visit silktide.com