Using <acronym>

What purpose does this serve?

[pageoneresults]

A few months ago I was doing some reading at the W3C. I should say, everyday I do some reading at the W3C! ;)

Anyway, I picked up a little advice about using the <acronym> tag in my documents. I deal with a large portion of industrial type web sites and there are a lot of acronyms flying around. I was looking for a way to assist accessibility users with determining what the acronym stood for.

What I've done is this. In my style sheet I have this code...

acronym{cursor:help;border:0px;}

Then, whenever an acronym appears in the copy, I wrap it in the <acronym> tag like this...

<acronym title="Worldwide Web Consortium">W3C</acronym>

Many users are probably clueless to this tag so I'm not too sure whether users with disabilities achieve any benefit from it.

I added the cursor:help to the css so that when someone positions their cursor over the acronym, they get a little question mark with a tool tip or title that displays the acronym meaning. The tool tip comes from the acronym title. The question mark comes from the cursor:help.

Am I using this tag in the appropriate way? Does this have any benefit to users with accessbility issues? Is it something that may be factored into an algo?

I also added the border:0px to the css as Opera and Moz display a thin line under the acronym, almost looks like a link but the line is much thinner. Comments?

[drbrain]

You are using it correctly. Typically I've seen a dashed bottom-border used for <acronym>. To be more general, I use the following:

[title] { border-bottom: 1px dashed black }

so that users are given a clue to hover on the text.

[pageoneresults]

Hmmm, I would assume that the dashed border is an indicator for the user with accessibility problems. Maybe I should leave the dashed underline or add a solid border like you have. Any other comments on this?

<added>That border doesn't look to well if the acronym is hyperlinked. You get a double border. I'm back to border:0px.

[mipapage]

That border doesn't look to well if the acronym is hyperlinked.

Seen useit.com? hahaha.

Great tip! I was toying with this one last night but didn't follow through. Put another job on the list....

[rjohara]

There is a good page on the use of <acronym> and <abbr> on Jukka Korpela's web authoring site:

[cs.tut.fi...]

[pageoneresults]

Hey rjohara, great reading at that resource!

Okay, after thoroughly absorbing that information, this is what I am now doing...

acronym
{cursor:help;border:none;}

I just changed the border attribute to none.

It appears that I am using my <acronym> tag in its proper form, based on the various research I've done including the link rjohara just posted. So, as an example, I might have a headline on a page like this...

<h1>CSS - Cascading Style Sheets</h1>

Since the <h1> gives a full explanation of the Acronym, there is no need for the acronym tag.

Then, wherever the term appears in the copy, I wrap the CSS in the <acronym title="Cascading Style Sheets">CSS</acronym> tag.

[pageoneresults]

More information on the <acronym> tag can be found here at the W3C...

3.2 Acronyms and abbreviations [w3.org]

Apparently there is a lot of confusion in the world of markup pertaining to the <acronym> and <abbr> tags. The link that rjohara provided offers some great insight. Follow the links within that article to see where all the confusion is.

[Nick_W]

oooooh... nice!

This looks like another for the library, thanks pageoneresults ;-)

So, what about browsers, anyone know how many display the title as a tooltip?

Nick

[pageoneresults]

So, what about browsers, anyone know how many display the title as a tooltip?

All of them that I've tested in. And, the title attribute is applicable to a variety of tags.

[papabaer]

I also added the border:0px to the css as Opera and Moz display a thin line under the acronym, almost looks like a link but the line is much thinner. Comments?

Opera and Mozilla's rendering of the accronym element accentuates the importance of the element by rendering the thin dotted/dashed line. It is there as an intentional visual cue and feature.

IE, does not supply this useful visual cue, and as DrBrain suggests, adding a 1px dashed or dotted border-bottom will compensate for IE's oversight.

The help differentiate from a standard hyperlink, the dashed or dotted border combined with a muted color such as teal, or a light gray shade, will accomplish the desired effect without presenting confusion with normal links.

Now if we could only get IE to recognize the abbr element e.g. <abbr title="Manager">Mgr</abbr>, we could all move a bit closer to the Semantic Web!
- papabaer

p.s. 0px ---> 0
Unit identifiers are optional (read bloat!) for units of measure with a value of zero. e.g. padding {0 0.5em;}

[pageoneresults]

p.s. 0px ---> 0
Unit identifiers are optional (read bloat!)

