Accessibility错误：重复标签使用问题排查求助

核心问题分析 #

你的问题根源在于两个表单内的元素ID和标签关联完全重复：两个<input>的id都是search-locations-address，对应的<label>的for属性也指向同一个ID，同时aria-label文本完全一致。辅助技术会识别到多个元素共享同一个ID，判定为“重复标签”错误；另外模态框显示时，背景表单未被正确隔离，导致辅助技术仍能读取到重复内容。

以下是具体解决步骤：

1. 给表单元素分配唯一ID #

这是解决重复标签的核心，确保每个<label>只绑定唯一的<input>：

• 非模态表单的input和对应label：将id和for改为search-locations-address-page
• 模态框内的input和对应label：将id和for改为search-locations-address-modal
• 同时，自动补全的<ul>的id也要对应修改（比如ui-id-1-page和ui-id-1-modal），避免组件内部的ID冲突

修改后的非模态表单片段示例：

<form onsubmit="return false;" class="city-form-inner">
  <div id="ember506" class="wrap-autocomplete ember-view">  
    <label for="search-locations-address-page">Enter ZIP, State or City</label>
    <div class="autocomplete-input">
      <input role="combobox" aria-expanded="false" type="text" name="search-locations-address" id="search-locations-address-page" class="form-control ember-text-field ember-view ui-autocomplete-input" autocomplete="off">
      <ul id="ui-id-1-page" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete custom-autocomplete ui-front" role="listbox" style="display: none;"></ul>
    </div>
    <div role="status" aria-live="polite" class="autocomplete-status">0 results are available, use up and down arrow keys to navigate</div>
  </div>
  <input type="button" value="Find Stores" class="btn-blue submit" data-ember-action="" data-ember-action-513="513">
</form>

2. 模态框显示时正确隔离背景表单 #

仅用aria-hidden可能无法完全隔离，需要配合以下操作：

• 给模态框容器添加aria-modal="true"和role="dialog"，告诉辅助技术这是模态窗口，自动忽略背景内容
• 模态框打开时，给非模态表单的父容器同时添加aria-hidden="true"和inert属性：
  • aria-hidden="true"让辅助技术忽略该元素及其子元素
  • inert强制元素不可交互且被辅助技术完全忽略（现代浏览器支持）
• 模态框打开后，将焦点自动移到模态框内的<input>上，确保用户操作聚焦在模态窗口中

示例交互代码：

// 模态框打开时
const pageFormContainer = document.getElementById('page-form-container'); // 非模态表单的父容器ID
const modalInput = document.getElementById('search-locations-address-modal');

pageFormContainer.setAttribute('aria-hidden', 'true');
pageFormContainer.setAttribute('inert', '');
modalInput.focus();

// 模态框关闭时
pageFormContainer.removeAttribute('aria-hidden');
pageFormContainer.removeAttribute('inert');

3. 移除冗余的aria-label属性 #

原代码中<input>同时有<label>关联和aria-label，属于冗余设置，可能导致辅助技术读取重复文本。如果<label>是可见且正确关联的，直接去掉aria-label即可，让辅助技术优先读取<label>的内容。

4. 验证测试 #

• 用ARC toolkit重新扫描，确认“重复标签”错误消失
• 用屏幕阅读器（如NVDA、VoiceOver）测试：模态框打开时，背景表单的内容不会被读取，模态框内的输入框标签关联正确

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