The <ul> Element
As defined in the HTML Living Standard, the <ul> element represents a list of items where the order of the items is not important—that is, where changing the order would not materially change the meaning of the document.
- Semantic correctness
- Programmatic accessibility
- Device independence
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
View HTML Living Standard: The ul element
Structural Requirements
- Children: A
<ul>element must only contain<li>elements (and script-supporting elements like<template>). - Visual Default: Browsers typically render unordered lists with a bullet point marker and a left indent.
- Semantic Intent: Use
<ul>for items of equal importance. For sequences where the order matters (like steps in a tutorial), use<ol>.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Lists provide critical structural context for screen reader users. When encountering a <ul>, the screen reader announces the start of a list and the total number of items. This allows users to understand the scope of the group and navigate between items quickly. Using asterisks (*) or dashes (-) as plain text instead of proper markup removes this essential programmatic relationship.
Styling with SMACSS
Following SMACSS Module Rules, you should use classes to define the visual representation of your lists, often removing the default bullet points for UI components like menus.
- List Resets: Use
list-style: noneandpadding: 0to create a clean slate for horizontal menus or custom icon lists. - Retaining Semantics: Even if you remove the visual bullets, the
<ul>remains a list in the accessibility tree, preserving the "Information and Relationship" for assistive technology.
/* Example List Module */
.m-nav-list {
list-style: none;
padding: 0;
display: flex;
}
A11y Tip: Bullet Visibility
If your list is part of a standard article flow, keep the bullets visible. They serve as a vital visual signifier that helps users with cognitive or visual impairments quickly distinguish between individual points.