UserWay无障碍插件修改span元素ID问题及阻止方法咨询

问题原因 #

UserWay插件会自动优化页面的无障碍属性，当它检测到页面元素需要建立ARIA关联（比如示例中给select添加aria-labelledby）时，若认为原有ID存在重复风险或不符合其内部无障碍优化逻辑，就会调用generateRandomId生成随机ID替换原有ID，并同步更新关联的ARIA属性值。

阻止修改特定元素ID的方案 #

方案1：优化页面原生无障碍结构 #

让插件识别已有合规的无障碍关联，无需修改ID：

• 如果#room-count仅作视觉展示，不需要被无障碍阅读器识别，可给元素添加aria-hidden="true"：

<span id="room-count" aria-hidden="true">1</span>

• 直接给select配置明确的无障碍标签，替代插件自动生成的关联：

<select class="custom-select" name="numBeds" id="selected-beds" aria-label="Rooms数量选择">

• 若需要label关联select，调整结构让label通过for属性绑定select的ID，插件就不会去修改旁边的span：

<label for="selected-beds">Rooms</label>
<select class="custom-select" name="numBeds" id="selected-beds">

方案2：配置UserWay插件排除规则 #

多数版本的UserWay支持通过后台配置排除特定元素：

• 找到插件配置中的「元素排除」或「自定义规则」选项
• 添加CSS选择器 #room-count，设置插件不对该元素进行任何无障碍优化操作

方案3：DOM拦截（不推荐） #

通过监听DOM变动，在插件修改ID后强制恢复，但此方法可能与插件逻辑冲突，稳定性差：

const targetSpan = document.getElementById('room-count');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'id' && targetSpan.id !== 'room-count') {
      targetSpan.id = 'room-count';
      // 同步修正可能被修改的ARIA属性
      const relatedSelect = document.getElementById('selected-beds');
      if (relatedSelect) relatedSelect.removeAttribute('aria-labelledby');
    }
  });
});
observer.observe(targetSpan, { attributes: true });

原始与修改后的代码对比 #

原始HTML代码 #

<div id="rooms">
  <div class="dash"></div>
  <label>Rooms</label> <span id="room-count">1</span>
  <select class="custom-select" name="numBeds" id="selected-beds">
    <option value="1" selected>1</option>
  </select>
  <div class="icon" id="beds"><img src="~/images/bed.png" /></div>
  <i class="fa fa-angle-down chevron"></i>
</div>

插件修改后的HTML代码 #

<div id="rooms">
  <div class="dash"></div>
  <label>Rooms</label> <span id="uw5c59b57">1</span>
  <select class="custom-select" name="numBeds" id="selected-beds" aria-labelledby="uw5c59b57" aria-label="rooms" data-uw-rm-form="fx">
    <option value="1" selected="">1</option>
    <option value="2">2</option>
  </select>
  <div class="icon" id="beds"><img src="/images/bed.png" role="presentation" data-uw-rm-ima="un"></div>
  <i class="fa fa-angle-down chevron"></i>
</div>

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