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:
One other thing to remember is the accesskey enabler changed from Alt to Alt-Shift in Firefox2 (release notes):
Technorati Tags: Firefox, AccessKey, UserContent, Accessibility, Andrew Beacock
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
Comments
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 :-)
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) "]";
}
Thanks for adding a comment your version looks pretty good! Glad you liked the post and found it so easily :)
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.)