多步骤表单模态框完成后无障碍焦点设置的合规方案咨询

现有方案合规性分析 #

方案一：给非交互文本加tabIndex="0" #

• 这个方案不符合无障碍标准。普通div属于非交互元素，添加tabIndex="0"会让键盘用户通过Tab键聚焦到它，但聚焦后无法进行任何操作，会造成用户困惑，同时也违反了eslint jsx-a11y/no-noninteractive-tabindex规则——这条规则的存在就是为了杜绝这类不符合规范的实现。

方案二：隐藏alert组件+焦点保留在关闭按钮 #

• 这个方案完全符合无障碍标准。
  • 带有role="alert"的元素属于无障碍实时区域，会自动将“已完成所有步骤”的内容推送给屏幕阅读器，无需用户手动聚焦就能获取状态通知。
  • 焦点留在关闭按钮上，键盘用户可以直接操作关闭模态框，既保证了状态能被感知，又不影响操作效率，避免了无意义的焦点停留。

更优的第三种方案 #

可以用**aria-live="polite"的实时区域**替代alert角色，适合不需要强制打断用户的场景：

<div aria-live="polite" class="hidden">Completed All Steps.</div>

• 和role="alert"（属于assertive级别，会立刻打断屏幕阅读器当前播报）不同，aria-live="polite"会等用户当前操作结束后再播报通知，体验更流畅。
• 配合视觉隐藏类，视觉用户看不到重复内容，屏幕阅读器能获取状态信息，焦点依然保留在关闭按钮上，兼顾两类用户需求。

另外，还可以给关闭按钮补充状态关联，让操作逻辑更清晰：

<div id="completeStatus" class="hidden">Completed All Steps.</div>
<button id="closeBtn" aria-describedby="completeStatus">Close</button>
<div aria-live="polite" aria-labelledby="completeStatus"></div>

这种方式让按钮的操作含义更明确，同时实时区域确保状态被主动通知到用户。

内容的提问来源于stack exchange，提问作者rishabh sethi