Jaws屏幕阅读器无法读取JavaScript的confirm、alert，如何实现可被识别的alert弹窗？

原生alert()、confirm()在JAWS中无法正常读取，主要是部分旧版JAWS和浏览器组合存在兼容性问题，以及弹窗触发时机和屏幕阅读器的焦点捕获逻辑不匹配导致，按照WAI-ARIA规范实现自定义弹窗即可解决该问题。

核心实现要求 #

• 弹窗容器必须添加role="alertdialog"属性，同时配置aria-modal="true"声明这是模态弹窗，会独占交互焦点
• 弹窗的提示内容要和容器关联，用aria-labelledby指向弹窗标题的元素ID，aria-describedby指向提示正文的元素ID
• 弹窗触发时必须主动把键盘焦点移到弹窗内的交互元素上（比如确认按钮），不能让焦点留在背景页面
• 弹窗关闭后必须把焦点返还给之前触发弹窗的元素，避免焦点丢失
• 要支持ESC键关闭弹窗，符合通用键盘操作习惯

最简实现代码示例 #

<!-- 弹窗结构 默认隐藏 -->
<div id="customAlert" role="alertdialog" aria-modal="true" aria-labelledby="alertTitle" aria-describedby="alertContent" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border: 1px solid #ccc; background: #fff; z-index: 9999;">
  <h3 id="alertTitle">提示</h3>
  <p id="alertContent"></p>
  <button id="alertConfirmBtn">确认</button>
</div>

<script>
// 调用自定义弹窗的方法
function showAccessibleAlert(text, closeCallback) {
  const alertEl = document.getElementById('customAlert')
  const contentEl = document.getElementById('alertContent')
  const confirmBtn = document.getElementById('alertConfirmBtn')
  // 保存触发弹窗的元素，关闭后返还焦点
  const lastFocusedEl = document.activeElement

  contentEl.textContent = text
  alertEl.style.display = 'block'
  // 主动移动焦点到确认按钮，触发JAWS读取弹窗关联的所有文本内容
  confirmBtn.focus()

  // 关闭逻辑
  function closeAlert() {
    alertEl.style.display = 'none'
    lastFocusedEl.focus()
    confirmBtn.removeEventListener('click', closeAlert)
    window.removeEventListener('keydown', escCloseHandler)
    if (typeof closeCallback === 'function') closeCallback()
  }

  // ESC键关闭支持
  function escCloseHandler(e) {
    if (e.key === 'Escape') closeAlert()
  }

  confirmBtn.addEventListener('click', closeAlert)
  window.addEventListener('keydown', escCloseHandler)
}

// 调用示例
// showAccessibleAlert('您的操作已提交成功', () => {
//   console.log('弹窗已关闭')
// })
</script>

JAWS适配额外注意事项 #

• 弹窗初始状态使用display: none隐藏，不要用visibility: hidden或者opacity: 0，避免JAWS提前读取未激活的弹窗内容
• 如果是双按钮的confirm类型弹窗，把焦点默认放在第一个交互按钮上即可，JAWS会自动读取关联的标题和正文内容
• 不要给弹窗添加aria-hidden="true"属性，会导致屏幕阅读器直接跳过该元素

内容的提问来源于stack exchange，提问作者Atul Sinha