Greasemonkey Hacks

Hack #68. Add an Access Bar with Keyboard Shortcuts

Display shortcut keys defined by a page.

An increasing number of sites define keyboard shortcuts, called access keys, for commonly used features. This is an accessibility aid for people who have difficulty using a mouse. For example, a site could define a shortcut to jump to the site's accessibility statement and another one to set focus to the site's search box (or jump to a separate search page). Unfortunately, there is no easy way to know which shortcuts the site has defined! This hack makes the keyboard shortcuts visible.

Tip

Learn more about defining keyboard shortcuts at http://diveintoaccessibility.org/15.

The Code

This user script runs on all pages. The code is divided into three parts:

1. Find all elements that define a keyboard shortcut with the accesskey attribute.

2. Loop through each of these elements and find the most logical label for the shortcut.

3. Add CSS styles to the page so the list of keyboard shortcuts appears in a fixed bar along the bottom of the browser window.

Step 2 is the hard part, because different HTML elements can define an accesskey attribute. Form elements like input, textarea, and select can each define an accesskey. The form element might or might not have an associated label that contains a text description of the form field. If so, the label might contain a title attribute that gives even more detailed information about the input field. If not, the label might simply contain text. Or the form field might ...