Use abbr element to mark up abbreviations

Introduction to Abbreviations

All abbreviations aren’t understood by everyone, so to make our content more accessible to all who are reading it, we should try to expand them where possible. We could write the expansion out in full, followed by the abbreviation in parentheses:

The British Computer Society (BCS) recently released an update to their
European Computer Driving Licence (ECDL) course.

Alternatively we can add some HTML around them, which allows us to provide machine-readable content that spell checkers, speech synthesisers, translation systems and search-engine indexers can make use of, and is also accessible via browser tooltips. Even with this technique though, there are a myriad of subtleties that crop up.

History of Abbreviations

HTML 4 was officially made a W3C Recommendation in December 1999, and saw the introduction of the abbr and acronym elements. This immediately started to cause issues about how abbreviations and acronyms were defined, with many people trying to make them mutually exclusive. Many discussions took place all over the internet and it didn’t help matters that the examples given by the W3C themselves were flawed:

The ABBR and ACRONYM elements allow authors to clearly indicate occurrences of abbreviations and acronyms. Western languages make extensive use of acronyms such as “GmbH”, “NATO”, and “F.B.I.”, as well as abbreviations like “M.”, “Inc.”, “et al.”, “etc.”.

Current Understanding of Abbreviations

What’s the difference between abbreviations and acronyms? In short, acronyms are a subset of abbreviations. If you usually pronounce the item as a word e.g. NATO, NASA, CERN, then it’s an acronym. If not, and you spell out the word instead, like BBC, HSBC or HTTP then it’s not an acronym, and falls under the parent group of being an abbreviation. This also helps with abbreviations like SQL, GUI, URI and URL which are spelt out by some, and pronounced as a word by others.

The Web Content Accessibility Guidelines (WCAG) 2.0 released as a W3C recommendation in December 2008 shows their new understanding and gives a definition of the term “abbreviation”, one that is more in-line with the understanding outside of the web:

abbreviation

shortened form of a word, phrase, or name where the abbreviation has not become part of the language

Note 1:This includes initialisms and acronyms where:

1. initialisms are shortened forms of a name or phrase made from the initial letters of words or syllables contained in that name or phrase

   Example 1: SNCF is a French initialism that contains the initial letters of the Société Nationale des Chemins de Fer, the French national railroad.

   Example 2: ESP is an initialism for extrasensory perception.

2. acronyms are abbreviated forms made from the initial letters or parts of other words (in a name or phrase) which may be pronounced as a word

   Example: NOAA is an acronym made from the initial letters of the National Oceanic and Atmospheric Administration in the United States.

Note 2: Some companies have adopted what used to be an initialism as their company name. In these cases, the new name of the company is the letters (for example, Ecma) and the word is no longer considered an abbreviation.

There’s a couple of things to pull from that quote. Firstly, they do now agree that an acronym is a type of abbreviation, and that makes deciding whether to use the abbr element or the acronym element much easier; if you always use the abbr then you can’t be wrong! One could argue that you lose a tiny bit of semantics with this decision, but as you’ll see in the next section, the W3C themselves have also made this decision. Interestingly, as a counter-point, the WCAG 2.0 includes a technique for providing definitions for abbreviations by using the abbr and acronym elements.

Secondly, the quote mentions that abbreviations that have become part of the language should not be included, so words like laser (originally light amplification by stimulated emission of radiation) and scuba (self contained underwater breathing apparatus) would not need to be marked up with the abbr element.

Recommended Solution for Abbreviations

Now that W3C have caught up with the rest of the world in knowing that an acronym is an abbreviation, their future recommendations of HTML 5 and XHTML 2.0 are currently set to simplify things, by dropping the acronym element completely, in favour of the abbr element. Because of this, I would recommend simply using abbr element, even in HTML 4, with one caveat. Internet Explorer version 6 (IE6) or earlier doesn’t support the abbr element at all. You can get around this by using a span element with a title attribute of the expanded abbreviation, inside the abbr element; this may or may not cause screen readers to read the full expansion twice, depending on their settings.

If this conflict of choosing to favour IE6 or screen readers is uncomfortable, then it’s just as fine to follow the WCAG 2.0 technique of providing the abbreviation immediately following the expanded form. One point that the document highlights is to “note that some abbreviations require explanations rather than expansions. This technique is not appropriate for such abbreviations.”

So, for the situations where we decide to use the abbr element, how can we tell screen readers whether to read out the item as a word, or to spell the letters? The answer is the Speaking property of the CSS3 speech module. Although parts of the CSS3 proposal are still in a working draft form, many text-to-speech user agents already support this, while it has no effect on those that don’t. This allows us to include a class attribute within our abbr element, and then define a speaking property for that class:

The <abbr title="British Broadcasting Company" class="spell-out">BBC</abbr>
spoke to a <abbr title="North Atlantic Treaty Organisation" class="say">NATO
</abbr> representative.
...
abbr.spell-out {speak: spell-out;}
abbr.say {speak: normal;}

The first abbreviation would be read out letter by letter, while the second one is pronounced as a word. The default behaviour is to attempt to read out the word; however, as the second abbreviation is in block capitals, some screen readers my attempt to spell it out, so explicitly setting the speech to be normal, resolves this. The alternative is to put the second abbreviation in lowercase, but then use CSS text-transform: uppercase; to display it as capitals.

Summary

We’ve seen how abbreviations and acronyms have been treated on web pages, and how can deal with them now. Each technique can be used on it’s own, or combined in different ways, as each has it’s own benefits. While you may wish to battle with trying to work out of an item is an acronym or not, then adding in various extraneous code to deal with old deprecated browsers for only marginal semantic benefit, it’s far more advisable to look forward, and use the markup as it was originally intended – the abbrelement with it’s semantically special title attribute.