列表与描述列表

列表表达的是多个项目之间的集合关系。ul 用于没有顺序要求的项目，ol 用于顺序本身有意义的步骤或排名，dl 用于术语与描述、名称与值等成对关系。选择哪种列表，取决于内容关系，不取决于默认项目符号长什么样。

三种列表的最小结构

<ol>
  <li>准备环境</li>
  <li>运行实验</li>
  <li>记录结果</li>
</ol>

<ul>
  <li>键盘</li>
  <li>鼠标</li>
</ul>

<dl>
  <dt>DOM</dt>
  <dd>浏览器根据文档构造的对象树。</dd>
</dl>

li 必须属于 ul、ol 或菜单语境；列表项目可以包含段落、链接和嵌套列表。ol 的数字是结构提示，不应该为了视觉编号而把一串 div 手写成“1、2、3”。dl 中一个术语可以有多个描述，一个描述也可以对应多个术语；它不只是“把两列数据排成表格”的快捷方式。

顺序是内容契约

如果步骤顺序改变，结果也会改变，就使用 ol。如果用户可以任意顺序阅读，使用 ul。用 CSS 隐藏数字、改项目符号或重新排列视觉顺序时，要确认阅读顺序、键盘顺序和提交顺序仍然一致。

变化一个条件观察边界

把安装步骤从 ol 改成 ul，页面仍然能读，但步骤关系不再被机器和辅助技术表达。把术语表改成两列 div，视觉可能更像表格，却无法清楚表达名称与描述的对应关系。真正的表格数据仍应使用 table，不要用 dl 替代它。

运行实验

1. 用 CSS 隐藏 ol 的默认编号，确认文档结构仍然保留顺序。
2. 给 ol 的第二项加入嵌套 ul，观察嵌套项目属于哪一步。
3. 在可访问性树中比较 ul、ol 和 dl 的角色与项目数量。
4. 将一组术语错误地改成两列 div，记录视觉相同但语义导航丢失的位置。

常见错误

• 为了得到项目符号而使用列表，却没有集合关系。
• 用无序列表表示顺序敏感的流程。
• 用 dl 做任意的两列布局。
• 用 CSS 重新排序列表，却不检查读屏和键盘顺序。

练习

把一份“发布前检查”标记成有序步骤，把“所需工具”标记成无序列表，把三组术语和解释标记成描述列表。改变步骤顺序后，说明哪些结果应该随之改变，哪些内容只改变视觉样式。

继续阅读

下一篇开始处理用户可以激活的链接和导航：链接与导航。

查看本节答案