aria-current="step" 是标记表单进度条当前步骤的最直接有效方式，必须加在当前步骤容器上，值固定为"step"，切换时需手动更新，不可用 aria-selected 或 role="progressbar" 替代。
怎么用 aria-current 标记当前步骤
表单进度条里“当前在哪一步”必须让屏幕阅读器可感知，aria-current="step" 是最直接有效的标注方式。不用靠颜色或位置判断，它明确告诉辅助技术“这是活动项”。
常见错误是只加 class="active" 或用 CSS 伪类高亮，但这些对读屏软件完全不可见；也有开发者误用 aria-selected（那是给 tablist 或 listbox 用的）。
-
aria-current必须加在当前步骤的容器元素上，比如<li>或<button></button> - 值固定用
"step"，不要写"true"或"page"—— 后者语义不符 - 每轮切换时要手动移除旧节点的
aria-current，再设到新节点上；React/Vue 中注意状态同步时机
为什么 role="progressbar" 不适合多步骤导航
进度条（role="progressbar"）适用于有明确数值比例的加载过程，比如“上传完成 65%”。但多步骤表单的“第2步/共5步”不是线性进度，而是离散状态切换 —— 强行套用会误导用户以为能拖动或跳转。
真实场景中，有人把整个进度条容器设成 progressbar，再配 aria-valuenow="2"，结果读屏报出“进度 40%”，用户完全困惑。
- 步骤导航该用
role="navigation"或语义化<ol></ol>+aria-current - 如果真要加数值辅助，可用
aria-label="步骤 2，共 5 步"，但别混进progressbar - 浏览器对
progressbar的朗读行为不一致：ChromeVox 读数值，NVDA 可能忽略aria-valuetext
表单字段和步骤指示器之间怎么建立 aria-describedby 关联
当用户聚焦到某步的输入框（比如“邮箱”），需要主动告知“你正在填写第2步：联系信息”，而不是让用户自己回头找进度条。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
典型翻车点是只在 <label></label> 里写“邮箱（第2步）”，但读屏不会自动关联上下文；或者把整个进度条的 ID 塞进所有字段的 aria-describedby，导致每次聚焦都重复朗读全部步骤。
- 每个步骤的主字段（如
<input id="email">）应绑定当前步骤容器的 ID：aria-describedby="step-2" - 步骤容器（如
<li id="step-2">）本身要有简洁描述：aria-label="步骤 2：联系信息" - 避免跨步骤复用同一段描述文本；步骤切换后，记得更新对应字段的
aria-describedby指向
键盘操作时怎么保证步骤跳转不丢失焦点或语义
用户按 Tab 进入下一步按钮（如“继续”），点击后页面局部刷新，焦点却回到顶部或消失 —— 这会让屏幕阅读器用户彻底迷失位置。
更隐蔽的问题是：用 display: none 隐藏未激活步骤，但没同步移除 tabindex="-1" 或禁用其子控件，导致 Tab 键仍能进入不可见区域。
- 步骤切换后，焦点必须落到新步骤第一个可交互元素（通常是首个
<input>或<button></button>） - 隐藏非当前步骤时，用
hidden属性或aria-hidden="true"+inert（现代浏览器支持），比纯 CSS 更可靠 - 禁用按钮（如“上一步”在第一步时）要用
disabled属性，而不是仅靠 CSS 灰掉 +pointer-events: none
最难调的是异步加载步骤内容后的焦点管理 —— DOM 插入完成、Vue 的 nextTick、React 的 useEffect 清理时机，稍有延迟就会让焦点卡在旧节点。得实测不同读屏组合（NVDA + Firefox / VoiceOver + Safari）的表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
