homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

display:none Inaccessible?
Where water gets thrown on a favorite technique...

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

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)

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 {
color: #000;


 2:19 pm on Apr 13, 2007 (gmt 0)

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)

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)

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)

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)

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)

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]

Global Options:
 top home search open messages active posts  

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved