When to Use Lists and Why They Matter
There's a reason why most JavaScript frameworks and libraries use a "Todo" app to showcase their demonstration apps: people love lists! Well, most do. Lists are great in that they help give content meaningful structure and help readers stay focused in providing a nod in how many points are remaining out of the total number of possible items.
For this same reason, using HTML list elements, in proper context, helps all users to consume content. Screen reader users have extra benefits as when encountering a list, the total amount of items is announced. WIth this, the user can choose to continue exploring the list items or skip past the list entirely.
Types of list content
Which types of content might be considered a list? Typically, a list would consist of a grouping of related content items, usually concise in nature. That said, here are a few examples of valid list content:
- Site navigation
- Breadcrumb navigation
- Social media links
- Blog listing page
- Blog post comments
- Collection list
- Error list
- Product list
- Related checkbox controls
There are more examples which could be included in this list, but the idea to keep in mind is when content consists of a grouping of related items, chances are it should be a list. The question remains, which list element should be in use?
List elements
There are three different types of list elements in HTML. Each have their own semantic meaning and using them appropriately will go a long way with providing meaning to your content.
Here's a brief overview of each:
- Unordered list,
ul; A listing of related content with no specific order. Use to add structure and meaning with navigation, blog listing page, carousel arrow controls, ect. - Ordered list,
ol; A listing of related content which depends on a specific order. Use to add meaning to check lists, carousel items and bullet controls, etc. - Description list,
dl; A listing of related pairs of content. Use to add meaning when defining terminology, an FAQ list, outputting regular/sale pricing, etc.
WCAG success criteria
This comes back to 1.3.1 Info and Relationships which states:
"Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text."