JAWS读屏软件聚焦城市输入框时错误朗读上一字段内容问题

当使用向下箭头键切换到城市或街道地址输入框时，JAWS读屏软件无法正确播报当前聚焦输入框的信息，反而朗读上一个字段（街道输入框）的内容。预期行为是仅播报当前聚焦输入框的对应信息。

问题代码 #

<div class="ms-Panel-content content-410">
  <div class="panelSubheadingStyle-396">
    We recommend you keep only one phone number and one address in your profile
    for easy communication.
  </div>
  <fieldset class="groupedElements-421">
    <legend class="legendStyle-422">
      <label class="ms-Label titleLabelStyle-423">Phone number</label>
    </legend>
    <div class="ms-TextField root-425">
      <div class="ms-TextField-wrapper">
        <div class="ms-TextField-fieldGroup fieldGroup-426">
          <input
            type="text"
            id="TextField134"
            maxlength="15"
            class="ms-TextField-field field-427"
            aria-label="add phone number"
            aria-invalid="false"
            value="545465464"
          />
        </div>
      </div>
    </div>
  </fieldset>
  <h3 class="panelSubheadTitleStyle-397">Address</h3>
  <fieldset class="groupedElements-436">
    <legend class="legendStyle-422">
      <label class="ms-Label titleLabelStyle-423"
        >Street address<span class="requiredLabelStyle-419"
          >&nbsp;(required)</span
        ></label
      >
    </legend>
    <div class="ms-TextField root-425">
      <div class="ms-TextField-wrapper">
        <div class="ms-TextField-fieldGroup fieldGroup-426">
          <input
            type="text"
            id="TextField139"
            aria-required="true"
            maxlength="100"
            class="ms-TextField-field field-427"
            aria-label="add street address"
            aria-invalid="false"
            value="asd"
          />
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset class="groupedElements-436">
    <legend class="legendStyle-422">
      <label class="ms-Label titleLabelStyle-423"
        >City<span class="requiredLabelStyle-419">&nbsp;(required)</span></label
      >
    </legend>
    <div class="ms-TextField root-425">
      <div class="ms-TextField-wrapper">
        <div class="ms-TextField-fieldGroup fieldGroup-426">
          <input
            type="text"
            id="TextField144"
            aria-required="true"
            maxlength="100"
            class="ms-TextField-field field-427"
            aria-label="add city"
            aria-invalid="false"
            value="city input"
          />
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset class="groupedElements-436">
    <legend class="legendStyle-422">
      <label class="ms-Label titleLabelStyle-423"
        >Country/region of residence<span class="requiredLabelStyle-419"
          >&nbsp;(required)</span
        ></label
      >
    </legend>
    <div class="ms-ComboBox-container dropdownStyle-394">
      <div
        data-ktp-target="true"
        id="ComboBox149wrapper"
        class="ms-ComboBox css-437"
      >
        <input
          autocapitalize="off"
          autocomplete="off"
          aria-autocomplete="inline"
          data-ktp-execute-target="true"
          data-is-interactable="true"
          id="ComboBox149-input"
          class="ms-ComboBox-Input css-438"
          type="text"
          aria-expanded="false"
          role="combobox"
          aria-label="select your country or region"
          aria-describedby="ComboBox149-error"
          spellcheck="false"
          placeholder="Select a country/region"
          data-lpignore="true"
          value="Venezuela"
          style="font-family: inherit"
        /><button
          type="button"
          class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446"
          role="presentation"
          data-is-focusable="false"
          tabindex="-1"
        >
          <span
            class="ms-Button-flexContainer flexContainer-67"
            data-automationid="splitbuttonprimary"
            ><i
              data-icon-name="ChevronDown"
              aria-hidden="true"
              class="ms-Icon root-32 css-321 ms-Button-icon icon-447"
              style="font-family: FabricMDL2Icons"
              ></i
            ></span
          >
        </button>
      </div>
    </div>
  </fieldset>
  <fieldset class="groupedElements-436">
    <legend class="legendStyle-422">
      <label class="ms-Label titleLabelStyle-423"
        >State/province<span class="requiredLabelStyle-419"
          >&nbsp;(required)</span
        ></label
      >
    </legend>
    <div class="ms-ComboBox-container dropdownStyle-394">
      <div
        data-ktp-target="true"
        id="ComboBox153wrapper"
        class="ms-ComboBox css-437"
      >
        <input
          autocapitalize="off"
          autocomplete="off"
          aria-autocomplete="both"
          data-ktp-execute-target="true"
          data-is-interactable="true"
          id="ComboBox153-input"
          class="ms-ComboBox-Input css-438"
          type="text"
          aria-expanded="false"
          role="combobox"
          aria-label="select your state or province"
          aria-describedby="ComboBox153-error"
          aria-disabled="false"
          spellcheck="false"
          placeholder="Select a state/province"
          data-lpignore="true"
          value=""
          style="font-family: inherit"
        /><button
          type="button"
          class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446"
          role="presentation"
          data-is-focusable="false"
          tabindex="-1"
        >
          <span
            class="ms-Button-flexContainer flexContainer-67"
            data-automationid="splitbuttonprimary"
            ><i
              data-icon-name="ChevronDown"
              aria-hidden="true"
              class="ms-Icon root-32 css-321 ms-Button-icon icon-447"
              style="font-family: FabricMDL2Icons"
              ></i
            ></span
          >
        </button>
      </div>
    </div>
  </fieldset>
</div>

解决方案 #

1. 绑定label与input的关联 #

当前代码中所有label未通过for属性绑定对应input的id，这是JAWS无法正确识别字段关联的核心原因。给每个label添加for属性，值与对应input的id一致：

<!-- 示例：街道地址字段 -->
<label class="ms-Label titleLabelStyle-423" for="TextField139">
  Street address<span class="requiredLabelStyle-419">&nbsp;(required)</span>
</label>
<input
  type="text"
  id="TextField139"
  ...
/>

2. 优化aria-label的准确性 #

将aria-label调整为与label文本一致的描述，包含必填标识，帮助JAWS准确播报：

<input
  type="text"
  id="TextField139"
  aria-label="Street address, required"
  ...
/>
<input
  type="text"
  id="TextField144"
  aria-label="City, required"
  ...
/>

3. 调整fieldset的语义结构 #

避免在legend内嵌套label，将label移至legend外，确保fieldset语义清晰，读屏软件能正确解析字段组：

<fieldset class="groupedElements-436">
  <legend class="legendStyle-422">Street address</legend>
  <label class="ms-Label titleLabelStyle-423" for="TextField139">
    Street address<span class="requiredLabelStyle-419">&nbsp;(required)</span>
  </label>
  <!-- input容器 -->
</fieldset>

4. JAWS特定适配 #

• 确保所有可聚焦元素的tabindex顺序符合视觉流，避免手动设置非必要的tabindex值。
• 检查是否有自定义focus事件干扰JAWS的焦点播报逻辑，确保焦点切换时没有额外DOM操作导致读屏解析错误。

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