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: , , , ,

9 comments:

mntnoe said...

Awesome tip...

Too bad access keys aren't featured much on the Internet. Maybe one should invent a hack that forces access keys on links like "next", "previous" etc :-)

abeacock said...

mntnoe, thanks for the compliment!

dhrasmus said...

I just ran into this user script and installed it. It's fantastic. Props!

Made a couple changes of my own:
1) Installed it using the Firefox "Stylish" add-on, so I can enable/disable it at will.
2) Changed the display for better visibility. Plum is pretty for websites that are white or bright colored, but for darker ones or ones with odd color it doesn't work as well. I made the access key bigger, added padding, and changed the colors to white-on-black.

I hoped for some smarter way to do that - like if there's some way in CSS to just automatically put up a background color with a foreground color that contrast and blend in with what's already there. No idea if that's possible.

My changes are below. You can test them, and check out my website, at http://danrasmussen.org

Again, thanks for the good work and making it search engine friendly!

Dan

/* 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;
background-color: black;
color: white;
font-size: 125%;
padding: .125em .125em;
content: "[" attr(accesskey) "]";
}

abeacock said...

Dan,

Thanks for adding a comment your version looks pretty good! Glad you liked the post and found it so easily :)

Ted said...

If you really only want access keys to show up on Wikipedia, you can add that code to your Wikipedia CSS. After logging in, paste the code into:

http://en.wikipedia.org/wiki/Special:MyPage/monobook.css

That's less invasive than hacking your local Firefox user CSS, and it sticks to your Wikipedia user account.

(note: I notice the code only seems to work (on monobook.css) with wikipedia links; it doesn't show links next to input/textarea/etc.)

abeacock said...

Ted, cheers for the comment. I didn't just want accesskey support in wikipedia, that was just a great example site that uses them "behind the scenes". I use this hack so that I don't have to try and find a help article on the site telling me what the accesskeys are.

windows 7 professional said...

This is my first time i visit here. I discovered so numerous interesting stuff in your weblog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all of the enjoyment here! maintain up the great work.

Thomas Sabo said...

I use this hack so that I don't have to try and find a help article on the site telling me what the accesskeys are.

ricab said...

I just found this post and I would like to use this, but it looks like things have changed meanwhile. Do you know how to accomplish this with Firefox 20 (linux)?