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
- Techniques for Providing Definitions
- The Definition Element
- Expose Definitions Bookmarklet
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.
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.
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>
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.
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.