Lists
Avoid compound lists

Compound lists contain multiple levels of classification. For example, a compound shopping list has items organized by category: deli, dairy, produce, etc. With compound lists, relationships are shown visually using indents and different item markers (bullets, discs, etc.).

Compound lists may be difficult for visual users to decipher if the visual cues are insufficient. Also, compound lists may be disorienting for nonvisual users. Nested lists are coded so child lists are contained within the associated list item of the parent. On our shopping list, the parent list dairy contains a child list of milk, butter, and cottage cheese:

<ul>
<li>Produce</li>
<li>Dairy
<ul>
<li>Milk</li>
<li>Butter</li>
<li>Cottage cheese</li>
</ul>
</li>
<li>Deli</li>
</ul>

  • Produce
  • Dairy
    • Milk
    • Butter
    • Cottage cheese
  • Deli

With all items coded as list items, it may be difficult for nonvisual users to differentiate between parent and child items. A better approach might be to define relationships between items using a combination of structural elements. One approach is to break the compound list into sections and mark each section with a heading:

<h2>Produce</h2>

<h2>Dairy</h2>
<ul>
<li>Milk</li>
<li>Butter</li>
<li>Cottage cheese</li>
</ul>

<h2>Deli</h2>

Produce

Dairy

  • Milk
  • Butter
  • Cottage cheese

Deli

Another approach is to use ordered lists to indicate the relationship between elements:

<ol>
<li>Produce</li>
<li>Dairy
<ol>
<li>Milk</li>
<li>Butter</li>
<li>Cottage cheese</li>
</ol>
</li>
<li>Deli</li>
</ol>

  1. Produce
  2. Dairy
    1. Milk
    2. Butter
    3. Cottage cheese
  3. Deli