WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: DL inside UL navigation

for

From: Jukka K. Korpela
Date: Aug 3, 2005 6:00AM

On Mon, 1 Aug 2005, ben morrison wrote:

> Ive been given a design from an outside agency that I have to build.
> The usual nested list navigation, but with an added twist of the sub
> navs having differing amounts of children.

>From the accessibility point of view, the worst problem is in this very
idea. Nested lists are problematic. Think about a blind person listening
to nested lists, with little or no idea of the level of nesting and the
whole construct. Sometimes nested lists have real benefits that outweigh
the problems, but then you need to be extra careful, and especially avoid
more than two levels of nesting.

It is usually better to set up a simple list, with entries that are links
to lists. That way, the user first encounters a simple menu and makes a
choice between a small number of alternatives, then gets the next menu.

> Am I just making matters
> worse by using a definition list,

Yes. You are not presenting any definitions, so definition list markup is
semantically incorrect. (Let's suppress the usual argument over the fact
that the <dl> element's description in HTML specifications is
self-contradictory and just state that partly due to that, the element has
little practical usefulness and is best forgotten, except perhaps for
glossaries and other constructs that are undeniably lists of
term/definition pairs.)

> <li><a href="#">Trade Policy Issues</a>
> <dl>
> <dt>Africa:</dt>
> <dd><a href="#">SADC</a></dd>
> <dd><a href="#">COMESA</a></dd>
> <dd><a href="#">ALL</a></dd>
> <dd><a href="#">UEMA</a></dd>
> <dd><a href="#">ECOWCAS</a></dd>
> <dd><a href="#">CEMAC</a></dd>
> </dl>

If you use nested lists in a context like this, you can write

<li>Trade Policy Issues
<ul>
<li>Africa</li>
<ul>
<li><a ...>SADC</a></li>
...

But before doing so, consider how much the user needs to listen to or to
browse through visually in order to get an idea of what the alternatives
really are. Compare this with a simpler design with simple link lists,
with links pointing to new link lists as needed, perhaps on separate
pages.

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/