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)
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.
List inside of lists and nested lists can be used but 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. 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 such as the Related Links
on GHC’s website
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
1. Turn right on Boone St.
2. Boone St. curves and becomes US-101
3. Take bridge over Chehalis River
4. Turn right on E. Herron St.
5. Turn right into parking lot
<ol>
<li> Turn right on Boone St.</li>
<li> Boone St. curves and becomes </li>
<li> Take bridge over Chehalis River </li>
<li>Turn right on E. Herron St.</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.
Examples
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.
<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>
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.
<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>
How to make lists on GHC’s Website
Unordered List
To make an unordered list on a webpage select the bullets icon. If using Filtered HTML the icon will be
on the right side. Notice on the bottom left hand corner the HTML coding ul and li for unordered lists.
Ordered List
To make an ordered list on a webpage select the numbers icon. The picture below is when the user is in
Full HTML for the Text Format. If using Filtered HTML the icon will be on the right side. Notice on the
bottom left hand corner the HTML coding ol and li for ordered lists.
Definition Lists
To add a definition list, the user will need to select Code in the Text Format drop down menu and enter
the correct HTML coding and the content.
Remember to never use the indent icon to create visually distinguishable lists, always use the list icons.