Skip Navigation

MarComm Toolbox

Resources for the Campus Community

Lists

Utilize lists where appropriate to group related information.

Screen readers can allow users to navigate from list to list on a page or through each item in a list. Creating lists using hyphens or other characters prevents this.

Best Practices

Create lists using built-in formatting tools. Hyphens or other characters should not be used to create lists.

Avoid complex, multi-level lists. Use headings to break up complex lists.

Bulleted or unordered lists should be used when there is no necessary order to the information.

Numbered or ordered lists indicate a particular sequence for the information.

Good List Examples:

A simple list:

Fruits and Vegetables

  • Kale
  • Spinach
  • Broccoli
  • Tomatoes
  • Apples
  • Bananas

A complex list broken up into separate lists using headings:

Vegetables
  • Kale
  • Spinach
  • Broccoli
Fruits
  • Bananas
  • Apples
  • Tomatoes

Bad List Examples:

A simple list created using hyphens:

Fruits and Vegetables

-Kale

-Spinach

-Broccoli

-Tomatoes

-Apples

-Bananas

A complex multi-level list

  • Vegetables
    • Kale
    • Spinach
    • Broccoli
  • Fruits
    • Bananas
    • Apples
    • Tomatoes

Additional Resources

WebAIM Article on Semantic Structure and List Usage

WCAG Success Criterion 1.3.1 Info and Relationships