Happy New Year, everyone! We welcome 2011 having spent the last week or two celebrating, spending quality time with loved ones, and contemplating all the beautiful, exciting, interesting, life-changing, humbling, discouraging, and painful things that life offered us in the past year. I find myself especially grateful to be entering 2011 without JAWS 11.
JAWS is Freedom Scientific's screen reader software, used extensively by folks with visual impairments. JAWS version 11 was released in October 2009, and contained a major bug that, once discovered, brought an abrupt end to my efforts to fully embrace HTML5.
One of my reasons for wanting to embrace HTML5 is that the new (still draft) specification provides good semantic markup that wasn't possible with previous versions of HTML. For example, elements such as <header>, <footer>, <section>, <nav>, and <article> are by name alone inherently descriptive of the content they contain, whereas older markup for sectioning web pages (<div>) was semantically meaningless. This is potentially beneficial for screen readers, search engines, and any other technologies that can target and utilize content contained within specific sections of a web page.
It's ok that pre-HTML5 browsers and assistive technologies don't understand this markup. They can just ignore it and render the content inside the new semantic tags as if the new tags weren't there at all. That's the behavior we've expected of user agents (including browsers and assistive technologies) for a long time, and it's the model that makes it possible for us to provide fallback content for user agents that don't support a particular element.
However, JAWS 11 did not behave this way when it encountered HTML5 <header> elements in Firefox. When JAWS encountered an HTML5 <header> element, it not only ignored the <header> element, but skipped all the content inside that element as well.
Consider the following markup:
<h1>Title of this Website</h1>
<p>A tagline or introductory paraprah</p>
In Firefox, JAWS 11 would be unable to read any of this content - neither the heading nor the paragraph. Since headers can be used throughout a website (for example, as site headers, article headers, or section headers) and can include all sorts of content including headings and navigation, there could potentially be a lot of critical content that JAWS was failing to render.
I tested this problem using this HTML5 Semantic Markup Test Page, and found that:
- it was only a problem in Firefox (specifically tested in FF 3.x), not a problem with JAWS 11 in Internet Explorer
- it was not apparently a problem with any other screen reader - I tested recent versions of NVDA, Window-Eyes, and VoiceOver
- it was not a problem in earlier versions of JAWS - I tested it using a clean install of JAWS 9, but didn't test 10
- it was only a problem with the <header> element, not with other HTML5 sectioning elements - I tested <article>, <hgroup>, <section>, and <footer>
So, we faced quite a dilemma in 2010. Do we avoid using the HTML5 <header> element, solely because JAWS 11 can't handle it in Firefox? I did. I had to assume that since JAWS 11 was the most recent version of JAWS, there were lots of JAWS users who had that version, and some of them would be visiting my websites.
I had enthusiastically added <header> elements to my personal home page, my music blog, and several other sites I had developed, as I upgraded these sites to HTML5. Now, in order for these sites to be accessible to JAWS/Firefox users, I had to retrace my steps and change all those <header> elements back to div's.
In October 2010, JAWS version 12 was released. It took me until late December to finally get around to installing it (busy year), but now that I've done so, I'm pleased to find that the <header> bug has been fixed!
So, I'm assuming that any JAWS user who has the financial wherewithal to have upgraded to JAWS 11 will also have upgraded by now to version 12. Welcome 2011! This is the year when there are no JAWS 11 users, and we can get on with developing accessible websites that fully embrace HTML5.