TJKDesign: Home Page

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

Saving Definition Lists one at a time...

Recently, I have been involved in two lengthy threads [1][2] 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 DTs)
  • DIVs (for the DDs)

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.

function TJK_fromDLtoHxAndDiv(Hx){
// v1.0 Copyright (c) 2008 TJKDesign - Thierry Koblentz
if (!document.getElementsByTagName || !document.getElementsByTagName('dl')) return;
var zDL=document.getElementsByTagName('dl');
while(zDL.length){
  var zDT=zDL[0].getElementsByTagName('dt');
  var zDD=zDL[0].getElementsByTagName('dd');
  while(zDT.length){
    zHx=document.createElement(Hx);
    zDIV=document.createElement("div");
    document.body.insertBefore(zHx,zDL[0]);
    document.body.insertBefore(zDIV,zDL[0]);
    while(zDT[0].childNodes.length)zHx.appendChild(zDT[0].childNodes[0]);
      zDL[0].removeChild(zDT[0]);
      while(zDD[0].childNodes.length)zDIV.appendChild(zDD[0].childNodes[0]);
        zDL[0].removeChild(zDD[0]);
      }
    document.body.removeChild(zDL[0]);
  }
}

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 DT / DD pairs. Note that Definition Lists containing multiple terms and descriptions, as shown below: <dl>
    <dt>Center</dt>
    <dt>Centre</dt>
    <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>
    </dl>

    will be transformed as follows:
    <h3>Center</h3>
    <div>A point equidistant from all points on the surface of a sphere.</div>
    <h3>Centre</h3>
    <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 while loops), 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 (DTs/Hxs and DDs/DIVs).

Further reading

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