HTML ol列表如何满足无障碍访问要求-html教程-PHP中文网

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

html ol列表如何满足无障碍访问要求

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

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

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

屏幕阅读器对

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

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

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

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

常见错误是把

放在

外面，或混用

和

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

<ol>
<li>
    <h2>第一步：填写基本信息</h2>
    <p>请输入姓名、邮箱和手机号…</p>
  </li>
  <li>
    <h2>第二步：确认订单</h2>
    <p>核对商品、地址与支付方式…</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
													<p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </li>
</ol>

必须直接包裹在
内部，不能跨出或前置到
每个
只应含一个主标题（
），避免同级标题（如两个
）连续出现却无内容分隔

若某步内需展开子步骤（如“上传证件”含身份证、户口本两项），应在该
内用

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

当出现

1. - 禁止用纯
  - 替代方案优先级：用
    折叠中间层 → 为每层
    添加 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 行为和人工测试节奏全拧在一起。