JAWS Screen Reader Reads Hidden Span in Internet Explorer

5 years ago, Juicy Studio posted in the article Screen Readers and display: none that the JAWS Screen Reader reads the content of hidden span elements on a page when used with Internet Explorer.

Although a subsequent article (JAWS, Window-Eyes and display:none: Return to 2007) suggests that this issue has been resolved in JAWS version 12 when used with Internet Explorer 9.

I have not yet tested this in Internet Explorer 9, but I noted that there is still at least one issue when using JAWS 12 with Internet Explorer 8: the title attribute of a hidden span element is read aloud. For example, take the following HTML:

<p>Paragraph element. You should hear this text.</p>
<p>Paragraph element. You should hear this text. <span style=”display:none”>Hidden span element. You should not hear this text.</span></p>
<p>Paragraph element. You should hear this text. <span title=”Title attribute of hidden span element. You should not hear this text.” style=”display:none”></span></p>

I expected to hear exactly what is displayed on-screen:

  • Paragraph element. You should hear this text.
  • Paragraph element. You should hear this text.
  • Paragraph element. You should hear this text.

Instead, I hear:

  • Paragraph element. You should hear this text.
  • Paragraph element. You should hear this text.
  • Paragraph element. You should hear this text. Title attribute of hidden span element. You should not hear this text.

I don’t know for certain that this is unexpected behavior, although I know that I personally expected different behavior.

Testing for multiple versions of Internet Explorer

Only one version of Internet Explorer (IE) can exist on a single windows installation by default. I had previously used Multiple IE as a way of testing web pages on older versions of IE. This allows you to have IE3, IE4, IE5, IE5.5, and IE6 installed alongside your existing IE7 or IE8 install. You can even run them concurrently.
Internet Explorer Logo
I don’t test pages on anything earlier than IE6 anymore, but IE6 still accounts for more than 5% of my site traffic. Multiple IE basically helps me test both IE6 and IE8 from the same machine. However, there is still the IE7 gap, plus Multiple IE, which is no longer being updated or maintained, can produce some glitchy behavior.

It turns out, though, Microsoft offers some tools to help test their legacy browsers.
Continue reading Testing for multiple versions of Internet Explorer

Create an XSL stylesheet for your RSS or Atom feeds

Internet Explorer 6 and, curiously enough, Google’s Chrome browser, don’t display RSS or Atom feeds in a particularly helpful manner. IE6 displays neatly-formatted XML, with color-coding and indentation, whereas Chrome displays the text node of all the XML tags without so much as a linebreak:

Slashdot's RSS feed in IE6 and Chrome, respectively
Slashdot's RSS feed in IE6 and Chrome, respectively

Either way is completely intimidating to an RSS novice. Fortunately, we can change that.
Continue reading Create an XSL stylesheet for your RSS or Atom feeds

Testing Tools

A couple of useful testing tools I thought I’d share:

The latter seems a little buggy, but still easier to use than removing and installing different Flash versions yourself.

Why Doesn’t TinyMCE load in IE?

looks like it is all due to the insertAdjacentHTML call being used in another library. In my case, wz_tooltip. Oh wow did this hurt me. So that horror of a project that keeps on poking its head up sent in another small request… put tinyMCE or FCKeditor into one page on the website. Offered 5 hours. Well TinyMCE is already installed, so I figured this was a chance to recoup a little of my loss on this project. Sure enough, I activated TinyMCE with about 5 lines of code, checked that it worked in Firefox, and billed my money.

Next morning I get a call. The thing doesn’t work in IE. So I try a few quick and obvious things, move around where it gets loaded, try a few different load orders. No luck. Grr. I was going to type out my whole damn process, but I realized that’s not what people want to read…

Short version is: the wz_tooltip.js library conflicts with the TinyMCE library ONLY in Internet Explorer. This is because of a call to insertAdjacentHTML which is an IE-only javascript call (thanks again for embrace and extend M$). As a workaround, you can modify the wz_tooltip file by commenting out from line 397 (inclusive) (thats: if(wztt_body.insertAdjacentHTML) ) down to line 400 inclusive (thats : else if(typeof wztt_body.innerHTML != wztt_u && document.createElement && wztt_body.appendChild) ) And now I’m off to submit bug reports.

What a waste of a morning.