HTML 列表入门：5 个毁掉 UX 的错误
Source: Dev.to
（未提供需要翻译的正文内容。如需翻译，请粘贴完整的文本。）
TL;DR
大多数初学者会把 <ul> 和 <ol> 混用，并且会疑惑为什么页面看起来有问题。尤其有一种嵌套错误会悄悄破坏屏幕阅读器的可访问性——几乎没有人提到它。本文介绍了五大 HTML 列表错误以及如何快速修复它们。
问题：你的列表代码看起来没问题，却感觉不对
你大约用了 20 分钟学会了 HTML 列表。把 <li> 标签塞进 <ul>，完成。工作结束。发布吧。
但用户却在跳出。你的内容显得杂乱。屏幕阅读器还把你的导航菜单朗读得像在以 1.5× 速度阅读法律免责声明。
听起来熟悉吗？你并不孤单。对初学者来说，HTML 列表表面上看起来异常简单。但在其背后，有五个特定的错误悄悄地在任何人阅读你的内容之前就扼杀了用户体验。
让我们来修复它。
HTML 列表的真实作用（超越项目符号）
在讨论常见错误之前，先说一下大多数教程都会跳过的点：HTML 列表 不是一种视觉工具。它们是一种 语义结构工具。当你把内容包裹在 <ul> 或 <ol> 中时，你实际上在告诉浏览器、搜索引擎以及屏幕阅读器：这些项目属于同一组并且彼此有关联。
这对 SEO 和可访问性有着巨大的影响。
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Flour</li>
</ul>
<ol>
<li>Eggs</li>
<li>Milk</li>
<li>Flour</li>
</ol>Google 能够解析第二种列表。屏幕阅读器也能正确朗读。你的未来的自己也能在不哭泣的情况下维护它。
错误 1：在顺序实际重要时使用 <ul>
这是初学者最常犯的 HTML 列表错误。无序列表（<ul>）适用于顺序无关紧要的项目——披萨配料、功能列表、原料集合。
有序列表（<ol>）适用于步骤、排名以及顺序有意义的情形。
<ol>
<li>Add the eggs</li>
<li>Preheat the oven</li>
<li>Mix the flour</li>
<li>Preheat the oven to 180 °C</li>
<li>Mix the flour and eggs</li>
<li>Bake for 25 minutes</li>
</ol>这对用户体验有什么影响？ <ol> 会自动为你的项目编号。在中间添加一步时，编号会自动更新——无需手动编辑，也不会出现编号错误。屏幕阅读器还会朗读 “第 2 步，共 5 步”，从而清晰地引导用户完成流程。
Source: …
错误 2：列表嵌套不当
嵌套列表是初学者要么表现出色，要么彻底崩溃的地方。几乎没人提到的规则是：嵌套列表必须放在 <li> 元素内部，而不能直接放在 <ul> 或 <ol> 中。
错误示例（无效 HTML）：
<ul>
<li>Monday</li>
<ul>
<li>9 AM Meeting</li>
<li>10 AM Coffee (mandatory)</li>
</ul>
</ul>正确示例（有效 HTML）：
<ul>
<li>Monday
<ul>
<li>9 AM Meeting</li>
<li>10 AM Coffee (mandatory)</li>
</ul>
</li>
</ul>错误的写法在大多数浏览器中确实会渲染，但它会生成无效的 HTML，干扰辅助技术，并导致不同浏览器之间的样式不可预测。当你在乎真实用户时，正确的结构绝不是可选的。
错误 3：使用 CSS 去除列表语义并忘记添加 ARIA
当你在 CSS 中设置 list-style: none 来去除导航菜单的项目符号时，Safari 和 VoiceOver 实际上会停止将该元素宣布为列表。你只用一行 CSS 就破坏了语义意义。
解决办法只需添加一个属性：
<ul role="list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>添加 role="list" 可以恢复可访问性朗读。大多数针对初学者的 HTML 列表教程从未提及这一点。这是你在 10 秒内可以做出的最具影响力的修复之一。
错误 4：使用 <br> 标签而不是正确的列表结构
初学者有时会用换行来伪造列表：
Feature 1<br>
Feature 2<br>
Feature 3甚至直接使用纯文本：
- Feature 1
- Feature 2
- Feature 3使用 <br> 的写法完全没有语义价值。搜索引擎无法识别列表项，屏幕阅读器也无法统计项目数量或在项目之间导航。这相当于在记事本里写 Excel 电子表格的 HTML 版。
错误 5：过度嵌套导致代码无人能读
列表嵌套很强大。如果因为内容真的如此复杂而嵌套到四层深，几乎总是说明你的信息架构需要重新思考，而不是继续嵌套。
经验法则： 如果嵌套层级超过两层，考虑是否有些子项应该拥有自己的章节并使用标题。
Source:
关键要点
- 使用
<ol>表示顺序步骤，使用<ul>表示无序集合。 - 始终 将子列表嵌套在
<li>元素内部，绝不能直接放在<ul>/<ol>中。 - 当使用 CSS 去除项目符号时，添加
role="list"以保持屏幕阅读器的行为。 - 切勿使用
<br>标签伪造列表。 - 两层嵌套几乎总是足够的。
这五个错误是初学者在 HTML 列表中最常导致可访问性和可维护性问题的原因。修正它们，你的列表将对用户和开发者都更加友好。
修复后会立即改善你的 HTML 结构、可访问性评分以及用户体验。
但在完整文章中还有一种技术——超越基础 CSS 的自定义列表项目符号——它可以彻底改变列表在各类设备上的外观和行为。
想要获取包含交互示例和完整项目符号自定义演练的完整指南吗？
阅读 Drive Coding 上的完整文章：