display:none Inaccessible?

Where water gets thrown on a favorite technique...

[cmarshall]

Someone was looking at one of my pages, and pointed to this [css-discuss.incutio.com] posting on the CSS-Discuss list.

In it, the author stipulates that you shouldn't hide screenreader links with display:none, because these readers honor the style, and don't read the contents.

There is some contradictory information here [access-matters.com], but it looks like I need to figure out a better way to do this.

The guy who critiqued my site uses width:0px;height:0px. I'm not 100% sure that's the best way, but he swears by it.

I've been using display:none for some time, smug in the belief that I was being "Assistive PC."

Not so, it seems.

What do people think?

[HelenDev]

The way I do it is to position something off-screen using CSS if you don't want it to be seen by visual browsers, but you do want it to be accessible by assistive devices and such. Like this

.skipnav {
font-size:80%; 
position:absolute;
top:-30px;
color: #000;
}

[pageoneresults]

What about display:hidden?

Nevermind, I just read futher into the referenced links and it too can cause problems.

I've been fortunate in my designs in that I utilize CSS-P which allows me to do what I wish with my HTML. No need to worry about skipnav links when the navigation sits at the very bottom of the source code. ;)

Hold On!

If you use the @import command, the display:none and display:hidden are heard and not seen as intended.

If you are using the link rel for styles, then the display:none and display:hidden are not heard and not seen.

[cmarshall]

That's the first time I've ever seen a good reason for using the @import command. Usually, it's listed under "Don't do that."

[pageoneresults]

I'd say that the new tool to keep an eye on would be this one...

pwWebSpeak 3

They seem to have their bases covered from all angles. They score a y/y in all areas. Time for JAWS to either get with the program or make its way into the archives.

After reading some of the referenced links, it appears that the community is screaming out for a tool that follows standards. pwWebSpeak 3 looks like it filled the void. ;)

[cmarshall]

Just to let you know, my friend reports that using the method outlined by HelenDev (offscreen display) seems the only effective manner of doing this, and that is what he will be doing.

[Setek]

Yeah, display none is bad, it’s been known for some time that screen readers don’t read it at all.

I use the visibility method:

selector { position: absolute;
left: 0;
top: 0;
visibility: hidden; }

… because there were some problems with simply moving it off screen, I believe IE 7 in some cases would display it on screen?

[HelenDev]

I believe IE 7 in some cases would display it on screen?

Perhaps it can happen, but that's never been my experience in the handful of sites I've used the code I posted on.

[edited by: HelenDev at 8:20 am (utc) on April 23, 2007]