nvda焦点卡住主因是表单元素缺失tabindex、未处理enter事件或错误隐藏提示;应确保可交互元素有tabindex="0"、用hidden+aria-hidden替代display:none、提交按钮须为,并关闭干扰插件。

NVDA 在 Firefox 中测试表单时“焦点卡住”,基本就是 tabindex、aria-hidden 或 submit 语义缺失导致的,不是 NVDA 本身的问题。
为什么按 Tab 进入输入框后 NVDA 就不往下读了?
常见现象是:焦点停在 <input> 上反复播报“编辑文本”,后续元素完全静音;或按 Enter 没反应,但鼠标点击正常。这通常不是浏览器或 NVDA 故障,而是页面没告诉辅助技术“接下来该读什么”。
- 可交互元素(如自定义下拉触发器、
<div onclick> 按钮)缺少 <code>tabindex="0",导致键盘焦点无法抵达 - 某个父容器被设了
tabindex="-1",意外截断了焦点流 - 错误提示区域用了
display: none隐藏,但没同步加aria-hidden="true",NVDA 仍尝试读取不可见内容,逻辑卡死 - 提交按钮写成
<div onclick="submitForm()">,NVDA 不识别其表单提交意图,也不绑定 Enter 键 <h3>动态插入的错误提示 NVDA 为什么不读?</h3> <p>NVDA 默认不监听 DOM 变化,<code>innerHTML或appendChild插入的内容不会自动播报——它只读“初始渲染时就在可访问性树里”的元素。- 给错误提示容器加上
role="alert"(中断式,适合校验失败)或aria-live="polite"(非中断式,适合搜索建议) -
aria-live容器不能是display: none或hidden状态,必须真实渲染且未被aria-hidden="true"掩盖 - 若 JS 动态插入后仍不播报,可手动调用
element.setAttribute('aria-live', 'assertive')强制刷新,或对role="alert"元素执行focus() - 验证方式:打开 Chrome DevTools → Elements 面板 → 右键元素 → “Inspect Accessibility Tree”,确认该节点是否出现在可访问性树中
为什么 NVDA 读不出“用户名”而只说“编辑文本”?
它根本不会猜。placeholder、视觉位置、上一行文字,全都不算数。NVDA 只认明确绑定的
<label></label>或 ARIA 名称。- 首选显式关联:
<label for="username">用户名</label><input id="username"> - 次选隐式包裹:
<label>用户名<input type="text"></label>(注意中间不能有<div> 等块级元素打断) <li>禁用 placeholder 当标签——<code>placeholder="用户名"对屏幕阅读器无效,且在聚焦后消失 - 若必须用非标准结构(如浮动 label),至少补
aria-labelledby="label-id"或aria-label="用户名"
最易被忽略的是:所有自定义交互控件(开关、折叠面板、分页按钮)都得手动加
tabindex="0"并监听Enter和Space,否则键盘用户根本点不到——这点连很多“无障碍达标”页面都会漏掉。 - 给错误提示容器加上











