Previous Message
Next Message

display accesskeys for all websites in Firefox, Opera -- a mini-article for CSS-D

Sent by Jonah Cosley on 29 May 2004 20:08

This isn't a hard thing to come up with, but since it came to me this 
morning I felt inspired to share it! I intended to share just the rule at 
first but it turned into a mini-article to help those not familiar with 
userContent.css and the such-like. With it you can /always show accesskeys 
for all websites/ that you visit in Firefox and Opera -- just like iCab 
does. (To my knowledge neither has the option to turn them on in this way. 
Please let me know if I'm wrong.)

First, the CSS rule, and then the setup.


Here's the relevant rule:

a[accesskey]:after {
	content: " [" attr(accesskey) "]";

The selector grabs all <a> elements that have an accesskey attribute in 
them, and applies the declaration (the part inside the {} ) after those 

In this case we're creating, after every <a> with an accesskey attribute, 
some new content that reads " [x]" -- where x is the actual value of the 
accesskey attribute in that element.


	XHTML: <a href="index.html" accesskey="1">Home</a>

	You see: "Home [1]"

After looking at Opera's accessibility user style sheet (and copying it), 
here's a smarter rule that applies to more than <a> elements:

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) "]";


I use the ChromEdit extension, < >, for quick access to 
the userContent.css, but you can find the userContent.css yourself and edit 
it manually if you like. You'll find it in (at least I find mine in):

C:\Documents and Settings\[user name]\Application 
Data\Phoenix\Profiles\[profile name]\[random string]\chrome\userContent.css

Just add the above rule in your profile's userContent.css, then restart your 
browser and visit a site like < > to check it out.


Select File -> Preferences -> Page Style

Choose a target for My Style Sheet that has the above rule in it (you'll 
need to create a little CSS file if you don't have one... I use Firefox's 

Then select Configure Modes... and check My Style Sheet under the Author 
Mode column.

No restart necessary -- visit a site like < > to check 
it out.

Hope this is helpful to someone,

Jonah Cosley

P.S. Developers can use this too of course. For a roundup of accesskey key 
"standards", visit < >.
css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message