WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Acceptable use of the HTML DL element?

for

Number of posts in this thread: 5 (In chronological order)

From: Patrick Dunphy
Date: Fri, Jun 18 2010 3:54PM
Subject: Acceptable use of the HTML DL element?
No previous message | Next message →

Hey Everyone..

I'm working on a large scale project where different navigation menus are
present depending on your location within the site. The current markup
being implemented has been done via DL's which in my understanding is an
incorrect implementation from an accessibilty POV.

For example..

<dl>
<dt>Section Name</dt>
<dd><a href="/section/a/">Section A</a></dd>
<dd><a href="/section/b/">Section B</a></dd>
<dd><a href="/section/c/">Section C</a></dd>
<dd><a href="/section/d/">Section D</a></dd>
....
</dl>

For it to be truly semantic & meaningful markup doesn't this need to be
converted to an unordered list? Technically speaking a groups of links are
not data definitions as described above. In addition it's not recognized as
a navigation/menubar using the firefox accessibility toolbar.

I'm working with some highly skilled developers that have been working using
this practice for some time - but with limited accessibility exposure. I do
expect pushback on my recommended changes and would appreciate any advice on
how to communicate the importance of this type of change.


Thanks!
-PD

From: Simius Puer
Date: Sat, Jun 19 2010 6:48AM
Subject: Re: Acceptable use of the HTML DL element?
← Previous message | Next message →

Hi Patrick

I think you have all the argument that you need right there.

*Semantics*

As with all tags, the usage of each should be semantically correct and <dl>
just isn't quite right for this purpose. The code itself isn't
"inaccessible" as such, and there *could* be instances where you could
legitimately use it e.g.

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

...possibly not the clearest example, but I'm sure you get the idea that you
always need to consider the context before deciding on the correct semantic
mark-up.

It's a question of what code is "fit for purpose" rather than if it is
"accessible" in and of itself (i.e. taken out of context).

*Common expectation*

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 (be those
browser add-ons, assistive technologies or whatever) then there are inherent
benefits.

*Multi-level*

A <dl> can only ever handle one sub-level of navigation. For many larger
websites this simply is not enough and the <dl> hits a barrier. Now, whilst
you can't nest <dl>s, if anyone says "but we could use a <ul> inside the
<dd>" just ponder why you aren't using nested <ul>s to begin with...the code
is simpler and the CSS for styling it will be too.

Even if multi-level navigation is not an issue for your website now it could
be in the future - any developer should take that into consideration.


I can't see why you should encounter any real push-back other than the
effort required to re-code and re-CSS the menus. The most important thing
is to get by-in to accessibility at *all* levels. Once you have that the
rest is a breeze - but if people don't understand why they are doing
something, or the benefits of it, then you will meet resistance.

Have a great weekend!

From: patrick dunphy
Date: Sat, Jun 19 2010 8:45AM
Subject: Re: Acceptable use of the HTML DL element?
← Previous message | Next message →

Cheers Andrew. The expectation of common practice & the relationship
between AT tools is an important point.

Thanks!
-PD

On 2010-06-19, at 7:48 AM, Simius Puer < = EMAIL ADDRESS REMOVED = >
wrote:

> Hi Patrick
>
> I think you have all the argument that you need right there.
>
> *Semantics*
>
> As with all tags, the usage of each should be semantically correct
> and <dl>
> just isn't quite right for this purpose. The code itself isn't
> "inaccessible" as such, and there *could* be instances where you could
> legitimately use it e.g.
>
> <dl>
> <dt>Apple</dt>
> <dd><a href="">edible<a></dd>
> <dd><a href="">fruit<a></dd>
> <dd><a href="">red<a></dd>
> ...etc
> </dl>
>
> ...possibly not the clearest example, but I'm sure you get the idea
> that you
> always need to consider the context before deciding on the correct
> semantic
> mark-up.
>
> It's a question of what code is "fit for purpose" rather than if it is
> "accessible" in and of itself (i.e. taken out of context).
>
> *Common expectation*
>
> 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
> (be those
> browser add-ons, assistive technologies or whatever) then there are
> inherent
> benefits.
>
> *Multi-level*
>
> A <dl> can only ever handle one sub-level of navigation. For many
> larger
> websites this simply is not enough and the <dl> hits a barrier.
> Now, whilst
> you can't nest <dl>s, if anyone says "but we could use a <ul> inside
> the
> <dd>" just ponder why you aren't using nested <ul>s to begin
> with...the code
> is simpler and the CSS for styling it will be too.
>
> Even if multi-level navigation is not an issue for your website now
> it could
> be in the future - any developer should take that into consideration.
>
>
> I can't see why you should encounter any real push-back other than the
> effort required to re-code and re-CSS the menus. The most important
> thing
> is to get by-in to accessibility at *all* levels. Once you have
> that the
> rest is a breeze - but if people don't understand why they are doing
> something, or the benefits of it, then you will meet resistance.
>
> Have a great weekend!
>
>
>

From: Korpela Jukka
Date: Sat, Jun 19 2010 4:15PM
Subject: Re: Acceptable use of the HTML DL element?
← Previous message | Next message →

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

From: Simius Puer
Date: Sat, Jun 19 2010 7:30PM
Subject: Re: Acceptable use of the HTML DL element?
← Previous message | No next message

As abrasive a response as I've come to expect from this quarter!

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.
>

As I said - "possibly not the clearest example" and certainly an
over-simplicity but this was purely for illustrative purposes. However, "the
definition description element contains data that describes a definition
term" - I think you would have a hard time arguing that I have not done
this.

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.
>

Apologies, you are technically correct - at least as far as validation is
concerned. But validity has little to do with accessibility - a nested DL
is likely to cause more confusion than the more commonly nested UL. Also,
from a coding perspective the nested DL is code-heavy and also a lot harder
to style due to poor cross-browser handling of this element, especially when
nested.


I have no problems with debate (or criticism for that matter) but at least
be constructive and try to keep your tone respectful, not caustic.