屏幕阅读器未播报重置状态的技术解决方案咨询

1. role="status" 是否可行？ #

完全可行。role="status" 属于ARIA实时区域（live region）的一种，专门用于向屏幕阅读器播报非侵入式的状态更新，不需要用户切换焦点，非常适合这种操作完成后的提示场景。它默认隐含 aria-live="polite" 属性，会在屏幕阅读器当前播报结束后读取更新内容，不会打断用户操作。

2. 开发人员需要做的修改 #

步骤1：添加隐藏的实时区域元素 #

在页面DOM中添加一个默认为空的元素，设置 role="status"，并通过CSS将其视觉隐藏（但保留屏幕阅读器可访问性）：

<div role="status" class="sr-only"></div>

对应的视觉隐藏CSS：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

步骤2：绑定重置按钮的事件处理逻辑 #

当用户点击重置按钮、清除输入框值后，实时更新上述实时区域的内容：

const resetBtn = document.getElementById('reset-button');
const statusRegion = document.querySelector('[role="status"]');

resetBtn.addEventListener('click', () => {
  // 清除所有输入框的值
  document.querySelectorAll('input').forEach(input => input.value = '');
  
  // 更新实时区域内容，触发屏幕阅读器播报
  statusRegion.textContent = '重置完成';
  
  // 可选：一段时间后清空内容，避免后续重复播报
  setTimeout(() => {
    statusRegion.textContent = '';
  }, 1000);
});

3. 重置状态可访问性示例说明 #

以下是完整的可访问重置功能示例结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }
  </style>
</head>
<body>
  <div role="status" class="sr-only"></div>
  
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" value="测试">
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" value="test@example.com">
    
    <button type="button" id="reset-button">重置</button>
  </form>

  <script>
    const resetBtn = document.getElementById('reset-button');
    const statusRegion = document.querySelector('[role="status"]');

    resetBtn.addEventListener('click', () => {
      document.querySelectorAll('input').forEach(input => input.value = '');
      statusRegion.textContent = '重置完成';
      setTimeout(() => statusRegion.textContent = '', 1000);
    });
  </script>
</body>
</html>

该示例中，点击重置按钮后，屏幕阅读器会自动播报“重置完成”，同时输入框内容被清除，且不会添加多余的视觉元素干扰普通用户。

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