Category: development

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

Quick Tip: speedier PHP/CSS commenting

Continuing in the vein of “the obvious ones are often overlooked,” here’s another quick productivity tip!

When you want to type a comment in a PHP or CSS file, speed things up a little by using the / and * keys on the numeric keypad. On (most) laptops, hold down the Function (Fn) key to access the overlaid numeric keypad.

Back when I used to use a full-size keyboard, I would use the / and * keys on the numeric keypad to quickly insert comments into my PHP or CSS. It was so much quicker than using / and Shift+8 keystrokes.

When problems with RSI last year encouraged me to switch to using a compact keyboard, I missed that shortcut. However, I quickly realised that I could hold down the Function (Fn) key on my new keyboard to quickly access the overlaid numeric keypad.

I recently bought myself a MacBook Pro and have just figured out that I can do the same thing. Holding down Function (Fn) allows me to access the numeric keypad and my quick way of typing comments. Yay!

Named HTML Entities in RSS

A problem with feeds not working in Sage alerted me to how character references should be used in RSS feeds.

Despite validating with feedvalidator.org and the W3C feed validator, the Firefox XML parser failed on this one feed, as did Sage. Firefox found an undefined entity in the RSS – … – a horizontal ellipsis. I wasn’t sure why that’d break the RSS, so I went digging a little…

Naughty names

RSS doesn’t include an XML schema, which means that a named entity such as … is unlikely to mean anything to a feed reader. … is fine in an XHTML document because it generally has a doctype and a schema.

So if you use data from a content management system to generate RSS, you need to ensure that all named entities are converted into numeric character references. Edit: And as Robert Wellock points out in the comments below, it’s advisable to stick to using numeric character references when using XHTML anyway.

Numeric character references

As far as I know, numeric character references are generally better supported than named entities. I tend to use numeric character references anyway when I code, as I’m sad and have a bunch of the numbers committed to memory after years of usage – that’s a scary thought!

Having said that, I do have Dave Child’s HTML Character Entities Cheat Sheet stuck up in my office footnote 1, with a few I’ve added myself, including:

  • horizontal ellipsis (…)
  • en dash and em dash (– and —)
  • left and right double quote (“ and ”)
  • left and right single quote (‘ and ’)

Of course, the real geeks among us will look things up in the full list of character references in the HTML 4 schema!

Other Resources

More useful info at:

Footnotes

  1. Dave, I can’t really afford anything for you off Amazon at the moment, but I certainly owe you a drink or two by now! Back to footnote 1 source

Elsewhere