skip to content

Lists

in production

Tags:

Guidelines:

The ol element is used when the list is ordered and the ul element is used when the list is unordered. Definition lists (dl) are used to group terms with their definitions. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.

When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using elements to separate the list items.

Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.

Heading markup can be used to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation.

The aria-labelledby attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.

List with visual heading

Poutine's ingredients

  • French fries
  • Cheese curds
  • Gravy

HTML code

<h2 id="list-title">Poutine's ingredients</h2>
<ul aria-labelledby="list-title">
  <li>French fries</li>
  <li>Cheese curds</li>
  <li>Gravy</li>
</ul>

Lists with visually hidden heading

The list structure (ul/ol) is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.

Hiding the heading could be used for menus / navigation in the header or for breadcrumbs.

Utility menu

HTML code

<nav id="utility">
  <h2 id="utility-title"
      class="visually-hidden">
    Utility menu
  </h2>
  <ul class="list-inline list-pipe"
      aria-labelledby="utility-title">
    <li><a href="#">Portal</a></li>
    <li><a href="#">Search</a></li>
  </ul>
</nav>

HTML code

<nav id="breadcrumbs">
  <h2 id="breadcrumbs-title"
      class="visually-hidden">
    Breadcrumbs
  </h2>
  <ul class="list-inline list-breadcrumbs"
      aria-labelledby="breadcrumbs-title">
    <li><a href="#">Home</a></li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 2</a></li>
    <li>Current page title</li>
  </ul>
</nav>

References

W3C SVG