JavaScript, abbr and Internet Explorer

The other day I wrote about how screen readers handle abbreviations. I mentioned the lack of support for the abbr element in Internet Explorer (IE 6 and below) and how it may have led people to believe that screen readers working with Internet Explorer don’t support it either. I went on to explain that modern screen readers do support both abbr and acronym elements, but perhaps not in the way that developers expect.

I’ve been doing a bit of poking around and it seems that abbr elements have been available in Internet Explorer’s Document Object Model (DOM) for some time, which I didn’t realise. I’ve been able to access the title attributes of abbr elements as far back IE 5.01. However, what we haven’t been able to do is style these elements with CSS or access their child nodes (i.e. their content) with JavaScript; that is until IE 7 introduced proper abbr support.

There have been a few ways to force IE 5 and 6 to support abbr; from using extra markup, through hacking it with JavaScript, to using the html namespace to trick the browser. Now it seems there’s been a really simple JavaScript solution that’s lain dormant for about four years.

A simple JavaScript fix using createElement()

Thanks to a tip from Sjoerd Visscher, Jeremy Keith observed that we can con Internet Explorer into understanding abbr and persuade it to recognise the element as a proper part of its DOM.

So, armed with this new knowledge from Sjoerd and Jeremy, I ran another test using this createElement() JavaScript fix. The results show that IE 5.5 and IE 6 will add abbr to the DOM properly if you add this at the beginning of your JavaScript:

document.createElement("abbr");

You can style it and it even displays the title attribute as a tool tip for you! Lovely! Internet Explorer 5.01 doesn’t play ball – why am I not surprised?!

Remember, we’re not doing this for the benefit of screen readers. The modern screen readers JAWS and Window-Eyes can expand the contents of abbr and acronym elements using their title attributes. All we are doing is making sure Internet Explorer itself is fully aware of abbr, enabling us to style it with CSS and manipulate it properly within the DOM. So, whether or not you want to do this is entirely based on what you do in the browser – don’t do it for the sake of assistive technology.

Further reading

• Thierry Koblentz adds to the discussion and provides a demonstration in How-to make the ABBR element work in IE lt 7 (added April 8, 2008).