unnecessary-list

Description

The unnecessary-list rule ensures that you do not structure content that is not a list as an HTML list. A list is a group of related items—that is, items that share a common purpose, context, or category. For example, navigation links, steps in a process, or ingredients in a recipe are considered related items and should be structured as a list. In contrast, unrelated paragraphs or miscellaneous content should not be grouped in a list. Using list elements (<ul>, <ol>) for content that is not a list makes it difficult for assistive technologies to correctly interpret the page structure.

Assistive technologies, like screen readers, announce the number of items in a list and the current item’s position. Using a list for unrelated items provides incorrect information to the user. Also, if there is only one item in a list, it shouldn’t be a list.

This rule helps you adhere to WCAG Success Criterion 1.3.1: Info and Relationships, which states that information, structure, and relationships conveyed through presentation must be programmatically determinable.

Examples

In the following example, a series of unrelated paragraphs are incorrectly structured as an unordered list. This violates the unnecessary-list rule because the content is not a group of related items.

In the following corrected example, you use <p> tags to mark the paragraph. This ensures that the page structure is accurately conveyed to assistive technologies.

How to fix?

To fix violations of the unnecessary-list rule, follow these steps:

• Inspect the element in question for lists (<ul>, <ol> tags).

• Assess if the content within the list logically represents a group of related items. Examples include a navigation menu, a table of contents, or a list of steps.

• If the content is not a list, or if there is only one item in the list, consider whether a list structure is necessary. In most cases, a single-item list should be replaced with appropriate semantic elements.

• Use CSS to apply visual styling if you need a specific layout.

Reference

WCAG Success Criterion 1.3.1: Info and Relationships