Why

I don't think I need to say anything about why we want to use the keyboard over a mouse: All the geeks love it, and it's just more efficiency. However when we come to web visiting, it is not easy to just use our keyboard. Of cause we can use text based browsers like links, w3m, or lynx, they are totally keyboard driven, but they also missed lots of good stuff on the web: the images, the videos, the cool AJAX thing, etc. Today we'll use the full featured Firefox, and make it to be fully comfortable to use with your keyboard.

 

 

First things first: How to select links with keyboard?

Because the nature of web page design, many designers won't pay attention to make their pages suitable for keyboard navigation, for example, many of them won't consider tab sequence. So using the tab key hardly work. One feature that catch many eyes when Firefox was yang is its Find As You Type. You can type in a string in an active Firefox window, and Firefox will find the phase you typed in the page. You can set if you want to find in all the text or in the links only. One trick: If you type a ' before type in other characters, Firefox will only find links with that phase in (We'll find out why this is handy later). So, we can easily locate links that are marked as a text. However, what about the links with an image? For example the many menu systems on the web? First we will need to mark the links with some characters, and then we'll type in the characters to choose the link. There are some Firefox extensions can do this, and from my point of view, HaH is the best. HaH is a short for "Hit a Hint". And it will allow you to hit a hint :) There are two modes in HaH: the normal mode, and the magic mode. For normal mode, you can hit the H key, and all click-able stuff will be marked with some numbers and characters. You can type in the characters on the link you want to follow, seeing the mark got highlighted. And then you can hit the RET key to follow that link. If you find out you made a typo, don't worry, just type H again and all the marks will disappear. You can enable them again and type in the correct one. For magic mode, you can just hit the magic key (SPACE by default) and hold it, again the marks will appear, now you can type in the characters while holding the magic key, and when you release the magic key, the current link, which is highlighted, is followed. This takes less key strokes and I find it quite comfortable. Besides the magic key, another feature makes HaH the best is that we can configure what characters will be used for the mark. Others might just use the number keys, or maybe use the numpad. However number keys are hard to type, and some times, for example, when you are on a notebook, you don't have a numpad. My personal favorite is "asdfqwer", which are on the main area of the left hand. So I can hit the magic key with right hand, hit the hint with little move of my fingers, optionally hold the ctrl key for open in new tab, and finally release the magic key to follow the link. Another reason to choose HaH is its efficiency: most others will mark all the links in the page. HaH will only mark those that are visible. This makes HaH more efficient in two ways: * Marking part of all the links takes less time, this is significant when viewing large documents, like a manual. * The marks use less letters, which results in less key strokes. Take my "asdfqwer" as an example, The first eight links visible will always be marked with only one letter, and the following 56 links will be marked with two letters. I seldom need to type three letters to find a link and never used four.

 

 

Make it more comfortable: Next Please!

Having keys for all the link is cool, but sometimes we want more: For example, when we are on Google or some sites that split a long article to several pages, most time we just want the "next page" link. And well, some times the "previous" page :) And NextPlease is exactly what we want. By default it can find the right next link on many sites, and if it didn't find one for you, simply right click on the link and select "mark as next" and it will learn what to do, and remember it. So the next time you are on this site, you are all set :) It is extremely useful when reading documents, specially those auto generated. You can almost read with only one finger.

 

 

And the neighbors: What other choice do we have?

If you like the build in Find As You Type way, you may find yourself typing Ctrl-g (for find-next) many times. For this Unique Link Names could help you. It will add two random characters at the beginning of non-unique links or similar link names. This makes the page a little ugly, but keyboard navigation with Find As You Type becomes quite efficient. As we said above, there are other extensions that works like HaH: * NumberFox mark the links with numbers * Mouseless Browsing makes good use of the numpad Just try them out and see if you like them.

 

 

Make it your way: use keyconfig to configure your own key bindings

Well if you are really a keyboard lover, after settle down the problem of selecting links, you'll want to do everything with your keyboard: calling menu items, switch to the next tab, etc, and customize the default key bindings to fit your style. For this, keyconfig is a must. After installing it and restarting Firefox, press Ctrl-Shift-F12 and the main configure window will show up. Here you can find all the functions that are available for a shortcut. You can assign new key bindings to a function, resolve shortcut conflicts (a primary reason "why this keyboard shortcut won't work for me"), and even write your own functions and assign a key shortcut for it. This, makes Firefox catch up the customization level of Emacs, just with Javascript instead of elisp :)

 

 

Keyconfig friends: Functions for keyconfig and surfkeys

Well keyconfig is good, sometimes some "common" functions are not build in. Don't worry, you won't need to do Javascript programming if all you want is the "common" ones. There a two extensions that are best friends of keyconfig: they provide the most commonly used functions with rarely used keyboard shortcuts, so you can assign the keyboard shortcuts you like to the functions you want, easy, just as any other build in functions. And they are: functions for keyconfig and surfkeys. In the keyconfig main menu, you can sort the functions with their names (the first column). All functions from functions for keyconfig start with f4kc_ and those from surfkeys start with sk. Note there are some duplicates from these two, you can use either one you like. Or, you can set different shortcuts to similar functions, for example, j for skScrollDown and Ctrl-n for f4kc_ScrollLineDown, so both Emacs users and VI users are happy :)

 

 

And more for Keyconfig: some more functions

