什么类型的列表应该用于时间表?

时间:2018-03-27 14:38:38

标签: html-lists wai-aria

我正在进行的在线练习作为构建时间轴有序列表的解决方案。 我使用描述列表构建了时间线,因为我认为在一年之前有一个数字或字母会很奇怪。

我认为描述列表看起来更好,但我想知道WAI-ARIA:将时间轴构造为有序列表是否有意义,因此进展在语义和逻辑上都是合乎逻辑的?

如果是这样,是否可以隐藏<ol>的序数指标(即字母,数字)?

1 个答案:

答案 0 :(得分:2)

就像你提出的那样,它都是关于语义的。在没有引用规范的情况下,使用“建议”某个人/某事物(开发者/机器)直接读取代码的HTML元素是有意义的,在这种情况下,数据遵循逻辑顺序。

其他示例是HTML5中引入的语义元素,如<header><article><section><aside><time>甚至更早的元素,如{{1 }}。

比较您的两个选项:

  • 有序列表<address>表示数据已订购,适合时间轴中的日期/事件列表。
  • 数据列表<ol>使用术语元素<dl>来保存用于描述该术语的术语/名称和描述元素<dt>。根据时间表的类型,可以说一年是这个词,但是你是把它描述为一个术语吗?很可能它没有被描述,只是用作其他数据的时间点(想想:x轴)。

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

  • 其他开发人员(即使在CSS / JS中)会知道尊重顺序,无论是生成这些元素还是样式,都可以深入了解数据。
  • 如果您有使用屏幕阅读器的残疾最终用户,读者可以尊重该顺序(想想:烹饪说明)。

所以一个有序的列表可能是最合适的,但是不要因为你的选择而失去睡眠,在这种情况下我们几乎会分裂。

如果您需要隐藏序数指示符,您可以使用CSS轻松完成:

<dd>