This is a Greasemonkey user script to enable heading navigation in Firefox. Headings can either be navigated by the heading level, for example, all
h2 elements, or by any level.
Author: Gez Lemon
- User Agent Navigation
- Heading Navigation
- Installing the Heading Navigation User Script
- Configuring the Script
User Agent Navigation
Skip links are often thought of as being primarily for screen reader users, but they're beneficial for all keyboard dependent users, including people with mobility problems that are better able to use a keyboard than a pointing device. Screen reader users are more likely to benefit from well-structured documents that make good use of semantics, such as structured headings. For websites that aren't so well-structured, skip links are beneficial to screen reader users as they provide a mechanism for bypassing a group of links.
When documents are well-structured, screen reader users can navigate from heading to heading using h and Shift + h to cycle forwards and backwards through headings respectively, and they even provide a mechanism for people to navigate by heading level. For those not using assistive technology, they're typically not afforded this luxury. Browsers usually provide some kind of mechanism to navigate through a document, such as the Home and End keys to navigate to the top and bottom of a document respectively. Being able to navigate by headings is a useful feature for people with mobility problems, but as far as I'm aware, only Opera provides a mechanism for people to navigate by headings, using the keystrokes s and w to cycle forwards and backwards through the document respectively.
This Greasemonkey user script enables documents to be navigated by headings; either any level, or a specific heading level. When a heading has focus, usual keyboard navigation takes place from the point of focus, for example, tabbing to the next interactive element such as a link or form control. For documents that are well-structured, this effectively negates the need for skip links when using this script, as users can navigate their way past groups of links, without landing half-way down a section where the first interactive element happened to be. Of course, the proviso is that the document needs to make good use of headings.
Installing the Heading Navigation User Script
If you don't already have Greasemonkey installed, you can download a version from the Greasemonkey website. The user script here requires version 0.6.4 or higher. Once you've installed the extension, you'll need to restart your browser (as you do with all Firefox extensions). After installing the extension, point your browser at http://juicystudio.com/services/headingnav.user.js, and you will be prompted to install the script by a friendly looking monkey (providing you've installed Greasemonkey 0.6.4 or higher).
Configuring the Script
The default key used by the script to navigate to any heading level is
h, but you can change this key to suit your preference once the script is installed. To edit the script, select Tools from the menu bar in Firefox, and then select the Manage User Scripts menu item. Select Heading Navigation from the list of user scripts on the left hand side, and select the Edit command button beneath the list. At the top of the script, there is a comment,
// SETUP VARIABLES FOR THE SCRIPT. Beneath this is a variable,
strNav; whatever value is assigned to this variable will be the key that navigates to any heading level. The value is case-insensitive, as the
Shift key is used to cycle backwards through the headings. The following table illustrates the default keystrokes that enable heading navigation in Firefox.
|H||Next heading (any level)|
|Shift + H||Previous heading (any level)|
|1||Next level-1 heading|
|Shift + 1||Previous level-1 heading|
|2||Next level-2 heading|
|Shift + 2||Previous level-2 heading|
|3||Next level-3 heading|
|Shift + 3||Previous level-3 heading|
|4||Next level-4 heading|
|Shift + 4||Previous level-4 heading|
|5||Next level-5 heading|
|Shift + 5||Previous level-5 heading|
|6||Next level-6 heading|
|Shift + 6||Previous level-6 heading|
Would be nice if more sites made proper use of headings.
I'm a fan of the Document Map extension for Firefox which also allows navigation by headings.
Posted by Jeff L on
BTW, your comment preview doesn't allow https links, because you try to put an abbr around the http....
Posted by Jeff L on
Yes, I'm a fan of Document Map, too, but I was looking for a way of providing heading navigation within the document. Something like Opera, but also to allow navigation by heading level.
Thank you - fixed
Posted by Gez on
Yummy! I've been experimenting with the value of headers for semantics, accessibility and navigation. But I'm not really an opera user. Thanks for making my firefox even sweeter!
Posted by goodwitch on