Want to Test Your Website?
Learn how to increase visitor action, reduce site confusion for new visitors, and get those new visitors returning back for more! Get BWI's Usability and Design Analysis.
Navigating by Keyboard
By Robert Campbell on Friday, July 25th, 2008
Previous: Where to Look
Next: Business Plan
Have you ever been stuck trying to surf the web without a pointing device? It can be kind of a pain, especially if the webmaster has thrown usability into the wind. I constantly come across sites where they have removed the style from links. What happens when they do?
If they remove the style, you can’t browse their page. Click the tab button a few times while visiting my site. Notice the links getting highlighted? Without that simple little box highlighting wear I am, the site might as well be a screen shot if you have no pointer.
So how do you do it? Just add this bit of code to your style sheet, and you are up and running again.
:focus { outline: 1;}
There are a ton different methods to access the net now a days, and many of them don’t include a pointing device. Regardless of that, how many of you have a laptop where the touchpad works like crap?
Forgot how to browse the web without a pointing device?
- [Tab] scrolls you forward through the links
- [Shift + Tab] scrolls you backwards through the links
- [Spacebar or Enter] is for clicking a form option
- [Enter] to submit
- And for you Firefox users just click [ ' ] single quote, and it will bring up the find bar at the bottom.
Like this post? Get usability and design tips delivered by email straight to you. Full feed articles are delivered, and are managed by Google's Feedburner service.
Just Posted! Validating HTML Killed a Plugin
Related
Category: Usability & Design Tags: Navigate, pointing device, usability







That’s a good remainder… Even a slash [/] also brings up quick find bar.
I think the mouse would be replaced with a simple device within couple of years. So navigation would be more easy than now…
This is interesting – it had never occurred to me to tab through the links. That said, it might not be absolutely necessary to inc. that :focus property since the status bar (at least in my browsers on a Mac) updates with every tab-hit, letting you know which link is now active.
Really cool…is this compatible back to IE6?
It is compatible with IE6, including the navigation methods.
Nice, im used to the classical “ctrl + F”, now i have 2 more options