Lists

Proper listing communicates relationships between items

When content is a group of related items, using the proper listing elements tells browsers and assistive technologies that items belong together.  

For example, a list of requirements listed with bullet points is more meaningful than just by line breaks:

• Valid ID
• Proof of address
• Completed form

Versus

Valid ID
Proof of address
Completed form

They help screen reader users

Screen readers announce when users enter a list and often report:

• That it is a list
• How many items it contains

For example, a screen reader might say, "List with 5 items," helping users understand the page structure and navigate more efficiently.

They improve navigation

Users of assistive technologies can often move through content by landmarks and structural elements. Properly marked-up lists make scanning and navigation easier, especially on long pages.

They support users with cognitive disabilities

Lists break information into smaller, manageable chunks, reducing cognitive load and making content easier to understand and remember.

Instead of:  "To register, create an account, verify your email, complete your profile, and submit your application."

A list is often clearer and more visually appealing:

1. Create an account.
2. Verify your email.
3. Complete your profile.
4. Submit your application.

They improve visual readability

Lists help all users by:

• Increasing scannability
• Reducing dense blocks of text
• Highlighting key information

Best practices

• Do not create "fake lists" using only line breaks, dashes, or bullets without list markup.
• Keep list items concise when possible.