WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Acceptable use of the HTML DL element?

for

From: Korpela Jukka
Date: Jun 19, 2010 4:15PM

Simius Puer wrote:

> As with all tags, the usage of each should be semantically correct and
> <dl> just isn't quite right for this purpose.

There's a long tradition of discrepancy around the DL element. On one
hand, it is defined as Definition List, but even HTML specifications have
examples of usage that can be characterized as "annotated list",
consisting of (short) terms and associated texts, very generally. The
latter interpretation makes the DL element semantically very vague.

> <dl>
> <dt>Apple</dt>
> <dd><a href="">edible<a></dd>
> <dd><a href="">fruit<a></dd>
> <dd><a href="">red<a></dd>

That's not semantically correct, as none of DD elements provides a
definition of "apple". In the broader context, DL is semantically
appropriate, but almost anything is.

> Then there is the other part of the argument that you have raised - the
> common expectation. If by accepting the more popular <ul> method your
> navigation is more easily recognised more easily by various tools

That's quite possible. The point is that we cannot expect much of the DL
element handling, due to vague semantics and widely varying usage. We
cannot expect a speech browser read e.g. "Definitions. Term: Apple.
Definition: Edible. Definition: Fruit. Definition: Red. End of
definitions", even though something like that could make a lot of sense if
DL markup were well-defined and consistently used as a definition list.
Neither can we expect much else - given the inconsistent usage, it could
be argued that it is best to ignore DL markup in nonvisual rendering, as
it is so often used just to get some indentation for some unknown reason.

> A <dl> can only ever handle one sub-level of navigation.

Contrary to what you seem to imply, one can nest DL elements, much the
same way you can nest UL elements. You can have a DL element inside a DD
element. I don't think it makes much sense, but it is syntactically
allowed and creates different amounts of nesting in visual rendering.

To replace existing usage of DL elements for navigation means that in
addition to changing markup to UL, possibly for extra DIV (or even
heading) markup for what is now DT, one should design CSS code that
generates the desired visual rendering. This is nontrivial but not very
difficult.

Yucca