Why use the <abbr> or <acronym> elements?

These elements are used to add additional meaning to web content. The element is wrapped around the relevant content and the title attribute is then used to provide the additional information. For example:

Theoretically two groups of users can benefit from <abbr> or <acronym> elements:

1. Users of assistive devices such as screen readers and refreshable Braille devices - although it has been shown that many users of these technologies cannot access the title attribute.
2. Sighted users who do not understand what the abbreviation or acronym means.

Types of abbreviations

The word "abbreviation" comes from the Late Latin word abbreviare (to shorten) which is related to brevi (short). While some people disagree, all methods of shortening words or phrases are subsets of abbreviation.

Some of these subsets include:

1. Initialisms
2. Contractions
3. Acronyms

Abbreviations

Defined as: A shortened form of a word or phrase used for brevity in place of the whole, consisting of the first letter, or the first few letters, followed by a period (full stop).

Examples:

1. assoc. is an abbreviation for association

Example marked up:

Initialisms

Defined as: An abbreviation pronounced as the names of the individual letters formed only from the initial letter of constituent words. This distinction is supported by many dictionary definitions, but not by all. The first recorded use of the word initialism in the Oxford English Dictionary (OED) is in 1899.

Examples:

1. USA is an initialism for United States of America
2. IE is an initialism for Internet Explorer
3. CSS is an initialism for Cascading Style Sheets
4. IRS is an initialism for Internal Revenue Service

As there is no HTML "initialism" element, the content would be marked up with the "abbr" element. Example marked up:

Contractions

Contractions come in two forms.

1. Shortened form of a word that ends in the same letter as the word itself.
2. Short way to write two words as one by writing the two words together, leaving out one or more letters and replacing the missing letters by an apostrophe.

Examples:

1. Ave is a contraction of Avenue (type 1)
2. can't is a contraction of cannot (type 2)
3. won't is a contraction of will not (type 2)

There is no (X)HTML "contraction" element. However, it is probably very rare that anyone would want to specifically mark up a contracted word.

Acronyms

Acronyms are a subset of abbreviations, as they are still shortened words. However, they are more specific. An acronym is defined as a WORD formed from the initial letters of a multi-word name. The important point here is that an acronym must be a WORD - this means that the joined initial letters must be able to be pronounced.

Examples:

1. OPAC is an acronym for Online Public Access Catalog
2. Qantas was originally an acronym for Queensland and Northern Territory Aerial Services Ltd
3. Modem is an acronym for Modulator-Demodulator

Example marked up:

Confusion over the <abbr> element and "abbr" attribute

ABBR is confusing as it is both an HTML element as well as an attribute. But more importantly, they play completely opposite roles.

The <abbr> element is used to provide additional information about abbreviations, initialisms and contractions using the title attribute. For example:

The "abbr" attribute is used to provide shorter information to assistive devices such as screen readers when they are "reading out" tabular information. For example:

Styling the <abbr> and <acronym> elements

The<abbr> and <acronym> elements are often styled with a dotted underline as opposed to the solid underline used for hyperlinks. This shows the user that they can interact with the element, but that it is not a standard hypertext link.

This can be achieved with a shorthand CSS rule like:

Why use ems instead of pixels?

Using a value specifed in ems will allow the width of the border to match the relevant font size, no matter how large or small.

Why is there no color specified?

The shorthand border-bottom property allows three values to be definied
at once. These are:

1. border-width
2. border-style
3. border-color

Each of these values has an "initial value" - a value that will be applied by
the browser if it is not specified by the author. The initial values are:

1. border-width has an initial value of "medium"
2. border-style has an initial value of "none"
3. border-color has an initial value of the 'color' property

If no color is specified by the author, the initial value is used. For border-color, the initial value is "the value of the color property". This means that the border color will always match the color of the text.

If the colour of your text changes in different areas of the site or even within a particular page, then leaving the border-bottom color unspecified is an advantage as it does not have to be re-specified every time the content changes color.

Changing the cursor

You can also assist users by changing the cursor type when an abbreviation or Acronym is rolled over using:

1. Styled abbreviation and acronym example here

Support for <abbr> in Internet Explorer 5 and 6

Internet Explorer 5 and 6 for Windows do not support the <abbr> element. This leaves developers with a range of choices:

1. Incorrectly use the <acronym> element instead of the <abbr> element
2. Add a element inside the <abbr> element and applying the same styles to this span
3. Use JavaScript to solve the problem
4. Use the abbr-cadabra method

___________________
About the author: Russ Weakley has worked in the design field for over 20 years. During the last nine years Russ has focused on web design through his own business, Max Design. He is also the web designer for the Australian Museum. Russ is also internationally recognized for his presentations and workshops on web development, standards and accessibility.