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

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.

THE CSS RULE

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 
elements.

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.

Example!

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

SETUP IN FIREFOX

I use the ChromEdit extension, < 
http://extensionroom.mozdev.org/more-info/chromedit >, 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 < http://accessify.com > to check it out.

SETUP IN OPERA

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 
userContent.css)

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

No restart necessary -- visit a site like < http://accessify.com > 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 < http://www.clagnut.com/blog/193/ >.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

Sent by Jonah Cosley on 29 May 2004 20:08