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 Print This Post
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?

screen shot of highlighted linkIf 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.
Get usability and design tips

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.

6 Comments - Post Yours

Get a detailed anaylysis of your website: BWI's Web Usability and Design Analysis

Just Posted! Validating HTML Killed a Plugin

Related

Category: Usability & Design Tags: , ,

6 Comments on “Navigating by Keyboard”

  1. Pavan Kumar says:

    That’s a good remainder… Even a slash [/] also brings up quick find bar.

  2. I think the mouse would be replaced with a simple device within couple of years. So navigation would be more easy than now…

  3. 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.

  4. Really cool…is this compatible back to IE6?

  5. It is compatible with IE6, including the navigation methods.

  6. Nice, im used to the classical “ctrl + F”, now i have 2 more options

Leave a Comment

Subscribe without commenting

Return to top of page