JAWS and Window-Eyes Sometimes Announce display:none Content

[tedster]

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.

[juicystudio.com...]

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.

[vincevincevince]

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

[borntobeweb]

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

<rant>
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.
</rant>

[Clark]

Well said.