Universal Design for Web Applications

Lists

Lists provide a variety of semantic information, primarily groupings. One of the most common uses of lists these days is for creating menus. The basic structure is a list (CSS is used to hide submenu items and position the menu bar horizontally or vertically), and then the behavior is layered on top of that (through CSS and/or JavaScript).

There are three ways to make a list, and the differences among them provide additional information about the list items and the relationships between them:

The unordered list (UL)

Used for bulleted lists

The ordered list (OL)

Used for numbered lists

The definition list (DL)

Used for associations between two related pieces of data

Why use a list instead of paragraphs with icons that make it look like a list? As with headers, when people see a list they start to process it as a chunk of information that they can either skip or delve into. An ordered list helps users discern the priority or ordering implied in the list. When looking at a definition list, it’s clear which items are terms and which are definitions. Providing the semantics allows tools to communicate this information to people. Tommy Olsson has a good article about lists that may help you understand what we are talking about: “When Is a List Not a List?” (http://www.autisticcuckoo.net/archive.php?id=2007/08/07/lists).