Making Accessible Websites for the United Nations

Textual Content

Lists

WAI Definition (Checkpoint 3.6)

Mark up lists and list items properly.

Explanation

List markup should be used to aggregate related items. List markup should not be used for the sake of adding a single bullet or number item to text or for indentation purposes.

Lists should not be created by using tables with bullet images in one column and text in the other column. To achieve formatting effects, use CSS.

When an element of the list has sub-items, the structure of your list should be reflected in the HTML markup, not only in the styling effect by creating a nested list (a list within a list). See example.

Rationale

List structure and list elements (for example, <dl>, <ul> and <ol>) should be used only to create lists. These features should not be used to provide formatting effects such as indentation, as it may affect the user's understanding of the page structure.

Although users with graphical browsers can understand the structure of nested lists from their indentation, information can be lost on non-visual user agents. Users accessing the site using these user agents could 'get lost' in lists — particularly in lists that do not indicate the specific nest level for each list item.

Technique

Listed elements should be text based. List tags should not be used for formatting effects, as this can confuse screen-reader users.

Note on nested lists

The closing tag of the main list item </li> is placed after the nested list. See example.

Example

HTML
<ul>
  <li>Our mandate</li>
  <li>Documents </li>
  <li>News
    <ul>
      <li>News Centre</li>
      <li>Press Releases</li>
      <li>Radio</li>
    </ul>
  </li>
  <li>Links</li>
  <li>UN Home</li>
</ul>
Text version

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Outline > Outline blocks elements.

Note

Make sure the option "Show element name when outlining" is checked (in the Outline menu).

Success Criteria

Lists (such as menus or lists of links or documents) should be coded as lists. If they are nested, they should be properly coded as nested lists.