Introduction
Lists are great from an accessibility standpoint because they provide structured order to content in a linear fashion. Lists are recommended as potential replacements for simple tables, as tables can be more difficult to navigate and sometimes we provide info in tables that really would be better suited to lists.
You can use lists inside of lists, nested lists, just check to make sure they are coded properly. Lists should always be checked to make sure that the list items are really contained within one list, check to make sure that spacing does not break a list into multiple individual points, and use the proper techniques described below to create lists. You should never rely on indentation to provide a visual list, use the proper structure instead.
Lists are also often used to group links into a navigation section on websites. As one example, the navigation bar on this website uses nested lists.
WCAG 2.0 States
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
Unordered Lists
Unordered lists use the <ul>
element, followed by the <li>
list item element. These lists should be used when there is no specific order intended for the list you are creating.
Grocery List
- Onion
- Red Pepper
- Black Beans
- Corn
- Olive Oil
<ul>
<li>Onion</li>
<li>Red Pepper</li>
<li>Black Beans</li>
<li>Corn</li>
<li>Olive Oil</li>
</ul>
Ordered Lists
Ordered lists use the <ol>
element, followed by the <li>
list item element. These lists should be used when there is a defined sequence or order intended for the list.
Directions to Store
- Turn left at Walnut Ave
- Travel for 1 mile
- Turn right at College Street
- Travel for .3 miles
- Turn right into parking lot
<ol>
<li>Turn left at Walnut Ave</li>
<li>Travel for 1 mile</li>
<li>Turn right at College Street</li>
<li>Travel for .3 miles</li>
<li>Turn right into parking lot</li>
</ol>
Definition Lists
Definition lists use the<dl>
element, followed by the <dt>
definition term and <dd>
definition descriptions elements. These lists should be used when a specific structure is needed to provide definitions for terms on a website.
- Web Page
- A single internet address (aka URL) that contains content that must be viewed through a web browser. Usually, multiple web pages are linked to define a website.
- Website
- A group of connected web pages regarded as a single entity, or several closely related topics, such as a college, department or office website. A website usually consists of a home page.
<dl>
<dt>Web Page</dt>
<dd>A single internet address (aka URL) that contains content that must be viewed through a web browser. Usually, multiple web pages are linked to define a website.</dd>
<dt>Website</dt>
<dd>A group of connected web pages regarded as a single entity, or several closely related topics, such as a college, department or office website. A website usually consists of a home page.</dd>
</dl>
Drupal
If you are using Drupal for your site, it is very easy to add unordered and ordered lists. However, if you want to add definition lists, you'll have to go into the HTML code.
On the main menu toolbar in Drupal, when you are editing page content, you'll find two list creation icons; unordered list and ordered list. The styles have already been determined based on the template you are using. Remember to never use the indent icon to create visually distinguishable lists, always use the list icons.
Resources & Tools
Learn more about using ol, ul and dl for lists or groups of links.