Welcome to WebmasterWorld Guest from

Forum Moderators: ergophobe

Message Too Old, No Replies

JAWS and Window-Eyes Sometimes Announce display:none Content

5:42 am on Oct 13, 2007 (gmt 0)

Senior Member

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

joined:May 26, 2000
votes: 0

Content hidden with display: none is not usually announced by screen readers, apart from labels for form controls, regardless of the verbosity settings. Looking into it further, there are certain circumstances where content hidden with display:none is announced by JAWS and Window-Eyes.


Interesting details here from Gez Lemon.

1. JAWS will announce the content in a span element that uses display: none - if the span tag is within an anchor element. In JAWS, this behavior within an anchor element is only true for a <span>, and not for other tags. This behavior can be a good thing - it gives the web author the ability to enhance contextual references of the link text that might otherwise depend on visual proximity of page elements.

2. Window-Eyes goes further than JAWS. Content for any element with a display:none rule is announced if there is an ancestor element with a CSS rule for background-image.

6:19 am on Oct 13, 2007 (gmt 0)

Senior Member from MY 

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

joined:Apr 1, 2003
votes: 0

Very interesting and useful. For the many variations on 'CSS dropdown menus' which depend (at least, for their IE versions), hidden subitems are contained within display:none elements; but normally some form of <ul>. This would indicate that the whole <ul> should be enclosed in or replace by a <span>.
12:19 am on Oct 14, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 31, 2007
votes: 0

Well i'm still a bit of a newbie at HTML coding and haven't looked into screen readers yet, but my intuition would tell me that screen readers should act like non-CSS browsers, i.e. they see the same thing as what a regular browser shows me with CSS and images turned off. After all, CSS (or most of it?) is all about visual enhancements to the content, and there's nothing visual to screen readers. So yeah, i've been using "display: none" to hide/show text in browsers that support CSS or not, and i expect screen readers to ignore "display: none"...

Reading that article is quite shocking, it seems that screen readers arbitrarily honor parts of a page's CSS and ignore others. That looks dangerous to me, a browser should either implement all of CSS or none. Period.

The problem is that hiding the content with display: none also hides the content from screen readers (more about this later). To get around this, developers position the content off the screen...

When developers start using "tricks" like this, it should raise warning bells all around the community. There should be no tricks required to code a website, especially when there's already a straightforward way of doing it.

I think part of the problem is that people have started using CSS for something that it's really not intended for, i.e. web-based applications in conjunction with AJAX. And that's mainly because no separate language has been developed to address proper programming of web-based applications. We badly need a new set of standards/language for web-based applications, and return CSS to what its real intent is: styling the content on an optional basis.

8:34 am on Oct 16, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 8, 2002
votes: 0

Well said.