时间轴应使用什么类型的列表？

Question

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

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

如果是这样，是否可以隐藏

<ol>

的序数指示符（即字母、数字）？

Answer 1

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

其他示例是 HTML5 中引入的语义元素，例如

<header>

、

<article>

、

<section>

、

<aside>

、

<time>

甚至更旧的元素，例如

<address>

。

比较您的两个选择：

• 有序列表

  <ol>

  意味着数据是有序的，这适合时间线中的日期/事件列表。
• 数据列表

  <dl>

  使用术语元素

  <dt>

  来保存术语/名称，使用描述元素

  <dd>

  来描述该术语。根据时间线的类型，可能有人会说“一年”是一个术语，但您是否将其描述为一个术语？最有可能的是它没有被描述，而只是用作其他数据的时间点（认为：x 轴）。

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

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

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

如果您需要隐藏序数指示器（请小心，某些屏幕阅读器依赖于它可见，请参阅注释），您可以使用 CSS 轻松做到这一点：

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