Just when I thought I was going to get ready and go into the office, papabaer posts another great tip! I knew that could be done, but, out of habit I've always added the indentifier. I'm now on a find and replace mission to trim out some fat, thanks papabaer.

[Hester]

Note: XHTML2 has dropped the acronym tag in favour of abbr only.

[papabaer]

Note: XHTML2 has dropped the acronym tag in favour of abbr only.

There is still debate on this. The same is true for the <strong>Accessiblity Friendly</strong> element.

The debate centers on the question of semantics: while <abbr title="manager">Mgr</abbr> is clearly an abbreviation, <acronym title="Sudden Acute Respiratory Syndrome">SARS</acronym> is not.

An abbreviation is just that: the truncating, or shortening of a word or commonly known, word combination or name, e.g. RI (Rhode Island), GB (Great Britain). While acronym, often becomes more well known, and understood, that the actual words or names it is formed from, e.g. ASCAP, NASCAR, and for a suprising number of those using it: HTML.

[Nick_W]

<strong>Accessiblity Friendly</strong> element.

So what's the debate there papabaer?

Nick

[papabaer]

There is talk of eliminating the <strong>structural</strong> element in XHTML 2.0.

<strong title="I'm NOT bold, I AM STRONG!">Interpreted as important content and rendered using a strong "voice" by screen readers and other accessible browsers</strong>.

Both <em title="screen readers/voice-browsers,generally render by increased pitch">empahsis</em> and <strong title="screen readers/voice-browsers generally interpret by increased volume">strong emphasis</strong> are structural elements with similar, but distinct characteristics.

The question is, should a single, element such as <em title="I'm gonna need instructions! Should I shout? Or just increase my pitch?">empahis</em> handle all the vocal inflection via stylesheets? Will authors remember to differentiate between available levels of inflection and their common interpretations (increased volume/strong - raised pitch/em)? Or should <em></em> and <strong></strong> remain as unique elements?

[Nick_W]

Oh I see, thanks!

Well, they're an improvement over <b> and <i> but jeez, if these guys don't stop messin' with the spec we'll NEVER get any kind of uniformity...

Nick

[papabaer]

Agreed! What needs to be <em>emphasized</em> is that <em></em> and <strong></strong> are STRUCTURAL elements while <b></b> and <i></i> are PRESENTATIONAL elements. Visually, they may render in similar fashion i.e. strong/bold, em/italics, but sematically they are unique, i.e. visual distinction vs. visual distinction AND audible, SEO value-added, interpretation.

[wewain]

Often the same acronym occurs many times on a site.

Is there a way to avoid repeating the text of the
title attribute by relating the text to the acronym,
(much the same as we can do with class in style sheets).

For example, if we could say:
acronym.W3C{title="World Wide Consortium"}
and then envoke it in a way similar to:
<acronym class="W3C">W3C</acronym>

I can do it with a Javascript function such as:
function W3C() {document.writeln('<acronym title="World Wide Consortium">W3C</acronym>');}
Is there a better way?

[aspr1n]

This article and reader comments adds an increasingly interesting twist to the topic:
http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/

asp

[Hester]

PHP could be used to set variables. Eg:

<?php $pc = "\"Personal Computer\">";

$a = "<acronym title=";

$b = "</acronym>";

What this does is define a full title for 'PC', but also the acronym tags as well. Why not - they are lengthy and can be shortened this way.

Then in your document:

I built my own <?php echo $a$pcPC$b;?>.

This should turn out as:

I built my own <acronym title="Personal Computer">PC</acronym>.

[wewain]

Thank you.

[Hester]

This trick is great for reducing code bloat elsewhere too, so long as you don't make too many calls to the PHP engine of course.

A real world example: I have a set of links from A to Z on a page, and each has a divider between them wrapped in a span. To write the code out in full would be quite chunky, so I put the span tags into PHP variables and output the whole lot using 'echo'. The span tags then become much smaller variables (eg: '$s').

If you work on multiple pages with the same content such as a menu or a banner at the top, you can also use PHP's nifty 'include' function to replace masses of code with just one line. (Eg: 'include ("menu.html");') Saves loads of bytes. Just copy the repeated section of your page into a separate file - here, called menu.html.

I could go on but I'm in danger of being in the wrong forum!

[killroy]

not for download though , I hope you all know... and some bytes at the server don't make a rat's <deleted></deleted><added>behind</added> of a difference. ;)

SN