Skip to main content

Lists

Lists neatly present related ideas and outline process steps. Bulleted and numbered lists can be used in web pages and documents to format, arrange, and emphasize text. For users of assistive technology, such as screen readers, the list format communicates the presence and number of items in the list when navigating content. 

Bulleted List

If list items are related ideas or terms and order is not essential, use a bulleted (or unordered) list. For example, the following is a list of basic accessibility practices for electronic documents:

  • Organize material into usable sections
  • Use styles to mark headings
  • Use meaningful words to identify hyperlinks
  • Provide text descriptions (i.e., alt text) for images

All these accessibility practices are relevant to creating an accessible document, but the exact order does not matter. A bulleted list is appropriate. In HTML, the list would look like this:

<ul>
   <li>Organize material into usable sections</li>
   <li>Use styles to mark headings</li>
   <li>Use meaningful words to identify hyperlinks</li>
   <li>Provide text descriptions (i.e., alt text) for images</li>
</ul>

Numbered List

If list items are a sequence or a series of steps, use a numbered list. A numbered list is important when specific steps must be performed as part of a process. For example, the following are steps to log in to email:

  1. Open your web browser
  2. Navigate to the email login page
  3. Enter your user name and password
  4. Press the Submit button

In this example, following a specific sequence is necessary to complete the task successfully. An ordered list is appropriate. In HTML, the list would look like this:

<ol>
   <li>Open your web browser</li>
   <li>Navigate to the email login page</li>
   <li>Enter your user name and password</li>
   <li>Press the Submit button</li>
</ul>

Non-Bulleted Lists

Any time there is a list of items, they need to be contained within one of the two list types above. However, sometimes a list needs to be presented without numbering or bullets in front of each item. In this case, continue to use the list element but remove the list styling using CSS (for web pages).

  • Palo Alto
  • Woodside
  • Redwood City
  • Menlo Park
  • Portola Valley
  • Los Altos Hills
.plain { list-style-type: none; margin: 0; padding: 0;}

Or the same list could be presented horizontally.

  • Palo Alto
  • Woodside
  • Redwood City
  • Menlo Park
  • Portola Valley
  • Los Altos Hills
.horizontal { list-style-type: none; margin: 0; padding: 0;}
.horizontal li { display: inline; padding-right: 1em; }
Last modified