Is it just text on a same colored background or something more?
No, that's too similar to cloaking. Plus if the point is to remove structure from the visual representation because you believe it's visually distracting and unhelpful, then you don't want it showing up when people highlight text and you don't want it taking up space.
You also don't want to use display: none since most screen readers will honour that.
The preferred method (I believe, though this might mostly be my opinion) is setting the element to position: absolute (which takes the element out of the document visual flow, so doesn't take up space) and then either a negative left margin or just a negative left value:
This leaves the element accessible to screen reader users, text browser users, and the googles.
You also have the option of showing it (or not) when printing in the print stylesheet.
Here's an arguably better way of hiding content:
Jonathan Snook has a discussion of methods of hiding content here: Hiding Content for Accessibility - Snook.caCode:
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
If by focusable content he means an anchor (which does not affect Debbie's case at all), we don't pull them up anyway (for example, Window Eyes had a bug where it would announce the content at the top of the page first, and then again when it reached the element in source). Almost all of us pull off to the left (would be off to the right on a RTL page).Quote:
Position Absolute and Offscreen
In this case, if you have focusable content within the positioned element, the page will scroll to that element, thus creating an unsettling jump for sighted users.Code:
Browser differ on whether they focus on anchors offscreen: some will, some won't.
It seems Yahoo is using clip instead of off-screen positioning so that all browsers (even Opera) will focus on the skip links (likely this is for skip links... though now I wonder if they are also then undoing all their !importants to undo all those styles on :focus, which they should be doing for sighted keyboarder accessibility).
I think he was conventiently using top to argue a strange point.
He also uses !important. I avoid !important because that is a tool for users, not authors. It's purpose was changed between CSS1 and CSS2, from for-authors to for-users. Users with user stylesheets should be able to use !important to override author stylesheets; however when authors use !important, users lose this power.
I'm not sure why he's using the "correct" clip... last time I used clip, the "incorrect" version that IE requires worked in all browsers. It goes against the spec, but works, and works in IE, so everyone has been ignoring the spec.
Though last time I used clip I don't believe Chrome existed, so maybe that's what's changed.
But I'll also mention I have a strong bias against code used at Yahoo. Every time I see something they've coooked up, it always looks like 500 times more code than necessary.
I generally agree on !important. I never use it. I would assume that you wouldn't actually need it here, either, as long as you were aware of your CSS. If you were looking for a universal drop-in solution, the !important would perhaps be necessary, but that would be bad practice.
Regarding the correct clip, I would certainly be reluctant to drop even if all browsers currently supported the 'incorrect' clip, because it's far safer for future-compatibility to ensure that correct clip is there as a fall-back. IMO.
user stylesheeets will win out. This was not the case in CSS1 but was changed in CSS2 to make sure that user stylesheets using !important were more important :)
I wrote this section of the reference so I quote myself :)
Declarations are sorted in the following order (from lowest to highest priority):
- user agent declarations
- normal declarations in user style sheets
- normal declarations in author style sheets
- important declarations in author style sheets
- important declarations in user style sheets