While working on a project for a multi-national company who are pretty strict on their web accessibility compliance, I stumbled across a problem regarding nested lists. For as long as I can recall, it’s been fine to nest a <ul> tag within a <ul> tag to produce sub navigation or secondary intented lists thus:
<ul>
<li>list item one</li>
<li>list item two</li>
<ul>
<li>sub item one</li>
<li>sub item two</li>
</ul>
<li>list item three</li>
</ul>
However, try as I might I couldn’t get the thing to validate under XHTML 1.0. In the end I had to abandon the second level <ul> and use a css class to do the same thing. The result looks more like this:
<ul>
<li>list item one</li>
<li>list item two</li>
<li class="sub">sub item one</li>
<li class="sub">sub item two</li>list item three
<li></li>
</ul>
No worries mate!
The problem is that the XHTML you’ve produced for the sub navigation is incorrect. The second ul needs to be wrapped in the parent li, so it should look like the following,
list item one
list item two
sub item one
sub item two
list item three
Alex
October 26th, 2007