Expand your use of abbreviations and acronyms
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).
---
You have permission to reprint this and other accessible web design tips on your own website - see weekly tips for terms and conditions.