Lists and Structure
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).
Examples
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
You Provide the Context, the Theme Provides the Look
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.