Avoid Multiple Indents in Bulleted Lists

We’ve recently noticed an increase in the use of bulleted lists with multiple indents on our web pages and want to explain why we’re making changes to these lists when we run across them.

When you add an additional indent to a list item, the previous list item effectively becomes a heading (see Example 1).

But your web browser doesn’t know it’s a heading—it’s just more bulleted text. And if your web browser doesn’t know a list item has become a heading, assistive technology won’t interpret it as a heading.

Adding multiple indents to bulleted list items may help to visually distinguish item relationships, but this messes up the underlying structure of headings and content on your page. And it prevents people using assistive technology from understanding your intent.

Structure

Structure is extremely important:

• Structure determines whether a search engine can understand what your page and site are communicating.
• Good structure improves a page’s Google search score and helps ensure your content looks good on any device.
• Good structure helps to make your content accessible for people using assistive technology.

A bulleted list usually follows text that provides context for the list. The context itself follows a heading.

This heading, context, and list provide a simple structure.

Additional headings, context, and lists may be added to both visually distinguish the relationship between the content elements and ensure the structure is accessible (see Example 2).

Example 1: Poor Structure

• Food Groups:
•  Fruits
  • Whole Fruit
  • Fruit Juice
• Vegetables
  • Dark Green
  • Red and Orange
• Grains
  • Whole Grains
  • Refined Grains
• Proteins
  • Seafood
  • Nuts, Seeds, and Soy
• Dairy
  • Milk and Yogurt
  • Cheese

Example 2: Good Structure

Food Groups

Fruits

• Whole Fruit
• Fruit Juice

Vegetables

• Dark Green
• Red and Orange

Grains

• Whole Grains
• Refined Grains

Proteins

• Seafood
• Nuts, Seeds, and Soy

Dairy

• Milk and Yogurt
• Cheese

So stick to bulleted lists with headings, context, and default indent style.

Your job as an editor is to provide the content and structure. Our Boise State web theme will take care of how the content “looks.”

If you override the theme because you don’t like the way something looks, you usually end up causing more problems than you may realize. We’re not just talking about accessibility issues, but also responsiveness on different displays and potential user experience issues.

We recognize you may have web content that was originally created using nested lists (or uses an outline format), and we’re happy to help you translate that content into structured, accessible web text.

Reach out to us through the Help Desk at (208) 426-4357 or email helpdesk@boisestate.edu.