将 <dl> 用于技能列表是否合适？ 简答更长的答案

编程问答 2022-05-15

问题描述

我正在为我的作品集网站编写一个“关于我”页面，我想知道使用 <dl> 列出我的技能在语义上是否正确。像这样：

<dl>
  <div class="flex-container flex-row">
    <dt>html</dt>
    <dd>clean,</dd>
    <dd>semantic,</dd>
    <dd>accessible.</dd>
  </div>
  <div class="flex-container flex-row">
    <dt>css</dt>
    <dd>flexBox,</dd>
    <dd>grid</dd>
  </div>
</dl>

还是仅使用 <ul> 更好？我主要想知道屏幕阅读器会用它做什么。 MDN 有点不清楚。

谢谢！

解决方法

简答

争论主要集中在定义列表与一系列标题+段落之间。从技术上讲，它们通常可以互换，不会产生太大的影响。

我会说选择一个或另一个实际上应该取决于定义体的长度。 如果它很短，使用定义列表可能会更好。如果定义包含整个段落，那么最好使用标题和段落。

在你的情况下，我建议保留定义列表，因为你的“定义”很短。

更长的答案

在考虑短=定义列表，长=标题+段落的背后，请记住屏幕阅读器可以选择按标题导航：

  • 如果有很多，导航效率会降低。 您必须将它们用于页面的重要部分，但不应过度使用它们来拆分太小的部分。如果您为每个技能使用一个标题和一个段落，那么像您的技能列表之类的内容可能会产生太多嘈杂/非常无用的标题。
  • 在另一边，如果没有标题或标题太少，导航就没有用了。如果一个 DD 的内容变长了，其实你的 DT 就是在“偷”一个标题，也就是说你应该用一个标题分隔那个长的 DD 部分，这样就可以快速跳转到它。 在您的情况下，您的 DD 相当短，因此您根本没有“窃取”任何标题。

我想知道 <div> 中是否允许使用 <dl>，是的，根据 this question。 所以继续使用定义列表。

accessibilityaccessibilityhtmlsemantics