Chrome下Angular开发如何阻止JAWS键入密码时朗读输入内容

核心前提 #

标准原生<input type="password">在Chrome下被JAWS识别时，默认只会播报输入的掩码字符，不会读出真实密码内容，出现明文播报本质是输入框配置错误或额外逻辑触发了屏幕阅读器的内容抓取。

可落地修复步骤 #

• 第一步：校验密码输入框基础属性
  必须固定设置输入框type="password"，禁止使用自定义div模拟密码输入框，禁止在用户输入过程中动态将type属性切换为text（常见于显示/隐藏密码功能的逻辑bug）。正确的基础写法如下：

  <input 
    type="password" 
    id="user-pwd" 
    name="user-pwd"
    autocomplete="current-password"
    autocorrect="off"
    autocapitalize="off"
    spellcheck="false"
  >
  

  禁止给密码输入框绑定动态更新的aria-label、aria-valuetext属性，这类属性变更会主动触发JAWS播报更新后的内容。

• 第二步：Angular项目专项排查

  1. 移除密码输入框上的aria-live属性，所有aria-live区域的内容更新都会被屏幕阅读器主动抓取
  2. 检查密码输入框绑定的input、keyup事件逻辑，禁止在输入过程中修改输入框关联的提示文本、ARIA标签
  3. 如果项目集成了全局无障碍（a11y）播报逻辑，给密码框添加专属标记跳过值监听，参考代码：

  // 模板中给密码框加排除类
  <input type="password" class="skip-a11y-track" [formControl]="passwordControl">
  
  // 全局无障碍事件逻辑中添加过滤规则
  fromEvent<InputEvent>(document, 'input')
    .pipe(
      filter(event => {
        const target = event.target as HTMLElement;
        return !target.classList.contains('skip-a11y-track');
      })
    )
    .subscribe(/* 原有通用输入播报逻辑 */)
  

  4. 不要给密码输入框覆盖自定义role属性，保留原生input[type=password]的默认语义即可，自定义role会让JAWS无法识别这是密码域。

• 第三步：兼容问题兜底校验
  完成上述配置后如果仍存在播报问题，排查是否有第三方Chrome插件注入脚本修改了密码框的原生属性，可在无插件的Chrome无痕模式下验证效果。

  不需要要求终端用户修改JAWS配置，标准密码域的播报逻辑由JAWS和浏览器的默认交互规则保证，不会泄露真实输入内容。

内容的提问来源于stack exchange，提问作者Amit Maurya