TJKDesign: Home Page

Find a broken link or an error? Please report it!

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Using Javascript to specify - in plain text - the expansion of abbreviations.

Checkpoint 4.2 of WCAG 1.0 says:

4.2
Specify the expansion of each abbreviation or acronym in a document where it first occurs. [Priority 3]
Mark up abbreviations and acronyms with ABBR and ACRONYM and use "title" to indicate the expansion. 
<p>Checkpoint 4.2 of <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 1.0 says:</p>

This article is about two distinct scripted solutions (see demo page):

TJK_abbr() [version 1.2.1]

This function parses all ABBR elements within a document, to transform the above markup into this:

<p>Checkpoint 4.2 of Web Content Accessibility Guidelines (<abbr>WCAG</abbr>) 1.0 says:</p>

The script removes the TITLE attribute from the ABBR element, then the expansion of the abbreviation is done in plain text followed by the ABBR inside parentheses.

Take note Note that further occurrences of that abbreviation are left untouched.

TJK_abbr_glossary() [version 1.4]

This function parses the document to build a collection of ABBR and TITLE values; then it creates a Heading and a Definition List containing all the element/value pairs.
For example: 

<h4>Glossary of Abbreviations used in this document:</h4>
<dl>
<dt><abbr>WCAG</abbr></dt>
<dd>Web Content Accessibility Guidelines</dd>
<dt><abbr>HTML</abbr></dt>
<dd>HyperText Markup Language</dd>
<dt><abbr>CSS</abbr></dt>
<dd>Cascading Style Sheets</dd>
</dl>

This function requires two arguments, an ID and a heading.
For example, if you call the function using "TJK_abbr_glossary('wrapper','h4')", the heading above the Definition List will be a h4 and both elements will be included at the bottom of an element whose ID value is "wrapper".
Feel free to edit the "z_text_for_heading" variable in the script to change the textNode value. Also, the DL has been given an ID: "TJK_dl_glossary" (in case you need to style this element or its children).

Take note It appears that Internet Explorer (prior to version 7) is seriously ABBR-challenged as I could not find a way to get the nodeValue of these elements. Unfortunately, because of TITLEs like "World Wide Web Consortium", "Triple-A" or "Extensible HyperText Markup Language" we cannot rely on string manipulation to create the proper abbreviations (W3C, AAA, XHTML).
Bottom line, older versions of Internet Explorer will not create the "Glossary of Terms".
Thanks to Nick Fitzsimons' blog entry, this script is now working on Internet Explorer.

Take note If you decide to use both of these functions in the same document, make sure to call TJK_abbr() before TJK_abbr_glossary() as the former script removes the first occurence of the abbreviations it finds.

How to make things work

TJK_abbr()

Download TJK_abbr.zip (2Kb) and unzip the file into a directory within your site. Then, use a SCRIPT element to link the JS file (TJK_abbr.js) to your pages within the HEAD element of your documents, as shown below: 

<script type="text/javascript" src="/js/TJK_abbr.js"></script>
</head>

Note: In this case, the file has been saved inside a directory called "JS" within the root folder.

Use the onload attribute of the body element to call the function; for example: <body onload="TJK_abbr();"> or, better, use a technique like the one explained here: executing JavaScript on page load.

TJK_abbr_glossary()

Download TJK_abbr_glossary.zip (2Kb) and unzip the file into a directory within your site. Then, use a SCRIPT element to link the JS file (TJK_abbr_glossary.js) to your pages within the HEAD element of your documents, as shown below: 

<script type="text/javascript" src="/js/TJK_abbr_glossary.js"></script>
</head>

Note: In this case, the file has been saved inside a directory called "JS" within the root folder.

Use the onload attribute of the body element to call the function; for example: <body onload="TJK_abbr_glossary('myContainer','h3');"> or, better, use a technique like the one explained here: executing JavaScript on page load.
Note that with the above example, the new content will appear at the bottom of an element whose ID is "myContainer" and the text "Glossary of Terms" will be inside a h3.

Please use this contact form to send feedback and report errors.