And finally, if you still didn't find the right function you want, you may need to start doing Javascript programming. But before that, here is a list of what I've got. Some were written from scratch, and some were copied or modified from the Internet. This will focus the content, in case you don't know where the keyboard focus is: _content.focus(); This will paste what is in the clipboard into the location bar, open it in a new tab, and focus on that tab: var paste = readFromClipboard(); if(!paste) return; gBrowser.selectedTab = gBrowser.addTab(paste); If you don't want to focus on the new tab, use this one: var paste = readFromClipboard(); if(!paste) return; gBrowser.addTab(paste); In the Firefox options dialog you can choose if you want to focus on the tab to the right of the current one or the last visited one after closing a tab. This snip will focus on the one to the left of the closed one: var tab = gBrowser.mCurrentTab; if(tab.previousSibling) gBrowser.mTabContainer.selectedIndex--; gBrowser.removeTab(tab); The following four will move the location of the current tab, on the tab bar list, useful if you have a lot of tabs and want to organize them. To the end: gBrowser.moveTabTo(gBrowser.mCurrentTab,gBrowser.mTabContainer.childNodes.length-1); To the beginning: gBrowser.moveTabTo(gBrowser.mCurrentTab,0); To the left: if(gBrowser.mCurrentTab.previousSibling) gBrowser.moveTabTo(gBrowser.mCurrentTab,gBrowser.mCurrentTab._tPos-1); And to the right: if(gBrowser.mCurrentTab.nextSibling) gBrowser.moveTabTo(gBrowser.mCurrentTab,gBrowser.mCurrentTab._tPos+1); And if you are using Separe to help organizing your tabs, this will open a new Separe for you: SepareBrowserOverlay.newSepare();

 

 

Deal with the forms: Mozex

Nowadays the web becomes more and more interactive, and we need to fill more and more forms. Though we can use DEL, backspace, and arrow keys to do basic editing there, the textarea are always too small to be comfortable with and don't have those cool shortcut keys we like. Note: for Emacs users on a Unix like system: put the following two lines (You may need to change the path name of the first line to fit your system): include "/usr/local/share/themes/Emacs/gtk-2.0-key/gtkrc" gtk-key-theme-name = "Emacs" into your ~/.gtkrc-2.0 file and you could get some familiar key bindings in the testarea. But what about all the other users? Mozex is an extension that can call external programs within Firefox. We will just use its ability to handle textarea here: Open the setup dialog of Mozex and go to the Textarea tab, here you can specify your favorite editor, and among many other options, you can set the hotkey for it. Now if you want to write a loooong comment, just press that hotkey, and your favorite editor will show up and all your facilities are there. If you do a save in your editor, all what you have right now will appear in the textarea. And if you close the newly opened document in your editor, everything will be in the textarea too. To make this more convenience, if there are more than one textarea in the page, Mozex will popup a window with names of all of them, and you can choose one with the arrow keys and RET. No mouse is needed, everything is handled :)

 

 

The new way to use bookmark: My Portal

Everyone uses the bookmark system. However, navigating the bookmarks with the arrow keys is a suffer, especially if you have a lot of bookmarks. One trick is that you can type the first letter of the bookmark name, Firefox will find the first bookmark matched. And if you hit the same letter again, the second match is focused. Another trick is to use the search function of the bookmark sidebar, activated by Ctrl-B by default. You can quickly find the bookmark with the keyword you want. If there are several bookmark matched, you can hit TAB once and then use the arrow keys to select the one you want. However, sometimes, those are just not enough... My Portal comes handy if that's what you think :) My Portal will make a web page, a live web page, from all your bookmarks. Just type in myportal:// in the location bar and you are there. On this page you can select folders, sub-folders, and bookmarks. All the tools we talked about in First things first: How to select links with keyboard? works here. So, feel at home :)

 

 

GreasMoney scripts to make the life more easier: Linkify Plus, GoogleAutoPager, and pagerization

GreasMonkey is, well, Grease Monkey :) It allows you to customize the way webpages look and function. (from the official web site). It is another extension that makes Firefox catch up the customization level of Emacs. Among the several thousands scripts available, lots of them can help our Firefox life with keyboard. Here are two that I find useful: * Linkify Plus will make URLs in plain text into links. That is, this text: http://www.mozilla.com/firefox is an URL, but you can't click it with a mouse or follow it with the keyboard, cause this is not a link. Linkify Plus will search the whole page, and make anything like this into a link. So again, all the tools we talked about in First things first: How to select links with keyboard? are available. And we can easily follow this URL with our keyboard. * GoogleAutoPager, and pagerization are doing the same thing: Instead of making the next page available with a key stroke, like what NextPlease does, they automatically fetch the next page, and append it at the end of the current page. So when you are scrolling down, no matter what keyboard shortcut you are using, the next page just shows up :) The difference between these two is that GoogleAutoPager only works on google.com, and pagerization works on many other sites. You are fine most of the time if you only use pagerization, however if you also use some of the Google experimental features, well, at least for now, you'll need GoogleAutoPager too.

 

 

To make these all together

OK, after making all these tools together, now with Firefox, we can follow links, access functions, use bookmarks, arrange tabs, and we have many tricks to make our web life with keyboard easier. Now the only thing left is how to do Right Click with keyboard. Crazy? Shift-F10 will do some help on most systems, but it is not context sensitive, that is, it won't take where the mouse pointer or keyboard focus is into consideration. If you know a solution, please let me know :)

 

dryice at dryice dot name

 This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
              

This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License.