时间线列表类型选择咨询：有序列表语义与显示优化问题

Great question—this is a common spot where semantic HTML and visual design needs intersect, so let's unpack it clearly.

1. Semantic validity of ordered lists for timelines #

Absolutely yes! A timeline is fundamentally a sequence of events ordered by time, and the HTML <ol> element is explicitly defined to represent "a list of items in a specific order." This is a perfect semantic match.

Compare this to using a description list (<dl>): <dl> is intended for key-value pairs (like terms and their definitions). Using it for a timeline misuses its semantic purpose—screen readers will interpret it as a "definition group" rather than an ordered sequence, which harms accessibility for users relying on assistive tech.

From a WAI-ARIA perspective, you don't even need extra attributes to fix the semantic meaning. The <ol> element already carries the correct "ordered sequence" semantics, and assistive technologies will automatically communicate this to users (e.g., announcing "1st timeline event," "2nd timeline event," etc.), which is critical for accessible navigation.

2. Hiding visual list numbering (without breaking semantics) #

You absolutely can hide the numbering for visual purposes—this is a standard practice and doesn't conflict with accessibility as long as you keep the <ol> structure intact.

To hide the visual numbers, use this simple CSS:

.timeline {
  list-style: none; /* Shorthand to remove all list markers */
  padding-left: 0; /* Optional: removes default browser padding for cleaner layout */
}

A critical note: don't switch to a <ul> just to avoid visual numbers. The <ul> element represents an "unordered list"—a group of items with no specific order—this would break the timeline's core semantic meaning, leaving assistive tech unable to communicate the chronological order to users.

Hiding the numbers with CSS only changes the visual presentation; the underlying <ol> semantic structure remains intact. Screen readers will still recognize it as an ordered list and announce the position of each item, so you get the clean visual design you want without sacrificing accessibility.

内容的提问来源于stack exchange，提问作者Michael Skaggs