Skip to main content

30 steps to a more accessible website

Step 17: Defining acronyms

Much content on a university website is technical in nature. Colleagues with an interest in IT may recognise some or all of the following 50 acronyms and abbreviations:

ADA ALT, AOL, API, CGI, CMS, CSS, CTRL, DMV, DNS, DTD, EFF, FAQ, FSF,

GFDL, GIA, GPL, HTML, IE, IIRC, IIS, IO, KB, KDE, LONGDESC, MB, MSDN,

MSN, MT, Mac, NC, OPML, P2P, PGDN, PGUP, PBS, PDF, PONUR, RSS, RU,

SOAP, SSN, TDD, US, VNC, W3C, WCAG, WYSIWYG, Win, XHTML, and XML.

If you recognize all 50, congratulations; you have a long and prosperous future as a technical editor. If not, you'll appreciate the fact that I defined each of them with the <acronym> tag. Hover your cursor over each acronym to see what it stands for. This works in all modern browsers, and is harmless in Netscape 4.

You should define an acronym whenever you use it, or at least once per page.

Who benefits?

  1. Michael benefits. When Michael hovers his cursor over an acronym, Opera displays the acronym title as a tooltip.
  2. Bill benefits. Mozilla goes even further, automatically rendering acronyms with a dotted underline. When Bill hovers his cursor over the acronym, Mozilla changes the cursor to a cursor + question mark, and then displays the acronym title as a tooltip. (You can override this default behavior with cascading style sheets, or use CSS to get a similar effect in other browsers.)
  3. Google benefits. Google indexes the acronym title as well as the acronym itself, so people can find your site whether they search for the acronym or the spelled-out description.
  4. I wish I could say that Jackie benefits, but she doesn't. Neither JAWS nor any of the other screen readers on the market currently support reading the titles of acronyms. I hope some day they will, and then you'll be ahead of the game.

How to do it

The first time you use an acronym, mark it up with an <acronym> tag, like this:

<acronym title="cascading style sheets">CSS</acronym>

How to do it: cascading style sheets

As an added bonus, you can change the look of all your acronyms using cascading style sheets. Here is the rule I use to produce the dotted underline in all browsers (not just Mozilla):

 acronym {  border-bottom: 1px dotted black;} 

And as an extra bonus, this is the rule I use in my print stylesheet to automatically spell out acronyms when printing my web pages. (This only works when printing from Mozilla and Opera, but it's harmless in other browsers.)

 acronym:after {  content: " (" attr(title) ")";} 

Further reading

Have you been using acronyms without knowing what they mean? Look them up.

Postscript

Several fellow markup-obsessed gurus have correctly pointed out that there is an <abbr> tag for abbreviations. Unfortunately, no version of Internet Explorer for Windows supports it; no tooltips show up at all. Use <acronym> .

« Step 16: Not opening new windows | Contents| Step 18: Giving your calendar a real caption »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1