如何用响应式 description list 展示可访问的键值对？

2026-11-06数据小许

结论

如果内容由标签和对应说明组成，建议用 HTML 的 <dl>、<dt> 和 <dd> 表示，再通过 CSS Grid 控制列数。每组标签和值作为一个完整条目，按阅读顺序放进 DOM。宽屏显示两列，窄屏切换为一列。这样可以避免用 role="table" 模拟表格，也不用为屏幕阅读器维护隐藏副本。

用 description list 表示键值对

原示例用 <div role="table>、role="rowheader" 和 role="cell" 表达键值对。对于这类数据，原生描述列表更直接：<dt> 表示名称，<dd> 表示对应的值。

<dl class="kv-list">
  <div class="kv-item">
    <dt>Label 1</dt>
    <dd>Value 1</dd>
  </div>
  <div class="kv-item">
    <dt>Label 2</dt>
    <dd>Value 2</dd>
  </div>
  <div class="kv-item">
    <dt>Label 3</dt>
    <dd>Value 3</dd>
  </div>
  <div class="kv-item">
    <dt>Label 4</dt>
    <dd>Value 4</dd>
  </div>
</dl>

每个 .kv-item 在 DOM 中都按“标签、值”的顺序排列。网格调整视觉布局时，标签和值仍保持成对关系。

.kv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  border: 1px solid black;
}

.kv-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.5rem;
}

.kv-item dt {
  font-weight: bold;
}

.kv-item dd {
  margin: 0;
}

@media (max-width: 40rem) {
  .kv-list {
    grid-template-columns: 1fr;
  }
}

40rem 是布局断点示例，可以根据内容宽度和实际设计调整。minmax(0, 1fr) 能让网格轨道收缩，减少长内容撑破列宽的情况。如果值中可能出现很长且没有空格的字符串，还可以设置 overflow-wrap: anywhere。

何时使用原生表格

如果数据需要按行和列比较，并且列结构明确，应使用原生 <table>、<tr>、<th scope="row"> 和 <td> 表达表格关系，再用 CSS 设置视觉样式。单纯的名称和值列表通常更适合用 <dl>。结构应根据数据关系选择，而非根据视觉布局需要的列数决定。

关于选中状态

如果某项只需要显示选中样式，可以在对应的 .kv-item 上设置状态类，再通过 CSS 呈现，无需复制一份屏幕阅读器专用列表。如果用户可以操作选择项，则应根据交互方式使用原生控件，例如单选时使用 radio，并确保控件有可访问名称。静态描述列表不应仅为了标记视觉选中状态而改造成 ARIA 交互组件。