是唯一被屏幕阅读器识别为有序序列的语义化标签，提供“第2项，共5项”等导航提示；手动编号或堆砌无法被读屏器解析，且不支持start、reversed等原生属性及嵌套层级播报。
<ol></ol> 不只是“带数字的<ul></ul>”，它是屏幕阅读器识别操作步骤、流程顺序、优先级列表的唯一可靠信号。不用它，或用错，用户就听不到“第2项，共5项”“向下箭头进入下一项”这类关键导航提示。
为什么<ol></ol>比手动编号或<p></p>堆砌更关键
屏幕阅读器不解析纯文本里的“1. 2. 3.”，也不关心你CSS里用::before生成的数字——它只信任<ol></ol>标签本身携带的语义和计数逻辑。一旦换成<p>1. 开始安装</p>
<p>2. 连接电源</p>，NVDA 或 VoiceOver 就只会读成两段普通段落，无法告知用户这是有序序列，也无法提供列表级快捷键（如O键跳入/跳出列表）。
- 手动编号在缩放或翻译时极易错位，且无法适配不同语言的序号规则（如中文“一、二、三”或日文“①②③”）
-
<ol></ol>支持原生start、reversed、type属性，无需JS干预即可控制起始值、倒序、字母/罗马数字等，所有主流读屏器均识别 - 嵌套
<ol></ol>时，读屏器会自动播报层级关系（如“子列表，第1项”），而模拟的多层编号完全静默<ol></ol>嵌套必须严格遵循 DOM 层级浏览器对
<ol></ol>子元素有硬性限制：<ol></ol>只能直接包含<li>，不能包<div>、<code><section></section>或<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>。否则解析器会把非法子节点踢出，导致DOM结构断裂、计数重置、语义丢失。- 错误写法：
<ol><div class="step"><p>下载安装包</p></div></ol>→ 浏览器移除<div>，<code><ol></ol>变空，读屏器报“有序列表，0项” - 正确写法：每个步骤必须是
<li>，内部再包裹任意合法内容：<ol><li><div> <p>下载安装包</p> <button>开始下载</button> </div></li></ol> - 嵌套时，子
<ol></ol>必须放在父<li>内，不可悬空或跨级；否则计数中断，读屏器无法建立父子上下文 - 每条
<li>只承载一个独立操作或判断点，避免在一个<li>里塞多句指令（如“点击设置→选择账户→输入密码→勾选记住我”应拆为4个<li>） -
line-height设为无单位值（如1.6），确保用户放大字体时行距同步拉伸，防止文字粘连 - 禁用
text-align: justify，中文两端对齐产生的不规则空白会干扰词组识别；统一用text-align: left - 若需强调步骤依赖关系（如“仅当上一步完成才显示此步”），用
aria-disabled="true"配合aria-hidden="true"控制可访问性树，而非仅靠CSSdisplay: none - 用 VoiceOver（macOS）按
O键跳入列表，听是否播报“有序列表，共N项”，再用方向键逐项移动，确认是否报“第X项”及内容 - 在 Chrome DevTools 的 Accessibility 面板中查看该
<ol></ol>节点是否出现在“Accessibility Tree”中，role 是否为list，children 是否为listitem - 用 W3C Validator 校验 HTML 片段，重点检查是否报错
Element div not allowed as child of element ol—— 这类错误往往比样式问题更致命
如何让认知障碍用户真正“看懂”顺序
对阅读障碍者，光有数字不够，还需强化节奏感与视觉锚点。这不能靠JS动态加样式，必须从HTML结构+基础CSS入手：
验证
<ol></ol>是否真正生效的最低成本方法别信预览效果，要听真实反馈：
最容易被忽略的是：列表语义一旦断裂，修复成本远高于预防。一个没闭合的
<li>、一个错位的，都可能让整组步骤在读屏器里变成“无声的数字幻影”。 - 错误写法：
