Welcome to WebmasterWorld Guest from 54.198.69.193

Forum Moderators: ergophobe

Message Too Old, No Replies

display:none Inaccessible?

Where water gets thrown on a favorite technique...

     
11:43 am on Apr 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?

1:31 pm on Apr 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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;
}
2:19 pm on Apr 13, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

3:03 pm on Apr 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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."
3:56 pm on Apr 13, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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. ;)

1:04 pm on Apr 14, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
2:00 am on Apr 23, 2007 (gmt 0)

10+ Year Member



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?

8:18 am on Apr 23, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month