The <ol> Element
As defined in the HTML Living Standard, the <ol> element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.
- Review the WCAG guidelines.
- Audit the current codebase.
- Implement semantic fixes.
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
View HTML Living Standard: The ol element
Specialized Attributes
The ordered list element provides unique attributes to control the sequence and numbering:
reversed: A boolean attribute that indicates the list is in descending order (e.g., a "Top 10" countdown).start: An integer that specifies the beginning value for the list items. Useful when a list is broken up across multiple sections.type: Sets the kind of marker to use (e.g.,1for numbers,afor lowercase letters,Ifor uppercase Roman numerals).
- Release product
- Final testing
- Code freeze
<ol reversed start="10" type="1">
<li>Value is 10</li>
<li>Value is 9</li>
</ol>
Accessibility Impact
Correct use of <ol> provides vital structural information that cannot be conveyed through visual formatting alone.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
When a list is marked up as <ol>, screen readers announce both the existence of the list and the total number of items. Crucially, they also announce the number or letter of each item as the user navigates. This allows blind users to understand their "position" within a sequence of steps, which is impossible if the list is just a series of paragraphs starting with manually typed numbers.
Styling with CSS
While the type attribute handles the marker style semantically, you should use the CSS list-style-type property for design-heavy customizations. Following SMACSS Module Rules, ensure that your custom markers remain legible and high-contrast.
ol.m-custom-list {
list-style-type: decimal-leading-zero;
color: var(--color-primary);
padding-left: 2rem;
}
A11y Tip: Logical Fragments
If a single list must be visually separated by other content (like an image or a callout), use the start attribute on the second part of the list to maintain the correct programmatic sequence.