Summary

Guideline 3.1 of the draft version of the Web Content Accessibility Guidelines (WCAG) 2.0 recommends that authors make text content readable and understandable. Under this guideline, there is tentatively a level 3 success criterion that a mechanism is available for identifying specific definitions of words used in an unusual or restricted way, including idioms and jargon. This article suggests a bookmarklet to reveal definitions marked up with the definition element for people that require them, and also ensure that they're available when the document is printed.

Author: Gez Lemon

Contents

Introduction

Like most best practice guidelines, ensuring that content is readable and understandable is obviously beneficial to everyone. For example, someone new to a technical subject would benefit from a mechanism to reveal the meaning of words and phrases that they may not be familiar with. This guideline is also useful for people with cognitive difficulties, such as people with reading difficulties or people with memory loss who may find it difficult to recall the meaning of certain words and phrases.

[Back to the contents]

Techniques for Providing Definitions

There are several techniques authors can use to provide definitions for words and phrases used in an unusual or restricted way. The author could provide definitions inline with the text, provide links to either dictionary definitions or particular terms in a glossary section, provide links to footnotes, and many other similar techniques. Techniques such as providing the definitions inline can be very useful, but can also be obtrusive to those that do not require the definitions to be expanded, having a negative impact on the readability. A good solution would be to provide a means that isn't obtrusive, but available to those that may require the extended definitions.

[Back to the contents]

The Definition Element

The definition element (dfn) is used to denote the defining instance of a term, and is ideal for marking up idioms and jargon, as well as any other words or phrases that may not be immediately understood by the intended audience. The definition element has been available since HTML 3.2, and is supported by all modern user agents. Graphical user agents typically render the definition element in italics, but CSS can be used to bring the attention of the definition to the intended audience. The definition element may provide the meaning by context alone, as in the following example: 

A <dfn>syntax error</dfn> is a 
fatal error that must be corrected
before a program can be compiled.

When the definition element is provided by context alone, the definition element is usually used with the id attribute, so that links can be provided back to the definition from elsewhere. 

A
<dfn id="def-syntax">syntax error</dfn>
is a fatal error that must be corrected
before a program can be compiled.

The definition element has no required attributes, but may optionally include any of the common attributes, which includes the title attribute from core attributes. For a definition to be programmatically determinable, there needs to be some means of extracting a definition, which is where the title attribute is useful. The title attribute may be used to help clarify the context, or provide a meaning where the context isn't obvious. 

<dfn title="Error in the word order of a statement">
syntax error
</dfn>

The title attribute for the dfn element is typically displayed as a tooltip in graphical user agents. Tooltips are useful, but do have accessibility problems for some groups: they're not readily resizable for people with visual impairments, are implemented within graphical user agents in a device dependent manner in that they're activated with a mouseover action, and are only exposed to some assistive technologies, which may depend on the verbosity settings.

[Back to the contents]

Expose Definitions Bookmarklet

The following bookmarklet exposes all definitions marked up with the definition element at the end of the document in alphabetical order. Marking up definitions with the definition element means that the meanings can be implemented in an unobtrusive manner; that is they're only exposed to visitors who want an explicit definition. The definitions will also be present when the document is printed, ensuring that people can also have access to the definitions should they read the content offline. Unfortunately, IE can only handle a small amount of script in a URI, and Safari doesn't support scripts loaded from a separate resource. To cater for this, I have provided two versions of the script.

To help illustrate the bookmarklet, I've marked up a few terms in this post using the definition element. I don't use the definition element as much as I should, but as this is a technique that can help aid the accessibility of a document, it should be more widely used than it is. Accessibility experts, such as Joe Clark, use the definition element regularly and appropriately, and hopefully tools like this bookmarklet will encourage the rest of us to follow suit.

[Back to the contents]

Category: Accessibility.

Comments

  1. [jargon-busting-with-the-definition-element.php#comment1]

    The definition element can be used without a title attribute as well. 

    
<p>The <dfn>definition element</dfn>
(<code>dfn</code>) is used to denote the
defining instance of a term, and is ideal for
marking up idioms and jargon, as well as any
other words or phrases that may not be
immediately understood by the intended
audience. [...]</p>

    Posted by zcorpan on

  2. [jargon-busting-with-the-definition-element.php#comment2]

    Hi ZCorpan,

    The definition element can be used without a title attribute as well.

    Yes, and that's a good point; thank you for pointing it out. As with the abbr and acronym elements, the title attribute for the dfn element is optional. For the definition to be programatically determined, the defintion should be provided through the title attribute, but you're quite right that it is an optional attribute.

    Posted by Gez on

  3. [jargon-busting-with-the-definition-element.php#comment3]

    I also use the <dfn> with the title attribute on several pages. However, it is not really the best use of the element.

    The reconditions were rather too vague about DFN and I don't really think they thought it out enough when writing about how to apply it, and yes it does take quite a bit of thought.

    Posted by Robert Wellock on

  5. [jargon-busting-with-the-definition-element.php#comment5]

    Point of clarification: I take it your comment was meant to mean that you don't feel you have used the definition element as well as you could have done, Robert? Your comment reads as though you don't think using the title attribute with the element is the best way of using the element. From what I understand of the element, which is practically nothing, using it with the title attribute does appear to be the best way of using the element as it allows an expansion of the term.

    I agree the element isn't very well documented and consequently rarely used. The example on this page has helped clarify its use for me, but I would be interested to know whether you mean the element should not be used with the title attribute, or whether you meant the way you used it may not be the most appropriate. Any more information on how to use the definition element would be greatly appreciated, as it will be invaluable for my intended audience along with the bookmarklet to reveal the meanings.

    Posted by Donna on

  6. [jargon-busting-with-the-definition-element.php#comment6]

    What I meant was it is fine to use the title attribute and that's the method I apply on various websites. Though I'd have to question the robustness of that method (we'll ignore the "Bookmarklet" in this context).

    An <dfn id="def-acronym">acronym</dfn> is a word formed from the initial letters or groups of letters of words in a set phrase or series of words.

    I think originally they preferred it be able to standalone; I agree using the title is good but probably on its own lacks something in meaning.

    Posted by Robert Wellock on

  7. [jargon-busting-with-the-definition-element.php#comment7]

    I should have explained the definition element in more detail. Hopefully, the following description will help clarify the use of the dfn element.

    The definition element is used to denote the definition of a term, which may be specified by context alone, as in the following example: 

    A <dfn>syntax error</dfn> is a 
fatal error that must be corrected
before a program can be compiled.

    The definition element has no required attributes, but may optionally include any of the common attributes, which includes the title attribute from core attributes. For a definition to be programmatically determinable, there needs to be some means of extracting a definition, which is where the title attribute is useful. The title attribute may be used to help clarify the context, or provide a meaning where the context isn't obvious. 

    <dfn title="Error in the word order of a statement">
syntax error
</dfn>

    I've updated the article to include this definition to save any more confusion, and to also include why the id attribute may be useful when using the dfn element.

    Posted by Gez on

  8. [jargon-busting-with-the-definition-element.php#comment8]

    I have begun using this quite a bit lately. I love the element and especially the fact that it is recognized by, and can thus be styled for, Internet Explorer (IE). That allows a broad usage where applicable. It helps in my quest to stop my own often reckless use of the acronym element and the the bloated abbr-span mark-up (for IE) of using the abbreviation element. Often it is really best identified as a definition and written accordingly. Good topic, Gez.

    Posted by Mike Cherim on

Comments are closed for this entry.