Styling Abbreviations and Acronyms

Summary: The HTML elements abbr and acronym are useful accessibility aids, but their styling can come as a surprise to authors. See how you can take control of their presentation without sacrificing the benefits these elements provide. Many authors are beginning to use the HTML elements abbr (abbreviation) and acronym in their Web pages. This is to be encouraged, and according to Guideline 4 of the Web Content Accessibility Guidelines, both elements should be given a title attribute to improve "readability of the Web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf."

The Problem

Authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted underline, per the following rule in resource://gre-resources/html.css

abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

The Solution

If authors wish to remove the underline from abbr and acronym elements, this can be done with the following rule:

abbr[title], acronym[title] {
  text-decoration: none;
}

It may be better to lessen the visual weight of the border without actually removing it. The underline tells readers that the word in question has extra information associated with it. In Mozilla, placing the mouse pointer over the element and leaving it for a moment will cause the contents of the title attribute to appear as a tooltip next to the mouse pointer. Removing the underline from these elements will rob readers of an indication that there is extra information available.

Related Links

• Web Content Accessibility Guidelines 1.0