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, numbers or other characters or styling should not be used to create 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.

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

Good List Examples:

Fruits and Vegetables

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

Bad List Examples:

Fruits and Vegetables

-Kale

-Spinach

-Broccoli

-Tomatoes

-Apples

-Bananas

  • 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