Aileron

List: Index-less ordered

List

A list is a series of related content beginning with a bullet, number or icon. Lists break information up, making it easier to read.

Types

Lists can be ordered or unordered. Ordered lists should begin with a number. However, lists starting with a number are not necessarily sorted.

Lists can be grouped into smaller groups (e.g. pros/cons) that are indicated by custom bullets.

Some use cases require a list markup but not a visual bullet indicator, so no-bullet lists are also an option.

Usage Guidelines

  • Every item in a list should start with a capital letter
  • Commas or semicolons shouldn’t be used at the end of each line
  • Items should be sentence case
  • Consistent phrasing should be used between items

A11y Guidelines

List labels

Lists should be labeled so assistive technologies can provide a meaningful description of what is contained in the list. The label doesn’t have to be visually displayed, though a visible label often helps users understand the relationship between items in the list.

Multi-column lists

It is important for accessibility when displaying a list of things in a multi-column layout that we mark up the list as a single list <ol> or <ul> and not multiple lists in individual columns. By creating a single list, it is easier for users of assistive technology to understand the context or relationship of the individual items within the single list which would be difficult if they are spread across different unrelated lists. 

<ol class="no-bullet" aria-label="Ordered list without index example">
    <li>
        First item
    </li>
    <li>
        Second item
    </li>
    <li>
        Third item
    </li>
    <li>
        Fourth item
    </li>
</ol>