ol比ul更适合步骤类导航，因其默认播报序号、支持CSS多级编号、增强SEO；需严格嵌套标题、避免深层嵌套、同步焦点与ARIA状态，并禁用display:none切换。

本身是语义化标签，天然比

更适合表达有顺序、有层级的导航或步骤类内容。但“用了

”不等于“无障碍达标”，关键在结构组织、嵌套方式和辅助技术实际播报效果。

为什么 ol 比 ul 更适合步骤类导航

屏幕阅读器对

的默认行为是播报序号信息，例如“第1项”“第2项”，这对用户建立流程预期至关重要；而

默认只读“列表项”，不带计数提示。

还能配合 CSS counters 实现多级编号（如 1.1、1.2），且搜索引擎会将其中的

等标题识别为带上下文的二级标题，增强 SEO 与语义权重。

ol 中嵌套标题的写法必须严格遵循 DOM 顺序

常见错误是把

放在

1. 外面，或混用

   和

   却无明确子主题逻辑。正确结构是：

   <ol>
     <li>
       <h2>第一步：填写基本信息</h2>
       <p>请输入姓名、邮箱和手机号…</p>
     </li>
     <li>
       <h2>第二步：确认订单</h2>
       <p>核对商品、地址与支付方式…</p><div class="aritcle_card flexRow">
                                                           <div class="artcardd flexRow">
                                                                   <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
                                                                                   src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
                                                                   <div class="aritcle_card_info flexColumn">
                                                                           <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
                                                                           <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
                                                                   </div>
                                                                   <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                           </div>
                                                   </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
     </li>
   </ol>

   • 必须直接包裹在

   • 内部，不能跨出或前置到
     外
   • 每个
   • 只应含一个主标题（

     ），避免同级标题（如两个

     ）连续出现却无内容分隔

2. 若某步内需展开子步骤（如“上传证件”含身份证、户口本两项），应在该
3. 内用
   或
   + aria-label 区分，而非强行再套一层

ol 嵌套超过 3 层会破坏屏幕阅读器上下文感知

当出现

1. 1. … 这类四层以上嵌套时，NVDA 和 VoiceOver 无法主动播报“这是第三级子步骤”，用户听到的是一串无标识的条目，极易迷失位置。这不是渲染问题，而是交互逻辑断裂。
      • 禁止用纯
        嵌套表达权限树、多维分类等深度结构
      • 替代方案优先级：用
        折叠中间层 → 为每层

        添加 aria-label（如
        ）→ JS 渲染时注入 role="treeitem" + aria-level="4"（需同时包裹 role="tree" 容器）
      • 服务端输出前应校验数据深度，拒绝 depth > 6 的树结构；前端不做兜底，只做安全截断（如 depth > 3 时自动降级为可展开列表）

      动态更新 ol 内容时必须同步处理焦点与语义状态

      多步表单中通过 JS 替换

      子项（如从“填写信息”切换到“确认订单”）后，若不干预，焦点常卡在空白处或保留在旧
      1. ，屏幕阅读器也读不出新步骤标题。
         • 切换后立即 focus() 到新
         • 内的

           （需先设 tabindex="-1"）或首个可操作元素

         • 用 aria-live="polite" + aria-atomic="true" 更新旁白文案，例如 liveRegion.textContent = "当前步骤：确认订单，请核对收货地址"
         • 为当前步骤的

           添加 aria-current="step"，确保读屏明确播报“确认订单，当前步骤”

         • 禁用 display: none 切换步骤——隐藏的
         • 仍参与 tab 顺序，会导致键盘用户跳过整个区域
         真正难的不是写出合法 HTML，而是让屏幕阅读器用户在听完“第3项”之后，心里清楚自己处在流程哪一环、下一步该做什么、出错时如何退回。这需要把 DOM 结构、ARIA 状态、JS 行为和人工测试节奏全拧在一起。