Edge浏览器下JAWS无法读取连续多个combobox标签如何解决

我编写的代码实现了一行放置3个combobox，代码如下：

<div>
 <div>
  <label for="contactType">
   <span aria-hidden="true" class="required">*</span>
   <span class="screenReaderOnlyContent">Required</span>
   Contact Type
  </label>
 </div>
 <div>
  <select id="contactType" name="contactType">
   <option value="PAPR">Paper</option>
   <option value="FTFC">Face to Face</option>
   <option value="PHCL">Phone Call</option>
  </select>
 </div>
</div>
<div>
 <div>
  <label for="deliveryMethod">
   <span aria-hidden="true" class="required">*</span>
   <span class="screenReaderOnlyContent">Required</span>
   Delivery Method
  </label>
 </div>
 <div>
  <select id="deliveryMethod" name="deliveryMethod">
   <option value="ONLN" selected="selected">On-Line</option>
   <option value="SOR">Secure Mailbox</option>
   <option value="FAX">Facsimile</option>
   <option value="PTML">Postal Mail</option>
  </select>
 </div>
</div>
<div>
 <div>
  <label for="altDeliveryMethod">
   <span aria-hidden="true" class="required">*</span>
   <span class="screenReaderOnlyContent">Required</span>
   Alternate Delivery Method
  </label>
 </div>
 <div>
  <select id="altDeliveryMethod" name="altDeliveryMethod">
   <option value="SOR">Secure Mailbox</option>
   <option value="FAX">Facsimile</option>
   <option value="PTML">Postal Mail</option>
  </select>
 </div>
</div>

实际测试发现，按Tab键切换焦点时，JAWS仅朗读第一个combobox的标签文本，其余combobox的标签均被忽略。该问题仅在combobox连续排列时出现：若combobox之间有其他类型输入控件分隔，或用户不使用Tab切换、直接让JAWS朗读整个页面内容时，标签均能正常识别。使用的JAWS版本为2019.1912.203 ILM，该问题仅在Edge浏览器中复现。

这个问题属于JAWS 2019与Edge浏览器组合的兼容bug，可通过以下方式修复：

• 方案1：通过aria-labelledby显式关联标签与下拉框，优先级高于原生for属性关联，兼容度更高。
  给每个label标签添加唯一id，再给对应select加上aria-labelledby属性指向该id即可，修改示例如下：

  <div>
   <div>
    <!-- 给label加唯一id -->
    <label for="contactType" id="label-contactType">
     <span aria-hidden="true" class="required">*</span>
     <span class="screenReaderOnlyContent">Required</span>
     Contact Type
    </label>
   </div>
   <div>
    <!-- 下拉框通过aria-labelledby关联label的id -->
    <select id="contactType" name="contactType" aria-labelledby="label-contactType">
     <option value="PAPR">Paper</option>
     <option value="FTFC">Face to Face</option>
     <option value="PHCL">Phone Call</option>
    </select>
   </div>
  </div>
  

  其余两个下拉框按相同逻辑修改即可。
• 方案2：修改标签关联方式，将select直接嵌套在label标签内部，无需依赖id关联，旧版读屏器的识别率更高，修改示例如下：

  <div>
   <label for="contactType">
    <span aria-hidden="true" class="required">*</span>
    <span class="screenReaderOnlyContent">Required</span>
    Contact Type
    <select id="contactType" name="contactType">
     <option value="PAPR">Paper</option>
     <option value="FTFC">Face to Face</option>
     <option value="PHCL">Phone Call</option>
    </select>
   </label>
  </div>
  

• 方案3：升级JAWS版本至2020及以上，该版本已经修复了与Edge浏览器搭配时连续同类型表单控件的标签读取bug，无需修改代码即可解决问题。

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