html-lists - 时间线应使用什么类型的列表？

Question

我正在做的在线练习给出了构建时间线和有序列表的解决方案。 我使用描述列表构建了时间线，因为我认为在一年之前有数字或字母看起来很奇怪。

我认为描述列表看起来更好，但我想知道 WAI-ARIA:将时间线构造为有序列表是否有意义，以便进展在语义上和外观上都符合逻辑？

如果是这样，是否可以隐藏 <ol> 的序数指示符(即字母、数字) ？

Answer 1

就像您所建议的，这都是关于语义的。在不引用规范的情况下，使用 HTML 元素来“建议”直接阅读代码的某人/某事(开发人员/机器)有进一步的含义是有意义的，在这种情况下，数据遵循逻辑顺序。

其他示例是 HTML5 中引入的语义元素，例如 <header> , <article> , <section> , <aside> , <time>甚至更旧的元素，如 <address> 。

比较您的两个选项:

• 有序列表 <ol>意味着数据是有序的，这适合时间线中的日期/事件列表。
• 数据列表<dl>使用术语元素 <dt>用于保存术语/名称和描述元素 <dd>用于描述该术语。根据时间线的类型，可能有人会说“一年”是一个术语，但您是否将其描述为一个术语？很可能它没有被描述，而只是用作其他数据的时间点(认为:x 轴)。

此外，使用有序列表意味着:

• 其他开发人员(甚至在 CSS/JS 中)会知道要尊重顺序，无论是在生成这些元素还是在样式中，并深入了解数据。
• 如果您有使用屏幕阅读器的残障最终用户，则读者可以尊重该顺序(例如: cooking 说明)。

因此，有序列表可能是最合适的，不过也不要因为您的选择而失眠，在这种情况下我们几乎是在吹毛求疵。

如果您需要隐藏序数指示符，您可以使用 CSS 轻松做到这一点:

ol { 
    list-style: none; // removes ordinal indicator 
    padding-left: 0; // removes the left-over space, if needed
}