Firefox hack to display "accesskey" keyboard shortcuts

I'm a big fan of using accesskeys in Firefox as I just love keyboard shortcuts! One problem is that most websites don't advertise the fact that they have accesskeys and what those shortcuts are.

After a little searching I found this forum post from back in 2004 with a hack to Firefox's UserContent.css file. I changed it slightly to show a nice purple "[shortcut key]" when it finds a keyboard shortcut. This is what it looks like when viewing the Wikipedia site:



To install this hack create a file in your profile's chrome directory called 'userContent.css' and add the following:

/* Display [] by the item with the accesskey */
a[accesskey]:after,
button[accesskey]:after,
input[accesskey]:after,
label[accesskey]:after,
legend[accesskey]:after,
textarea[accesskey]:after {
    margin-left: 0.3em;
    color: Plum;
    content: "[" attr(accesskey) "]";
}

One other thing to remember is the accesskey enabler changed from Alt to Alt-Shift in Firefox2 (release notes):

Access key definitions provided by web pages can now be triggered using Alt+Shift+key on Windows, Ctrl+key on Mac OS X, and Ctrl+Shift+key on Unix.

Technorati Tags: Firefox, AccessKey, UserContent, Accessibility, Andrew Beacock