Klaus Hartl – Stilbüro - Klaus Hartl

Fixing abbreviations

February 20th, 2006

Category:

CSS,

Web Development

It is a demand of the WCAG 1.0 and the german adaption, the BITV, to provide expansions for abbreviations. The HTML Techniques for Web Content Accessibility Guidelines 1.0 propose to use the title attribute to specify that expansion.

I think it’s a good idea to give a user a little graphical hint, if an abbreviation has such an expansion. To me this makes also sense for the dfn element.

That hint of course should only be rendered if there actually is a title attribute. Use the attribute selector E[att] for that:

abbr, acronym, dfn {
    border-style: dotted;
}
abbr[title], acronym[title], dfn[title] {
    border-bottom-width: 1px;
    cursor: help;
}

Note that I didn’t specify any color for the border. That’s because border-color is then inherited from color.
A browser now renders a thin, dotted border beneath an abbreviation or definition as well as the cursor will change to a question mark when hovering over with the mouse.

The attribute selector is of course not supported by IE/Windows up to version 6. Therefore I am using Dynamic Properties to check for the existence of the title attribute and to specify the styles accordingly:

abbr, acronym, dfn {
    border-bottom-width: expression((this.title && this.title.length > 0) ? '1px' : '0');
    cursor: expression((this.title && this.title.length > 0) ? 'help' : 'auto');
}

Needless to say that this is invalid CSS and should be included in a separate style sheet via Conditional Comments.

Three more things: IE will render a dashed border, no support for dotted . No JavaScript, no graphical hint. Oh, and IE doesn’t support abbr at all. But hey, please do not start to use acronym all over the place. This is semantically incorrect (every acronym is an abbreviation, but this isn’t true the other way round). There are solutions to fix this as well.

Comments disabled · Trackbacks disabled · Permalink