使用read-aloud扩展时网页表单被文本朗读忽略，求排查建议

很多文本朗读扩展（比如你用的Read Aloud）默认会跳过表单控件这类交互元素，优先读取纯文本内容。你可以通过以下几种方式调整：

• 调整扩展的自定义规则
  这类扩展大多支持自定义需要朗读的元素。比如在Chrome/Firefox的Read Aloud设置里，找到高级选项中的「自定义CSS选择器」，添加form, input, label, button这类表单相关选择器，把它们加入朗读白名单。

• 优化页面语义结构
  给表单添加<fieldset>和<legend>分组，能帮助朗读工具更好识别表单区域的内容逻辑，同时不影响原生无障碍：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <h1>Lorem ipsum</h1>
  
      <form method="POST" action="">
          <fieldset>
              <legend>表单选择项</legend>
              <input id="check1" type="checkbox" value="1">
              <label for="check1">This is an input label</label>
  
              <button type="submit">Submit</button>
          </fieldset>
      </form>
  </body>
  </html>
  

  另外你代码里的aria-labelledby是冗余的，for属性已经完成了label和input的关联，去掉后不影响无障碍体验。

• 强制标记需朗读的元素
  如果扩展支持，你可以给表单元素添加特定class（比如read-aloud-include），然后在扩展设置中指定该class为朗读目标。或者临时给控件添加role="text"，让工具把它视为文本内容，但这种方式要注意测试，避免破坏屏幕阅读器的原生识别逻辑。

• 注意工具定位差异
  要明确：Read Aloud是文本朗读工具，核心是读取网页正文；而测试无障碍性应该用专门的屏幕阅读器（比如NVDA、VoiceOver），它们会自动识别表单控件的关联标签、状态等无障碍信息，不会忽略这些元素。

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