Or: Why Keyboard Navigation Matters More Than You Think
You’ve probably used the Tab key before.
But have you ever tried to use it to do everything?
Because for some people, that’s not a backup plan. That is the plan.
Not everyone uses a mouse, whether due to mobility impairments, chronic pain, tremors, or using assistive tech like switches or voice control.
And yet, most websites are built as if everyone does.
The Keys to the Kingdom
Keyboard navigation isn’t complicated.
It mostly runs on just a few keys:
- Tab moves you forward through interactive elements
- Shift + Tab moves you backward
- Enter activates buttons, links, and menus
- Arrow keys help navigate dropdowns, sliders, and menus (when built properly)
- Spacebar toggles checkboxes and pauses/plays media
For users relying on switches or voice control, these commands are the foundation.
They don’t have a cursor – they have keys.
And those keys better work.
Can You Tell Where You Are?
Here’s a question that changes everything:
Can you tell where you are?
You’re reading a page. The phone rings. You answer it. You come back.
What’s the first thing you look for?
When you’re using a keyboard, you rely on one thing: focus. That tiny visual highlight tells you where you are on the page.
No cursor. No hover. No magic mouseover glow.
Just focus.
If it’s missing? You’re lost.
If it’s unclear? You hesitate.
If it jumps around or makes no sense? You give up.
What Even Is Focus?
Focus is a state. When an element – like a link, button, or form field – is focused, it becomes active.
It’s the thing your next keyboard command will interact with.
Think of it as the spotlight on stage:
You can’t see the whole set, but always know what’s in the spotlight.
No spotlight = no idea what’s going on.
So what happens when that spotlight disappears?
Or jumps around the stage at random?
Or shines on the wrong thing entirely?
The answer is: confusion.
Frustration.
And sometimes, failure.
Focus Order: It’s Not Just a List
Focus order is the sequence of elements you move through when you press Tab.
That order should follow the visual layout of the page – top to bottom, left to right (in left-to-right languages).
It should match the expectation created by how your site looks.
Think of it like reading a paragraph.
You expect the words to flow in order.
If you had to read like this?
“Click here to…
…Next enter your…
…Go back to the top…
…Password…
…Oh, now your name…”
You’d give up. Fast.
That’s what it feels like when focus jumps around the page.
Focus States Perform a Function
Focus isn’t just a visual cue.
It’s a functional element of navigation.
It tells you where you are.
It lets you check your position quickly – especially after distractions.
It gives you confidence before you press Enter.
This is how users reorient themselves.
After a popup. After an interruption. After a reload.
This is how people know what’s going to happen next.
And when you take that away?
You don’t just break the flow.
You break the experience.
The Oreo Cookie of Focus Indicators
(Universal Focus State, by Erik Kroes)
When it comes to focus, clarity is king – and Erik Kroes’ Universal Focus Indicator might just be the crown jewel.
Known affectionately as the Oreo, it’s beautifully simple:
- A thick white inner outline
- A solid black outer border
- Easy to see. Impossible to miss. On any background.
It’s bold. It’s consistent. It works.
And it looks like an Oreo.
If your focus state is a soft glow, a faint dotted line, or worst of all – nothing – you’re not helping anyone.
Button, Button, Who’s Got the Button?
If your homepage teaches me that the pink lozenge is a button, it better be a button everywhere else too.
When users learn a visual language – like a specific shape or color = button – they build expectations.
Break that pattern, and now we’re guessing.
That’s a button.
That’s a button.
That’s… not a button?!
Don’t tease me like that.
Consistency matters. Especially for users who rely more on pattern recognition than visual detail.
Go Big or Go Home
(I need to know where I am)
This is why we go big with focus states:
Thick outlines. High contrast. Clear shape.
Focus is your compass.
Your orientation tool.
Your reassurance that you haven’t lost control.
And when that compass disappears? You’re adrift.
Keyboard Traps: Don’t Be That Site
Let’s talk modals. Popups. Dialogs.
You open one. Try to leave. You hit Tab.
And then: nothing. You’re stuck.
Tab loops inside the modal. Escape does nothing.
You can’t get out.
That’s a keyboard trap.
Good modals should:
- Move focus into the modal when opened
- Trap focus inside the modal while it’s active
- Return focus back to the triggering element when closed
This is not rocket science. But it is accessibility.
Who Uses Keyboard Navigation?
More people than you think:
- Blind or low-vision users using screen readers
- People with motor impairments or tremors
- People avoiding pain from repetitive strain
- People with temporary injuries (hello, broken wrist)
- Parents holding a baby in one hand
- Developers testing layouts
- You. Right now. Because I told you to.
Keyboard navigation isn’t niche.
It’s everybody.
How to Test Your Site (for real)
Want to see how your site holds up?
Load up your website.
Put the mouse down.
Press Tab.
Can you:
- Reach everything?
- Always tell where you are?
- Follow a logical path?
- Escape popups or dialogs?
- Do all this without guessing?
If not? You’ve got work to do. (But the good news is: now you know.)
Bonus Round: Switch Access
Some people don’t even use the whole keyboard. They use a switch – a single-button device that moves focus one step at a time.
This is slow. Deliberate. And totally dependent on:
- Solid focus order
- Clear interactive elements
- No nonsense.
Design for them, and you’re designing for everyone.
This Is How We Build Better
You can’t click what you can’t reach.
And for millions of users, this is how they use the web.
Designing with that in mind doesn’t just make your site accessible – it makes it better.
More predictable. More comfortable. More human.
So pour yourself a coffee.
Put away the mouse.
And give it a try.
Let’s give everyone the keys to the kingdom.