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).
One Response to “JavaScript, abbr and Internet Explorer”
Great follow-up, Jon. Just goes to show how evidence-based science is always better than rumour, just much harder work. Props for doing it.