屏幕阅读器仅读取表单首个子组件，如何实现表单级焦点读取全部子组件？

一、解决表单获焦时无法朗读全部子组件的问题 #

你给form加tabIndex={0}让它可聚焦，但屏幕阅读器对容器元素的默认逻辑是只读第一个带语义或可交互的子元素，所以才只读出ProgressBar。别直接让form本身获焦播报，换两种更符合无障碍规范的方式：

方式1：用ARIA属性关联上下文，让输入控件获焦时播报完整信息 #

给FormTitle和ProgressBar设置唯一id，然后在form上用aria-labelledby关联标题，aria-describedby关联进度条，这样当用户聚焦到表单内第一个输入框时，屏幕阅读器会自动播报标题+进度条+当前输入框的完整信息：

<form {...props} aria-labelledby="form-title-id" aria-describedby="progress-bar-id">
    <ProgressBar id="progress-bar-id" />
    <FormTitle id="form-title-id" />
    {props.questions.map(q => <Question {...q} />)}
</form>

方式2：通过隐藏辅助元素强制播报完整内容（仅必要时用） #

如果必须让form获焦就播报全部内容，可以在form内加一个隐藏的可聚焦元素，用它来承载所有需要播报的文本，当form获焦时先聚焦这个元素，等阅读器读完再跳转到第一个输入框：

const FormWrapper = (props) => {
  const helperRef = useRef(null);
  const firstInputRef = useRef(null);

  const handleFormFocus = () => {
    helperRef.current?.focus();
    // 延迟跳转，确保阅读器完成播报
    setTimeout(() => firstInputRef.current?.focus(), 100);
  };

  return (
    <form {...props} onFocus={handleFormFocus}>
      {/* 隐藏的辅助播报元素，不会在页面显示 */}
      <div
        ref={helperRef}
        tabIndex={-1}
        aria-label={`${你的表单标题文本}, 当前进度：${进度条文本}, 共${props.questions.length}个问题`}
        style={{ position: 'absolute', left: '-9999px', top: 'auto' }}
      />
      <ProgressBar />
      <FormTitle />
      {props.questions.map((q, idx) => (
        <Question {...q} ref={idx === 0 ? firstInputRef : null} />
      ))}
    </form>
  );
};

注意：这种方式会有焦点跳转，尽量少用，优先选方式1。

二、解决Tab导航跳过FormTitle的问题 #

FormTitle默认不是可交互元素，所以Tab会跳过。给它加语义化标签+tabIndex={-1}，既能让屏幕阅读器识别，又能通过Shift+Tab或屏幕阅读器的元素导航聚焦到它，不影响正常Tab顺序：

// 如果FormTitle是自定义组件，内部用h2标签+tabIndex=-1
<FormTitle>
  <h2 tabIndex={-1}>你的表单标题</h2>
</FormTitle>
// 或者直接给FormTitle组件加属性
<FormTitle role="heading" aria-level="2" tabIndex={-1} />

如果FormTitle本身已经是h1-h6标签，只需要加tabIndex={-1}就行，标题标签自带语义，屏幕阅读器能正确识别。

核心逻辑提醒 #

• 屏幕阅读器不会主动朗读容器的所有子元素，只会播报当前焦点元素的语义和关联ARIA信息，别违背这个默认逻辑硬做全局播报。
• Tab导航只处理tabIndex>=0的可交互元素，纯文本/无语义元素默认不在Tab流里，用tabIndex=-1可以让元素被辅助技术聚焦，但不进入正常Tab顺序。

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