DEV 5.3 - Define list and list items properly

Lists, when coded correctly, can provide useful information, e.g.

  • The fact that there is a list of related items;
  • The number of items in the list;
  • The number of the current item in the list.

Lists also add structure to a page, making it easier to read and scan.

  • If something is a list, always code it as one using <ul>,<ol>, <dl>:
    • Include all menus if possible:
      • They are logically lists - and, when style sheets are turned off, maintain structure and meaning.
  • Avoid using inline images to create list effects:
    • Spacers, bullets, etc;
    • Use lists and style the CSS.
  • Code <ul>, <ol>, <dl>

    Properly according to standards:

    • Ensure correct syntax when embedding a list with a list (see example.)
  • Use CSS to alter appearance of bullets and numbers, for example using:
    • List-style: disc url(newbullet.gif) outside.

Video Clip

Watch a screen reader user identify lists on a page and how this can aid browsing a page.

Alternative Formats

If you experience any problems viewing the video above or wish to download a copy to your desktop select one of the alternative formats below.

A simple nested list

<p>Items needed for holiday:</p>
  <ol>

    <li>Sunglasses</li>
    <li>Swimming things
      <ul>
        
<li>Swimsuit</li>
        
<li>Towel</li>

      </ul>
    </li> <!-- note the placement -->
    <li>Suncream</li>
    <li>Money</li>
  </ol>

Ideally all menus should be coded as lists. For example main nav bar, local navigation, footer links

Note: Even horizontal menus can be coded as lists using CSS, e.g.

  • Use display:inline; on the .ul and .li definition or;
  • Use list-style-type: none; on the .ul definition, display: block; float: left; on the .li definition.