Description

The acronym element is similar to the abbr element, but takes matters one step further. Whereas the abbr element is used to describe any abbreviated phrase, acronym is used only where the phrase comprises initial letters that make a word. Often, the acronym can be spoken as if it were a word—consider NASA, pronounced “nassa,” or GUI, pronounced “gooey.” The intention is that browsers and assistive technologies will interpret this information and present it to the user in an appropriate format as and when requested.

The fact that this element is an acronym rather than an abbreviation offers benefits for users of assistive technologies such as screen readers, who may prefer to have the abbreviated phrase announced as a word—“nassa” instead of “enn-ay-ess-ay.”

Some documents, by their very nature, may include numerous abbreviations or acronyms. Marking up each and every one could cause the document to become very unsightly in some browsers, and would be tedious for the document’s author. A general convention is to mark up the first instance of an acronym.

Use This For …

The acronym element contains only the text that is part of the abbreviation, and has just one attribute: the title attribute.

Compatibility

Support for the acronym element is varied, at least in a visual sense. Firefox and Opera underline an abbreviation with a slight dotted line (this can be styled using CSS); Safari and Chrome recognize the acronym content but do not draw attention to it with an underline. Firefox, Opera, Chrome and Safari all display the title attribute for the abbreviation as a tooltip (so it’s available to mouse users, but not keyboard users).

In Firefox, an acronym displays as shown in Figure 1.

Figure 1. The first GUI marked up as an acronym

Because of the compatibility issues, many people prefer not to use this element. Instead, they write it out in full in the document in the first instance, as follows:

<p>He marvelled at how fluid the GUI (Graphical User Interface)
    was. It truly was a gooey GUI.</p>

The ways in which browsers deal with the acronym element—presenting it in a tooltip, underlined, italicized, and so on—do little to help users reading the content in printed form. This provides yet another reason to simply write out the abbreviation in the text, as shown in the HTML above. You might consider using generated content in CSS instead, but that approach is hindered by some browser support limitations.

Despite variations in the presentation of acronym content, the support chart shows that full support is provided by all browsers (except for IE 5.5), as there are no guidelines in the W3C specifications to indicate how browsers should treat such content. If the element is exposed in the DOM tree, and if the browser does something with it, that constitutes full support.