Layout unordered list within table, maintain accessibility. 1

[petey]

Hi folks,

We're converting database info to HTML. It's mainly tabular data, but also has some aspects of nested, unordered lists. Our table thus looks like this:

+------+-------------------+
| text | parent            |
+------+-------------------+
| text |  * child 1        |
+------+-------------------+
| text |  * child 2        |
+------+-------------------+
| text |     * subchild 1  |
+------+-------------------+

Since there's no way to wrap <ul> around multiple table rows, we're &quot;faking&quot; the unordered list. The tricky part is we need to support a large Netscape 4 audience. We abandoned using this method because it didn't validate:
<td><ul><li>child 2</li></ul></td>
<td><ul><ul><li>subchild 1</li></ul></ul></td>

Now we're exploring this possibility:
<td><span>&bull; child 2</span></td>
<td><span><span>&bull; subchild 1</span></span></td>

This destroys indentation you'd expect from an unordered list, and CSS padding is ruled out because of Netscape 4. We have a solution using &nbsp; to indent the list items:
<td><span>&nbsp;&nbsp;&bull; child 2</span></td>

However if the line wraps the effect is destroyed:

+------+-------------------+
| text |   * child 2. Here |
|      | is some text.     |
+------+-------------------+

There's my dilemma as far as I've thought through it. Are there any fresh ideas or approaches from the brilliant minds of Tek-Tips for how to treat these bulleted items? We need to stay 508 compliant (accessible), and would like to stay W3C compliant if possible. We *must* support N4, unfortunately.

Thanks in advance!

http://www.drpeterjones.com/

News and views of some obscure guy

 

[petey]

Sorry, it converted my &amp;nbsp; characters to spaces:
&quot;We have a solution using &amp;nbsp; to indent the list items:
<td><span>&amp;nbsp;&amp;nbsp;• child 2</span></td>&quot;

http://www.drpeterjones.com/

News and views of some obscure guy

 

[Vragabond]

Ok, I'll be tipping in the dark for this one since I know not what NN4 likes and what it doesn't like but here's something that crossed my mind. Align your cells to the right and place divs inside them. Make the parent div 100% wide, first sublevel 90%, next 80% and so on. As I said, this is mostly just guessing that it might work.

 

[petey]

That's not a bad idea. I don't know either whether N4 will handle percentage sizes on divs. I'll have to test the idea out. Thanks, and a star for you!

-petey

http://www.drpeterjones.com/

News and views of some obscure guy

 

[rkmarcks]

I've done, in the past, what you are trying to do using code similar to that shown at the bottom of this post. This mark-up will validate properly as HTML 4.01 strict. The second <UL> MUST be contained inside a list element to validate. That's why your original attempt did not validate. I used styles to get the proper appearance. The style tags within the list elements should be placed in a CSS sheet. You may also need to play with the values a bit to get what you want. The table cell heights are taller than I would like (I made no attempt to change them) but you can play with that. Also, I'm not sure how 'accessible' this is. If you are catering to people who are blind or of low vision (using screen readers) the sheer number of lists with only single elements could become quite confusing. This is compounded by the use of tables which has its own accessibility issues and tend to be quite tedious to ensure compliance with section 508.

Personally, I like the idea of using <div> elements. I'll have to try that in the future. However, for purposes of 508, you might consider <span> elements instead of <div>. If I remember correctly, <div> elements are structural and have (or will have) meaning to screen readers. I'm pretty certain <span> elements are not considered structural. They are simple containers. Although I prefer <div> over <span>, the <span> might be a better solution in this particular case.

You may even consider using CSS to absolutely position <div> or <span> elements without using tables. This might bode well for purposes of accessibility.

RKM

******************************************

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;

http://www.w3.org/TR/html4/strict.dtd&quot;>

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<meta name=&quot;GENERATOR&quot; content=&quot;Quanta Gold&quot;>
<meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css2&quot;>
<title>Temp</title>
</head>
<body>
<table border='1'>
<tr>
<td> </td>
<td>
<ul>
<li style=&quot;list-style-type:none&quot;>one</li>
</ul>
</td>
</tr>
<tr>
<td> </td>
<td>
<ul>
<li style=&quot;list-style-type:none;line-height:0%&quot;>
<ul>
<li style=&quot;list-style-type:square;line-height:50%&quot;>one a</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

 

[ChrisHunt]

I going to have problems making this accessible whichever way you go, but the multiple <ul>s in each table cell seems the worst choice to me. Imagine hearing all those nested lists in a screen reader.

My approach would be like this:
[tt]
<table>
<tr>
<td>text</td>
<td colspan=&quot;3&quot;>parent</td>
</tr>
<tr>
<td>text</td>
<td align=&quot;right&quot; width=&quot;1&quot;><img src=&quot;bullet.gif&quot; alt=&quot;Level 1&quot; title=&quot;&quot;></td>
<td colspan=&quot;2&quot;>child 1</td>
</tr>
<tr>
<td>text</td>
<td align=&quot;right&quot; width=&quot;1&quot;><img src=&quot;bullet.gif&quot; alt=&quot;Level 1&quot; title=&quot;&quot;></td>
<td colspan=&quot;2&quot;>child 2</td>
</tr>
<tr>
<td>text</td>
<td colspan=&quot;2&quot; align=&quot;right&quot; width=&quot;1&quot;><img src=&quot;bullet.gif&quot; alt=&quot;Level 2&quot; title=&quot;&quot;></td>
<td>Subchild 1</td>
</tr>
</table>
[/tt]
Quite fiddly, but not too bad if you're building it dynamically. Note that I've used the [tt]alt[/tt] text to identify the level of indent to blind users.

PS. You'll have to use CSS to put the cell borders in where you want them.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[petey]

rkmarcks, Span and div are equivalent except div carries with it the concept of &quot;block level&quot;, while span doesn't. (hence the layout differences) In any case I think the idea of using divs may be a better approach, since Netscape 4 actually understands divs and applies CSS padding to them.

Chris, if it wasn't for the table border showing up on N4, I'd use that idea. I'll keep it in the toolbox in any case.

Thanks.

http://www.drpeterjones.com/

News and views of some obscure guy