This weeks tip: expand your use of abbreviations and acronyms
Added on Thursday 19 Jun 2003
If your web pages are littered with acronyms and abbreviations (e.g. HTML, W3C, CSS), you will be pleased to know that HTML 4 (and above) provides a way to expand those abbreviations without clogging up your pages with additional text.
What is the difference between an abbreviation and an acronym?
- Abbreviations are any shortened form of written words that represent the complete form, such as UK for United Kingdom, MCU for Making Connections Unit, or etc for etcetera.
- Acronyms are abbreviations that are used as a word in their own right when read aloud, such as RADAR, or NASA.
Here is an example of how to use the <abbr> element in your web page:
<p>Use standard <abbr title="HyperText Markup Language">HTML</abbr> to markup and <abbr title="Cascading Style Sheets">CSS</abbr> for presentation.</p>
When the user hovers their mouse over the abbreviation, a 'tool tip' will appear containing the expanded form.
Unfortunately Internet Explorer on Windows does not support the <abbr> element, however, there are a number of ways to overcome this oversight, the simplest one being that suggested by Marek Prokop:
Create the following declaration in your style sheet:
abbr, acronym, span.abbr { cursor: help; border-bottom: 1px dashed #000; }
And add an additional <span> element when using the <abbr> element:
<abbr title="HyperText Markup Language"><span class="abbr" title="Cascading Style Sheets">HTML</span></abbr>
If this seems like too much like hard work Marek also provides a way to automate this 'workaround' (http://www.sovavsiti.cz/css/abbr.html).
Update regarding automating the creation of abbr elements: Ian Loyd of accessify.com got in touch:
"And there's another tool that will help automate things somewhat:
http://www.accessify.com/tools-and-wizards/acrobot/basic.asp. "
Thanks Ian.
---You have permission to reprint this and other accessible web design tips on your own website - see weekly tips for terms and conditions.