Display A Web Page’s Keyboard Shortcuts In Firefox

Display A Web Page’s Keyboard Shortcuts In Firefox

We’re big fans of keyboard shortcuts ’round these parts, but while lots of web pages advertise their shortcuts well, many go unnoticed. Here’s a CSS tweak for Firefox from a reader that will show you which links on a page have keyboard shortcuts.

You recently mentioned Facebook’s new keyboard shortcuts, the likes of which are available on a lot of other web pages. If you want to see if a web site has them, you can add this to your Firefox profile’s usercontent.css file:

a[accesskey] :after,
button[accesskey] :after,
input[accesskey] :after,
label[accesskey] :after,
legend[accesskey] :after,
textarea[accesskey] :after
margin-left: 0.3em;
content: “[” attr(accesskey) “] “;

This will look at a page for all the HTML elements that have an accesskey attribute (which is how you define keyboard shortcuts) and, if they’re present, display them after the relevant element. I was amazed at how many shortcuts Wikipedia has defined.

Unfortunately, I haven’t yet been able to find similar functionality in IE or Chrome.

Note also that each OS and browser handles these kinds of shortcuts in different ways, so you’ll need to mouse over the links to see what modifier keys you’ll need to add to the bracketed key to execute the shortcut, as shown in the screenshot above.


Log in to comment on this story!