Accessible list guidelines

Basics

  1. Create lists to structure content and orient readers.
  2. Lists make dense text easier to read.
  3. Use correct formatting (styles or code) to create lists.
  4. Don't nest lists too deeply.

The importance of lists

  • Lists convey (and create) relationships between items. These relationships are displayed visually but also in the underlying code, or machine language, which is what assistive technologies and many other devices use.
     
  • Lists contribute to readability. They break up solid walls of text and make content easier to consume. Short, succinct content is scannable and easy for people to take in.
     
  • Lists help screen reader users, who can access all the lists on a page with a simple keystroke. They can jump back and forth from the next to the previous list, making this an efficient way to navigate a web or course page...but only if the lists are properly formated.

Fake vs. real lists

Never make "fake" lists with hyphens and returns (<br>) (or by adding bullets or numbers to paragraphs). They may visually look like lists, be they won't have the necessary underlying markup to be recognized as lists by screen readers and other devices. Instead, always properly format lists using the style format in your rich-text editor (or using semantic HTML if you're writing code).

Types of lists

There are three types of lists: unordered, ordered, and definition lists. Each of these groups information in a slightly different way to express the relationships between items and to help orient users. Nested lists depict further subordinate relationships but should be used with caution.

Unordered Lists

Unordered lists are groups of items for which the order is not relevant. Unordered list items are most often marked with a bullet.

Displayed on screen Underlying code
  • Guitar
  • Drums
  • Electric piano
  • Trumpet
  • Saxophone
<ul>
   <li>Guitar</li>
   <li>Drums</li>
   <li>Electric piano</li>
   <li>Trumpet</li>
   <li>Saxophone</li>
</ul>
In rich-text editors like Canvas:

Highlight the text you want to make a list. Then, select the unordered list button.

Creating an unordered list in Canvas with the bulleted list button in the rich-text toolbar

Ordered Lists

Ordered lists are groups of items that are ordered sequentially. Ordered list items are usually numbered.

Displayed on screen Underlying code
  1. Pour the gelatin mix into a bowl.
  2. Add boiling water, and stir for 2 min.
  3. Stir in the cold water.
  4. Refrigerate for 4 hours or until firm.
<ol>
    <li>Pour the gelatin mix into a bowl.</li>
    <li>Add boiling water, and stir for 2 min.</li>
    <li>Stir in the cold water.</li>
    <li>Refrigerate for 4 hours or until firm.</li>
</ol>
In rich-text editors like Canvas:

Highlight the text you want to make a list. Then, select the ordered list button.

Creating an ordered list in Canvas with the numbered list button in the rich-text toolbar

Description Lists

Definition lists are groups of related terms and descriptions that are often (but not exclusively) created in pairs. They are usually displayed stacked with the term indented.

Displayed on screen Underlying code
Apollo
God of music, poetry, art, sun, and knowledge.
Hades
God of the dead and riches and king of the underworld.
Zeus
God of the sky and king of the gods.
<dl>
  <dt>Apollo</dt>
    <dd>God of music, poetry, art, sun, and knowledge.</dd>
  <dt>Hades</dt>
    <dd>God of the dead and riches and king of the underworld.</dd>
  <dt>Zeus</dt>
    <dd>God of the sky and king of the gods.</dd>
</dl>

 

Most rich-text editors don't provide an option for creating definition lists. You can use the code above or create an unordered list instead.

Nested lists

Nested lists can help depict subordinate relationships. But don't go too many levels deep with your nested lists, or you risk your readers losing track of the relationships.

Displayed on screen Underlying code
  • Vegetables
  • Fruit
    • Apple
    • Pear
  • Dairy
<ul>
  <li>Vegetables</li>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Pear</li>
    </ul>
  </li>
  <li>Dairy</li>
</ul>
In rich-text editors like Canvas:

Highlight the text you want to make a nested list. Select the unordered or ordered list button. You'll need to indent (using the Tab key) the list items you want to be child items.

Creating an nested list in Canvas with the bulleted list button in the rich-text toolbar

 

 

Was this helpful?

 
 

Slack

Accessibility Connections