Saving Definition Lists one at a time...
Recently, I have been involved in two lengthy threads  about Definition Lists (
DL), in which I tried my best to defend their use and prevent them from being declared "bad practice" by Accessibility advocates.
This article is a follow up on the most recent discussion and offers a solution that should play nicely with screen-readers without requiring sacrificing semantics in our documents.
Take a sneak peek at the demo page.
The issue with Definition Lists
Definition Lists do not make much sense when read with a screen-reader (SR). So for this reason, many authors who care about SR users replace
DLs with a different set of elements:
- Headings (for the
- DIVs (for the
This is because User Agents like Jaws for example, use Headings as navigation hooks.
The DOM to the rescue
Using a simple script, it is possible to keep using
DLs and at the same time serve headings to screen-reader users (to JS-enabled UAs).
The idea is to use the DOM to swap elements. The script below does just that. It will also let you specify the heading level you wish to use.
// v1.0 Copyright (c) 2008 TJKDesign - Thierry Koblentz
if (!document.getElementsByTagName || !document.getElementsByTagName('dl')) return;
How to make it work?
Save this JS file in a proper directory and link to it using a
SCRIPT element. Then use the
ONLOAD event to call the function, passing the heading level you wish to use (i.e.
TJK_fromDLtoHxAndDiv("h3")). You may also look at the source code of the demo page to see how things work.
Note that if you have only one document in your entire web site that uses Definition Lists then it may be better to keep the script inline rather than linking to an external file (saving you an HTTP request).
Things to keep in mind
- This script is for lists made of
DDpairs. Note that Definition Lists containing multiple terms and descriptions, as shown below:
<dd>A point equidistant from all points on the surface of a sphere.</dd>
<dd>In some field sports, the player who holds the middle position on the field, court, or forward line.</dd>
will be transformed as follows:
<div>A point equidistant from all points on the surface of a sphere.</div>
<div>In some field sports, the player who holds the middle position on the field, court, or forward line.</div>
- Because I am using DOM methods rather than
innerHTML(also because I am using
whileloops), speed may become an issue depending on nodes' content.
- To avoid any display differences depending on JS support, make sure to style elements the same way (
-  [WSG] Semantic list with explanations
-  [Discussions publiques à propos du R.G.A.A] Point de contrôle 3.6: Listes de définition]